'How to add border on a container inside a row widget in Flutter?

        Container(
    //            decoration: BoxDecoration(
    //              border: Border.all(color: Colors.black45),
    //              borderRadius: BorderRadius.circular(8.0),
    //            ),
                child: Row(
                  children: <Widget>[
                    Container(
                      child: Text("hi"),
                      margin : EdgeInsets.fromLTRB(20, 8, 8, 16),
                      width: MediaQuery.of(context).size.width *0.42,
                      height: 90,
                      color: Colors.black12,
                    ),

                    Container(
                      child: Text("Hi"),
                      margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
                      width: MediaQuery.of(context).size.width * 0.42 ,
                      height: 90,
                      color: Colors.black12,
                    )
                  ],
                ),
              ),

I can add border using Box decoration on the outer container, but it's throwing me an error when I am trying to do the same on the inner containers. What is the problem and how to solve it?

flutterlayoutwidgetborderflutter-layout


Solution 1:[1]

In container widgets you cannot use the color and decoration at the same time. Remove the color property from the Container and move it into the BoxDecoration widget

This should work:

Container(
  child: Row(
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black45),
          borderRadius: BorderRadius.circular(8.0),
          color: Colors.black12,  //add it here
        ),
        child: Text("hi"),
        margin : EdgeInsets.fromLTRB(20, 8, 8, 16),
        width: MediaQuery.of(context).size.width *0.42,
        height: 90,
        //color: Colors.black12,    //must be removed
      ),

      Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black45),
          borderRadius: BorderRadius.circular(8.0),
          color: Colors.black12,  //add it here
        ),
        child: Text("Hi"),
        margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
        width: MediaQuery.of(context).size.width * 0.42 ,
        height: 90,
        //color: Colors.black12,      // must be removed
      )
    ],
  ),
),

Solution 2:[2]

Consider the humble Divider widget to keep things simple. If you add it to the bottom of a Column in your row it will add a line that will act as a border.

const Divider(height: 1.0,),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Manuel
Solution 2 orgreeno

Related Questions