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

how to expand child of listview so that all child occupy maximum width in flutter

I have a listview to show all available names.. taken text widget inside container..

here i want same width for all name’s container inside listview…

like..if names are only 2 ..these should occupy totalwidth/2 and so on for more names

like if names are 4. ..these should occupy totalwidth/4

Scaffold(
      body: Center(
        child: Container(
          height: 80,
          color: Colors.grey,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
              itemCount: names.length,
              itemBuilder: (context,index){
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: Center(child: Text(names[index])),
              ),
            );

          }),
        ),
      ),
    );

i am getting this one…this not i want
enter image description here

Tags:

2

Answers


  1. 0 
    class MyApp extends StatelessWidget {
  List<String> names = ["first","second","third","fourth"]; //Your names list here
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
      body: Center(
        child: Container(
          height: 80,
          color: Colors.grey,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
              itemCount: names.length,
              itemBuilder: (context,index){
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: MediaQuery.of(context).size.width / names.length, // Ratio of width relative to array of names
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: Center(child: Text(names[index])),
              ),
            );

          }),
        ),
      ),
    ),
    );
  }
}

    As I mentioned in the comment lines, I create an array of names myself. In the Width part, I specified the ratio of the width to the names array to be compatible with each screen using MediaQuery. Enjoy your work.

    Output:

    enter image description here

    Login or Signup to reply.
  2. 0

    You can store the device width in a variable and divide it with the length of names list, and assign it to the parent container of text and it will take all the available space.

    @override
  Widget build(BuildContext context) {
    double deviceWidth = MediaQuery.of(context).size.width; //Total available width of device
    return Scaffold(
      body: Center(
        child: Container(
          height: 80,
          color: Colors.grey,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: names.length,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  width: (deviceWidth / names.length) - 16, // 16 is subtracted to adjust the padding space 
                  decoration: BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Center(child: Text(names[index])),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

    enter image description here

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

Back To Top
Search