Flutter Is it possible to set fixed menu item in column and row

Question

I am working on flutter app. In this app I have 50+ menu items (see image below). I want to set each menu item in a definable column and row. Currently I cannot say that I want 2 menu items in first column and 3 menu items in second column. But, I want be able to do that. Is it possible? Please help if yes.

Answer 1

I don't understand your question very well, I will understand that you want to determine the number of items per row/column, the code below will allow you to define how many item render in a row(default is 5).

Update: using Map to define easyer, (0:2 mean col 0 have 2 item)

I have a example:

void main() async {
  var list = List.generate(50, (i) => "${i + 1}");
  
  var colsCount = 5; // default number of item per row
  var rows = {0: 2, 1: 3, 2: 1, 4: 1}; // your custom number of item per row
  
  var listCopy = [...list];
  var rowIndex = 0;
  var data = [];
  while(listCopy.isNotEmpty){
    int takeCount = rows[rowIndex] ?? colsCount;
    if(listCopy.length > takeCount){
      data.add(listCopy.sublist(0, takeCount));
      listCopy = listCopy.sublist(takeCount);
    }else{
      data.add(listCopy);
      listCopy = [];
    }
    rowIndex++; // next row
  }
  
  data.forEach((row) => print('$row'));
}

With ui

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) => const MaterialApp(home: Home());
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);
  @override
  HomeState createState() => HomeState();
}

class HomeState extends State<Home> {
  final list = List.generate(50, (i) => "${i + 1}");
  final colsCount = 5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Example')),
      body: renderList(list, rows: {0: 2, 1: 3, 2: 1, 4: 1}),
    );
  }

  Widget renderList(List<String> list, {Map<int, int> rows = const {}}) {
    var data = [];
    var listCopy = [...list];
    var rowIndex = 0;
    while (listCopy.isNotEmpty) {
      int takeCount = rows[rowIndex] ?? colsCount;
      if(listCopy.length > takeCount){
        data.add(listCopy.sublist(0, takeCount));
        listCopy = listCopy.sublist(takeCount);
      }else{
        data.add(listCopy);
        listCopy = [];
      }
      rowIndex++; // next row
    }
    return Row(
      children: data.map(
        (row) {
          return Column(
            children: row.map<Widget>(renderItem).toList(),
          );
        },
      ).toList(),
    );
  }

  Widget renderItem(String item) {
    return Container(
      margin: const EdgeInsets.all(5),
      padding: const EdgeInsets.all(10),
      child: Center(child: Text(item)),
    );
  }
}

Answer 2

try Wrap:

 Wrap(
   spacing: 8.0,
   runSpacing: 4.0,
   alignment: WrapAlignment.center,
   children: <Widget>[
     Chip(
       avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('A')),
       label: Text('Hamilton'),
     ),
     Chip(
       avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('M')),
       label: Text('Lafayette'),
     ),
     Chip(
       avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
       label: Text('Mulligan'),
     ),
     Chip(
       avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
       label: Text('Laurens'),
     ),
   ],
)