How to use Wrap on a ListView.builder?

Question

I want the screen to look more like this:

But, right now it looks like this:

I've tried multiple different ways of achieving this while still using a ListView.Builder but, none of them worked. What would be a better way of completing this?

Current Code:

import 'package:flutter/material.dart';
import 'package:stack_notes/models/note_folder.dart';

class NotesScreen extends StatefulWidget {
  final List<NoteFolder> noteFolders;
  final Function onTapCallback;

  NotesScreen({this.noteFolders, this.onTapCallback});

  @override
  _NotesScreenState createState() => _NotesScreenState();
}

class _NotesScreenState extends State<NotesScreen> {
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: ListView.builder(
          itemCount: widget.noteFolders.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: InkWell(
                onTap: widget.onTapCallback,
                child: Container(
                  width: 180.0,
                  padding: EdgeInsets.all(10.0),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.white30),
                  ),
                  child: Row(
                    children: <Widget>[
                      Icon(
                        Icons.folder,
                        color: widget.noteFolders[index].iconColor,
                        size: 20.0,
                      ),
                      SizedBox(width: 10.0),
                      Flexible(
                        child: Text(
                          widget.noteFolders[index].title,
                          style: TextStyle(fontSize: 16.0),
                          overflow: TextOverflow.ellipsis,
                          softWrap: false,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Answer 1

Here is the exact answer with the exact layout.Instead of the listView you need GridView

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {

    /*24 is for notification bar on Android*/

  @override
  Widget build(BuildContext context) {
    return GridView.count(
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this produces 2 rows.
          crossAxisCount: 2,
          childAspectRatio: 5.0 / 1.0,
      mainAxisSpacing: 10.0,
      crossAxisSpacing: 10.0,
          // Generate 100 widgets that display their index in the List.
          children: List.generate(100, (index) {
            return Container(
              padding: EdgeInsets.all(10.0),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.white30),
                  ),
              child:Row(
                children: <Widget>[
                  Icon(Icons.folder,color:Colors.yellow),
                  SizedBox(width:20.0),
                  Text('Folder Name')
                ],
              )
            );
          }));
  }
}

The screen of the layout is here

Answer 2

Use GridView.count and declare childAspectRatio property,

childAspectRatio is The ratio of the cross-axis to the main-axis extent of each child.

GridView.count(
          childAspectRatio: 5.0 / 1.0,
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this produces 2 rows.
          crossAxisCount: 2,
          // Generate 100 widgets that display their index in the List.
          children: List.generate(100, (index) {
            return 
              Container(
                width: double.infinity,
                height:double.infinity,
                 child: Card(
                      child :  Center(child:Text(
                'Item $index',
                style: Theme.of(context).textTheme.headline,
              ))));
          }),
        )

Output: Tested in dartpad

Complete example

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Grid List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: GridView.count(
          childAspectRatio: 5.0 / 1.0,
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this produces 2 rows.
          crossAxisCount: 2,
          // Generate 100 widgets that display their index in the List.
          children: List.generate(100, (index) {
            return 
              Container(
                width: double.infinity,
                height:double.infinity,
                 child: Card(
                      child :  Center(child:Text(
                'Item $index',
                style: Theme.of(context).textTheme.headline,
              ))));
          }),
        ),
      ),
    );
  }
}

Answer 3

Take a try with GridView, it'll be fit with your case:

  GridView.builder(
    itemCount: 100,
    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      childAspectRatio: 1,
    ),
    itemBuilder: (BuildContext context, int index) {
      return Center(child: Text("Item $index"));
    },
  )