How can I build 2 lined ListView.builder in Flutter

Question

Can anyone explain me how can I build widget as ListView builder with 2 lines of items. I got an example of this type, you can check out it by the picture below:

Answer 1

This snippet should help you. You can try it at https://dartpad.dev/028daa76945938f0e5c14aea6a8bf84b?null_safety=true

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 500.0,
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: ['English', 'Russian', 'Spanish']
                .map((language) => LanguageButton(
                      language: language,
                    ))
                .toList(),
          ),
          SizedBox(height: 20,),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: ['Some really long language', 'French', 'German']
                .map((language) => LanguageButton(
                      language: language,
                    ))
                .toList(),
          ),
        ],
      ),
    );
  }
}

class LanguageButton extends StatelessWidget {
  final String language;

  const LanguageButton({Key? key, required this.language}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      style: OutlinedButton.styleFrom(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(30),
          ),
        ),
      ),
      onPressed: () {
        // TODO
      },
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 8.0),
        child: Text(language),
      ),
    );
  }
}

I used a Column instead of a ListView.builder. Maybe that's good enough for what you need. The gist is to have each line as a Row and set the mainAxisAlignment to spaceBetween.

Answer 2

An option is to use the Wrap widget with direction set to horizontal.

@override
Widget build(BuildContext context) {
  final lorem = [
    'accusamus',
    'dignissimos',
    'ducimus',
    'blanditiis',
    'praesentium',
    'voluptatum'
  ];

  return Container(
    height: 100,
    width: 250,
    child: Wrap(
      direction: Axis.horizontal,
      children: List.generate(
        lorem.length,
        (index) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(lorem[index]),
        ),
      ),
    ),
  );
}