• 译 文 address: Flutter — Creating Elegant UIs with Containers
  • Maneesha Erandi
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Hoarfroster
  • Proofreader: Zz Zhaojin

Container plays an important role in building a great UI with Flutter. I’m a big fan of adding Container controls anywhere, but that’s because it really helps me create a UI quickly and easily.

I really hope this article is helpful for beginners!

Let’s take a look at how we can use the Container control to make our UI more attractive.

To generate a simple square or rectangle, we can create a Container control and give it a width and height (we can see that the following example avoids using child controls to draw shapes).

Widget squareContainer() {
  return Container(
    color: Colors.purpleAccent,
    width: 100,
    height: 100,); } Widget rectContainer() {return Container(
    color: Colors.greenAccent,
    width: 200,
    height: 100,); }Copy the code

The following example shows how to round a Container control. The first two controls used BoxDecoration rounded corner control. We can also draw a circle using BoxDecoration, as we did with the third control:

Widget roundedContainer() {
  return Container(
    width: 100,
    height: 50,
    decoration: BoxDecoration(
        color: Colors.tealAccent,
        borderRadius: BorderRadius.all(Radius.circular(10)))); } Widget fullyRoundedContainer() {return Container(
    width: 100,
    height: 50,
    decoration: BoxDecoration(
        color: Colors.blueAccent,
        borderRadius: BorderRadius.all(Radius.circular(50)))); } Widget circleContainer() {return Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(color: Colors.redAccent, shape: BoxShape.circle),
  );
}
Copy the code

If we use a Container control to wrap a child control with onTap (in this case, InkWell), we can even build a custom button:

Widget containerButton() {
  return InkWell(
    onTap: () {},
    child: Container(
        decoration: BoxDecoration(
            color: Colors.deepOrange,
            borderRadius: BorderRadius.all(Radius.circular(10))),
        padding: EdgeInsets.symmetric(horizontal: 60, vertical: 20),
        child: Text(
          "Button",
          style: TextStyle(color: Colors.white),
        )),
  );
}
Copy the code

We can also decorate our Container control by using border-.all () to generate a Border. BoxShadow can add a shadow to our Container, as in control 2:

Widget containerWithBorders() {
  return Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(),
        borderRadius: BorderRadius.all(Radius.circular(15)))); } Widget containerWithShadow() {return Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(15)),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.4),
          spreadRadius: 5,
          blurRadius: 9,
          offset: Offset(0.3), // changes position of shadow),,),); }Copy the code

In a Container control, we can add decorative images to it by using BoxDecoration and DecorationImage. Here you can look for the difference between the containers in the two images and see how the added decoration is applied to the control:

Widget containerImgDecoration() {
  return Container(
    width: 150,
    height: 150,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15)),
        image: DecorationImage(
            image: AssetImage("assets/images/img.jpg"), fit: BoxFit.cover)),
  );
}

Widget containerImg() {
  return Container(
    width: 150,
    height: 150,
    decoration:
        BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(15))),
    child: Image(image: AssetImage("assets/images/img.jpg"), fit: BoxFit.cover),
  );
}
Copy the code

We can add colorful title backgrounds to make our UI more attractive. Here are three examples of title bars constructed using the Container control:

Widget containerHeaderOne({width}) {
  return Container(
    width: width,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.deepPurpleAccent,
      borderRadius:  BorderRadius.vertical(
          bottom:  Radius.elliptical(width, 200.0)))); } Widget containerHeaderTwo({width}) {return Container(
    width: width,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.redAccent,
      borderRadius: BorderRadius.only(
          bottomRight: Radius.circular(200)))); } Widget containerHeaderThree({width}) {return Container(
    width: width,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.green,
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(200),
          bottomRight: Radius.circular(200)))); }Copy the code

You can find the full code here.

Thanks for reading!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.