Flutter wrapping row elements

user_14171970 0
Viewed 491

I was wondering what the best way is to make the code below make the elements go into a row, and lets say show 3 per row, and then wrap over to a new column. Sort of like flexbox, width 33% and set to wrap. I'm having trouble with this and any help is appreciated!

  Expanded(
    child :
    ListView(
      children: List.keys.map((String key) {
        return new CheckboxListTile(
          title: new Text(key),
          value: List[key],
          activeColor: Colors.deepPurple[400],
          checkColor: Colors.white,
          onChanged: (bool value) {
            setState(() {
              List[key] = value;
            });
          },
        );
      }).toList(),
    ),
  ),]);
flutter-listview flutter-layout dart flutter
1 Answers

What you are looking for is a GridView or a GridView.builder:

GridView.builder(
                 gridDelegate:
                    const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    childAspectRatio: 3 / 2, // width/height ratio
                    mainAxisSpacing: 0,  // between rows
                    crossAxisSpacing: 0, // between columns
                    ),
                 itemBuilder: (BuildContext ctx, index) {
                      return YourWidget();                           
                          },
                 itemCount: yourListOfWidgets.length,
                );

You can learn more about GridView the flutter docs, there is even a video which gives you a great overview about everything you need to know.

user_151172010
Related