How to make a page in flutter that contain multiple sliverlist and a slivergid?

8,297

For main.dart

import 'package:flutter/material.dart';
import './pages/fetch.dart';

void main() {
  runApp(new MaterialApp(
      home: new fetchPost(),

  ));

}

For the fetch.dart

class fetch extends StatefulWidget{
  fetchPost createState()=> fetchPost();
}

class fetchPost extends State<fetch>{

    //Add your own Json fetch function

       @override
          Widget build(BuildContext context) {
            return CustomScrollView(
                slivers: <Widget>[
                  SliverPadding(
                    padding: EdgeInsets.all(0.0),
                    sliver :SliverList(
                    delegate: SliverChildListDelegate([
                      Column(
                        children: <Widget>[
                          //your widgets
                          firstWidget(),
                          yourNextWidget(),  
                        ],
                      )
                    ]),
                  )
                  )
                ],
            );
          }
    Widget firstWidget(){
        return Column( GridView.builder(
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:2,crossAxisSpacing: 0.0, childAspectRatio: 1/1),
                  itemCount: recent == null ? 0 : list.length,
                  itemBuilder: (BuildContext context, int index, ) {
                  return Column(
                   children: <Widget>[
                      Card(
                        child: Column(
                          children: <Widget>[
                            new Image.network('asset/image']),
                            new ListTile(                         
                                title: new Text(''),
                                    subtitle: Text("",),
                                    onTap: () {Navigator.push(
                                      context, new MaterialPageRoute(
                                      builder: (context) => new nextclass(),
                                      ),
                                    );
                                    },
                                dense: true,
                              ),  
                            ],
                         ),
                       )
                     ],
                   );
                 },shrinkWrap: true,
                physics: ClampingScrollPhysics(),
              ) );
           }


     Widget nextWidget(){
           return Column(
         //your custom widget
          );
        }
    }
Share:
8,297
Sonu Babu
Author by

Sonu Babu

Updated on December 03, 2022

Comments

  • Sonu Babu
    Sonu Babu over 1 year

    "How to create a gridview within a listview by flutter with json API"

    I went through the above link and its good explanation, but when i add one more sliver list with this code and if try to scroll very fast, something happens to slivergrid, only one item will be ther in slivergrid, pls help i am new to flutter.

  • Sonu Babu
    Sonu Babu almost 5 years
    By providing "childAspectRatio: 1/1", the height differs, some devices i am getting overflow by 10pixels etc, is their any way we can provide specific height to grid item
  • Thivanka Sarathchandra
    Thivanka Sarathchandra almost 5 years
  • Sonu Babu
    Sonu Babu almost 5 years
    can you provide an example showing swipetorefresh data from a network call?
  • Sonu Babu
    Sonu Babu almost 5 years
    Need to know Refreshindicator in flutter? how to use it with customscrollview? how to dismiss the indicator?