Question 77044 in Flutter Question posted in
The official Flutter documentation can be found here.

How To make Responsive Containers with the same sized in flutter

I have a list of strings for tabs, and want to give same width to all tabs instead of based on text length…

Like I have 4 tabs , it should be occupy same width ,
and if text length is bigger than text size should b adjusted..

DONT want to user listview, all tabs should be adjusted according to available width

like width is 300 and tabs are 2, each tab should be in width of 150(including padding etc..)

but I am getting following which I dont want to set widget based on text length

enter image description here,

class HomeScreen extends StatelessWidget {
   HomeScreen({Key? key}) : super(key: key);

  List<String> titles=['All','Income','Expense','Debt','Others','Liabilities'];


  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Container(
        height: 100,
        color: Colors.grey,
        child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: titles.map((e) => Padding(
          padding: const EdgeInsets.symmetric(horizontal: 2.0),
          child: Container(
              padding: EdgeInsets.symmetric(horizontal: 8,vertical: 4),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.white,

              ),
              child: Text(e)),
        )).toList(),),
      ),
    ),
    );
  }
}
Tags:

4

Answers


  1. 0

    You can use a LayoutBuilder.
    This widget allows you to get the parent’s widget width, and according to that you can then use N SizedBox to limit the width of your chips.

    Login or Signup to reply.
  2. 0

    You can achieve this by wrapping each tab in a Container widget with a fixed width and set the mainAxisAlignment property of the parent Row widget to MainAxisAlignment.spaceBetween. This will distribute the tabs evenly across the available width like this.

    Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(
      width: 150.0,
      child: Text("Tab 1"),
    ),
    Container(
      width: 150.0,
      child: Text("Tab 2"),
    ),
    Container(
      width: 150.0,
      child: Text("Tab 3"),
    ),
    Container(
      width: 150.0,
      child: Text("Tab 4"),
    ),
  ],
)

    You can adjust the width property of the Container widgets as per your requirements. If the text is larger than the container width, you can adjust the text size using the style property of the Text widget and set the overflow property of the Container widget to TextOverflow.ellipsis to display an ellipsis (…) when the text overflows the container.

    Login or Signup to reply.
  3. 0

    Wrap each child of Row inside Expanded and Replace Text With AutoSizeText https://pub.dev/packages/auto_size_text

    class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  final List<String> titles = const [
    'All',
    'Income',
    'Expense',
    'Debt',
    'Others',
    'Liabilities'
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          height: 100,
          color: Colors.grey,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: titles
                .map((e) => Expanded(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 2.0),
                        child: Container(
                            height: 24,
                            padding: const EdgeInsets.symmetric(
                                horizontal: 8, vertical: 4),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              color: Colors.white,
                            ),
                            child: AutoSizeText(
                              e,
                              maxLines: 1,
                              textAlign: TextAlign.center,
                            )),
                      ),
                    ))
                .toList(),
          ),
        ),
      ),
    );
  }
}

    Output:
    Output

    Login or Signup to reply.
  4. 0

    Take a look at Boxy, which even has an example of doing what you want to do (make a series of items the width of the largest item).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search