Not able to get the Sliver Effect in my Flutter application

Issue

I am implementing below code but the sliver effect is not working at all. What wrong I am doing in the below code?

I have referred this example link, in SliverFillRemaining I just replaced the Column() with StreamBuilder(), what else should I add or remove to have the sliver effect?

return Scaffold(
     body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(expandedHeight: 100,
        pinned: false,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('FilledStacks'),
          background: Image.asset(
            'assets/user.png', // <===   Add your own image to assets or use a .network image instead.
            fit: BoxFit.cover,
          ),
        ),
          ),

          SliverFillRemaining(
            child: StreamBuilder<QuerySnapshot>(
              stream: query.snapshots(),
              builder: (context,snapshot){
                //String itemTitle = snapshot.data.documents[index]['postContent'];

                if (!snapshot.hasData){
                  return Text("Loading");
                }

                return ListView.builder(

                    itemCount: snapshot.data.documents.length,
                    itemBuilder: (context, index){
                      String itemTitle = snapshot.data.documents[index]['itemTitle'];

                      return CardItem(itemTitle:itemTitle,);

                    });
              },
            ),
          )
        ],
      ),
    );

Solution

Try the following:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

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

class SilverAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              leading: IconButton(
                  icon: Icon(Icons.filter_1),
                  onPressed: () {
                    // Do something
                  }),
              expandedHeight: 220.0,
              floating: true,
              pinned: true,
              snap: true,
              elevation: 50,
              backgroundColor: Colors.pink,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text('Title',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      )),
                  background: Image.network(
                    'https://images.pexels.com/photos/443356/pexels-photo-443356.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
                    fit: BoxFit.cover,
                  )),
            ),
            StreamBuilder<QuerySnapshot>(
              stream: Firestore.instance.collection("countries").snapshots(),
              builder: (context, snapshot) {
                return SliverList(
                    delegate: new SliverChildBuilderDelegate(
                  (context, index) {
                    return ListTile(
                      contentPadding: EdgeInsets.all(100.0),
                      title: Text(
                          snapshot.data.documents[index].data["countryName"]),
                    );
                  },
                  childCount:
                      snapshot.hasData ? snapshot.data.documents.length : 0,
                ));
              },
            ),
          ],
        ),
      ),
    );
  }
}

You need to use SliverList and inside of it you return a list of the data that you have, then the scroll will work.

Answered By – Peter Haddad

Answer Checked By – David Goodson (FlutterFixes Volunteer)