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

Question

        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?

Answer 1

In order to add border on container inside row widget , we have to use decoration for the inner containers. Once you will post the error, we can answer you better but i think the below code will be helpful for you. If you are using decoration then you must not add colour attribute in container directly, it should be in decoration only.

     Container(
          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,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                    shape: BoxShape.rectangle,
                    border: Border.all(
                      color: Colors.blue,
                      width: 4,
                    )),
              ),
              Container(
                child: Text("Hi"),
                margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
                width: MediaQuery.of(context).size.width * 0.42,
                height: 90,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                    shape: BoxShape.rectangle,
                    border: Border.all(
                      color: Colors.blue,
                      width: 4,
                    )),
              )
            ],
          ),
        ),

Answer 2

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
      )
    ],
  ),
),

Answer 3

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,),