Not able to get the Sliver Effect in my Flutter application


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,

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

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

                return ListView.builder(

                    itemBuilder: (context, index){
                      String itemTitle =[index]['itemTitle'];

                      return CardItem(itemTitle:itemTitle,);



Try the following:

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

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

class SilverAppBarExample extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
              leading: IconButton(
                  icon: Icon(Icons.filter_1),
                  onPressed: () {
                    // Do something
              expandedHeight: 220.0,
              floating: true,
              pinned: true,
              snap: true,
              elevation: 50,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text('Title',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                    fit: BoxFit.cover,
              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.hasData ? : 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)

Leave a Reply

Your email address will not be published. Required fields are marked *