CODEWITHSUNDEEP
flutterdart
Rob
Rob

Reputation: 2164

How to match Container's Width with Other Container in Flutter?

enter image description here

Hi, I am new to Flutter. I'm trying to develop a screen, where there are two containers. As you can see in the image above, the first container has a horizontally symmetric width, but the second container with "Date and Time" is smaller than the above container as it should be equal. This is what I've done:

  class _CurrentTabState extends State<CurrentTab> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          margin: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
          padding: EdgeInsets.only(left: 20),
          height: 50,
          color: Colors.lightBlue,
          child: Align(
            alignment: Alignment.centerLeft,
            child: Text(
              "YOUR BOOKINGS",
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 16),
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.only(left: 20, right: 20),
          margin: EdgeInsets.symmetric(horizontal: 20),
          decoration: BoxDecoration(
              border: Border.all(
                  color: Colors.grey
              )
          ),
          child: Column(
            children: <Widget>[
              Text(
                  "Fri. 12 Jul - 18:00"
              )
            ],
          ),
        )
      ],
    );
  }
}

Upvotes: 2

Views: 3914

Answers (2)

GaboBrandX
GaboBrandX

Reputation: 2675

You can give those Containers a width, and still keep them responsive. I'll show you two options:

  1. If you want them to use the whole screen width, you can use the infinity constant:

    Container(
  width: double.infinity,
),

Then you can give it some space on the sides with padding.

  1. Use MediaQuery:

    Container(
  width: MediaQuery.of(context).size.width / 0.5, // Or whatever proportion you need.
),

If you use this second option, you might want to keep them centered. You can achieve that with the mainAxisAlignment from your Column:

return Column(
  mainAxisSize: MainAxisSize.max,
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisAlignment: MainAxisAlignment.center,
  ...
);

Upvotes: 2

LgFranco
LgFranco

Reputation: 1044

Just put the attribute width: double.infinity, in both Containers.

Upvotes: 0

Related Questions