Row's child making alignment based on their child size-CodePudding

These two rows are aligned based on their child sizes.

That's why the first TAGS and second TAGS text widgets are not centered. I want them to be properly centered like CSS Grid.

My Approach:

Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 50,
                  color: Colors.black,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: defaultPadding),
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: const [
                        Text("Name"),
                        Text("Tags"),
                        Text("Default"),
                      ],
                    ),
                  ),
                ),
                Container(
                  height: 60,
                  color: const Color(0xFF5D5C5D),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: defaultPadding),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: const [Text("USER OTP SENT"), Text("TAGS"), Text("SMS")],
                    ),
                  ),
                )
              ],
            )

I want them to align like this (Red Lines determine the starting/ending position):

CodePudding user response：

There is GridView Widget in Flutter just like in CSS.

Use GridView.count() then define crossAxisCount to specify the number of widgets on the horizontal axis (yours are 3).

2.Use childAspectRatio (itemWidth / itemHeight) to get the desired height.

In code 6 children were defined as mentioned 3 of them are going to be laid out in a row.

GridView.count(
          primary: false,
          childAspectRatio: 3 / 1.5,
          crossAxisCount: 3,
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              height: 10,
              padding: const EdgeInsets.all(8),
              child: const Text(
                "Name",
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.black,
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              child: const Text(
                'Tags',
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.black,
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              child: const Text(
                'Default',
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.black,
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              child: const Text('USER OTP SENT',
                  style: TextStyle(color: Colors.white)),
              color: const Color(0xFF5D5C5D),
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              child: const Text('Tags', style: TextStyle(color: Colors.white)),
              color: const Color(0xFF5D5C5D),
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              child: const Text('SMS', style: TextStyle(color: Colors.white)),
              color: const Color(0xFF5D5C5D),
            ),
          ],
        )