Flutter Rows and columns

Priya
February 21, 2023
209 views
2 votes
3 Answers

I am a flutter beginner. How to create elements like 4*2 tabular columns without borders? I tried, But I didn’t get the alignment I wanted. Like This

can someone guide me on how I can solve this problem? Here is my simplified code for the build method of my stateful widget:

Container(
                      decoration: BoxDecoration(
                          border: Border.all(
                            width: 0.9,
                            color: Color(0xff908f8f),
                          ),
                          borderRadius:
                              BorderRadius.all(Radius.circular(5))),
                      child: SizedBox(
                        width: 295.0,
                        height: 50.0,
                        child: Row(
                          children: [
                            Padding(
                              padding:
                                  const EdgeInsets.only(top: 10, left: 10),
                              child: Table(
                                children: const [
                                  TableRow(children: [
                                    Text(
                                      "1",
                                      style: TextStyle(fontSize: 15.0),
                                    ),
                                    Text(
                                      "Mohit",
                                      style: TextStyle(fontSize: 15.0),
                                    ),
                                    Text(
                                      "Pre",
                                      style: TextStyle(fontSize: 15.0),
                                    ),
                                    Text(
                                      "25",
                                      style: TextStyle(fontSize: 15.0),
                                    ),
                                  ]),
                                  TableRow(children: [
                                    Text(
                                      "2",
                                      style: TextStyle(fontSize: 15.0),
                                    ),
                                    Text(
                                      "Ankit",
                                      style: TextStyle(fontSize: 15.0),
                                    ),
                                    Text(
                                      "Pre",
                                      style: TextStyle(fontSize: 15.0),
                                    ),
                                    Text(
                                      "27",
                                      style: TextStyle(fontSize: 15.0),
                                    ),
                                  ]),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),

Tags: dart flutter

Answers

- Abramov_Igor
- February 21, 2023 at 9:23 am
- 0 votes
0
I think the best way to achieve this layout is to make a row widget containing 4 columns with Text(name) and Text(value) as children.
```
Row(
  children: [
    Column(
      children: [
        Text('name'),
        Text('value'),
      ],
    ),
    Column(
      children: [
        Text('name'),
        Text('value'),
      ],
    ),
    Column(
      children: [
        Text('name'),
        Text('value'),
      ],
    ),
    Column(
      children: [
        Text('name'),
        Text('value'),
      ],
    ),
  ],
),
```
And then you can style each Column with Container with BoxDecoration.
Wrap Text widgets with Padding or place SizedBox between them with height of your choice.
Login or Signup to reply.

Try this. This might be the best way to achieve the layout like what you want.

Container(
                      decoration: BoxDecoration(
                          border: Border.all(
                            width: 0.9,
                            color: Color(0xff908f8f),
                          ),
                          borderRadius:
                              BorderRadius.all(Radius.circular(5))),
                      child: SizedBox(
                        width: 295.0,
                        height: 50.0,
                        child: Row(
                          children: [
                            Padding(
                              padding:
                                  const EdgeInsets.only(top: 10, left: 10),
                              child: Row(
                                children: [
                                  Column(
                                    children: [
                                      Text('title'),
                                      Text('sub-title'),
                                    ],
                                  ),
                                  Column(
                                    children: [
                                      Text('title'),
                                      Text('sub-title'),
                                    ],
                                  ),
                                  Column(
                                    children: [
                                      Text('title'),
                                      Text('sub-title'),
                                    ],
                                  ),
                                  Column(
                                    children: [
                                      Text('title'),
                                      Text('sub-title'),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),```

And you can style each column inside container with BoxDecoration.

Try below code I have try it Two ways use your choice

Using Widgets:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(
      child: ListTile(
        title: Text(
          'Total',
          textAlign: TextAlign.center,
        ),
        subtitle: Text(
          'BHD19.900',
          textAlign: TextAlign.center,
        ),
      ),
    ),
    Expanded(
      child: ListTile(
        title: Text(
          'Tax',
          textAlign: TextAlign.center,
        ),
        subtitle: Text(
          'BHD1.990',
          textAlign: TextAlign.center,
        ),
      ),
    ),
    Expanded(
      child: ListTile(
        title: Text(
          'Quantity',
          textAlign: TextAlign.center,
        ),
        subtitle: Text(
          '1',
          textAlign: TextAlign.center,
        ),
      ),
    ),
    Expanded(
      child: ListTile(
        title: Text(
          'Status',
          textAlign: TextAlign.center,
        ),
        subtitle: Text(
          'Paid',
          textAlign: TextAlign.center,
        ),
      ),
    ),
  ],
),

Create widgets/function and Call

 Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    myWidget('Total', 'BHD19.900'),
    myWidget('Tax', 'BHD1.990'),
    myWidget('Quantity', '1'),
    myWidget('Status', 'Paid'),
  ],
),

Your Widget:

myWidget(String title, String subTitle) {
    return Expanded(
      child: ListTile(
        title: Text(
          title,
          textAlign: TextAlign.center,
        ),
        subtitle: Text(
          subTitle,
          textAlign: TextAlign.center,
        ),
      ),
    );
  }

Result Screen->

Please signup or login to give your own answer.

Click here to cancel reply.