CODEWITHSUNDEEP
flutterdartflutter-layout
Asmoun
Asmoun

Reputation: 1747

how to List View items in two columns instead of one column in Flutter?

my current implementation is retrieving items from database using Future Builder widget and then display it in a list view , what I'm trying to achieve is how I make the display of items in two column instead of one? here is my code that preview items in a vertical single column :

Widget build(BuildContext context) {
    return FutureBuilder<List<Product>>(
      future: fetchProducts(),
      builder: (context, snapshot) {
        if (!snapshot.hasData)
          return Center(child: CircularProgressIndicator());
        else {
          print (snapshot.data.length) ;
          return Container(
            child: Scrollbar(
              isAlwaysShown: true,
              controller: _scroll,
              child: ListView.builder(
                controller: _scroll,
                itemCount: snapshot.data.length,
                itemBuilder: (BuildContext context, int index) {
                  return WidgetProduct(snapshot.data[index]);
                },
              ),
            ),
          );
        }
      },
    );
  }

Upvotes: 1

Views: 5048

Answers (1)

Why_So_Ezz
Why_So_Ezz

Reputation: 158

@pskink is right you can use GridView.builder()

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.separated(
      separatorBuilder: (context, int) {
        return Divider(color: Colors.black,);
      },
     // shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        return GridView.count(
          shrinkWrap: true,
          crossAxisCount: 3,
          childAspectRatio: 2.0,
          children: List.generate(6, (index) {
            return Center(
              child: RaisedButton(
                onPressed: (){},
                color: Colors.greenAccent,
                child: Text(
                  'item no : $index',
                ),
              ),
            );
          }),
        );
      },
      itemCount: 4,
    ));
  }

Upvotes: 2

Related Questions