Home > Enterprise >  How To make Responsive Containers with the same sized in flutter
How To make Responsive Containers with the same sized in flutter

Time:02-02

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(),),
      ),
    ),
    );
  }
}

CodePudding user response:

You can use a Output

  • Related