Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using StreamBuilder when creating an app with floating appbar

Tags:

flutter

This is the code to build an app with a floating appbar:

 @override
Widget build(BuildContext context) {
return new Scaffold(
  body: new CustomScrollView(slivers: <Widget>[
    new SliverAppBar(
      title: new Text('Sliver App Bar'),
      floating: true,
      snap: true,
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(90.0),
        child: new Text('dddd'),
      ),
    ),
    new SliverList(
        delegate: new SliverChildListDelegate(buildTextViews(50)))
  ]),
);
}

This is the code to build an app (without floating appbar) using a StreamBuilder:

 @override
Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    backgroundColor: Colors.orangeAccent,
    title: new Text('Find Anything'),
    bottom: PreferredSize(
      preferredSize: const Size.fromHeight(48.0),
      child: new Text('dddd'),
    ),
  ),

  body: new StreamBuilder(
      stream: Firestore.instance.collection('posts').snapshots(),
      builder: (context, snapshot) {
        List<TekongoPost> posts = preparePosts(snapshot.data.documents);
        print("************$posts[0]*************");
        if (!snapshot.hasData) return const Text('Loading...');
        return ListView.builder(
          itemCount: posts.length,
          //              padding: const EdgeInsets.only(top: 10.0),
          //              itemExtent: 25.0,
          itemBuilder: (context,index) {
            return getListItem(context,posts[index]);
          },
        );
      }),
);
 }
 }

How do I create an app with a floating appbar using slivers as in the first case above and at the same time use a StreamBuilder as above?

like image 856
Willie Nandi Avatar asked Jul 09 '18 21:07

Willie Nandi


2 Answers

Builders in flutter do nothing. You can very well wrap a SliverList into a StreamBuilder or whatever other builders. It will still work as expected.

So the only thing you need to make sure is that your builder correctly returns a Sliver such as SliverList.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(),
    StreamBuilder<List<String>>(
      stream: myStream,
      builder: (context, snapshot) {
        return SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return ListTile(title: Text(snapshot.data[index]));
            },
            childCount: snapshot.hasData ? snapshot.data.length : 0,
          ),
        );
      },
    )
  ],
),
like image 97
Rémi Rousselet Avatar answered Nov 26 '22 02:11

Rémi Rousselet


I got it to work using a FutureBuilder

 return new Scaffold(
  body: new CustomScrollView(slivers: <Widget>[
    new SliverAppBar(
      title: new Text('Sliver App Bar'),
      floating: true,
      snap: true,
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(90.0),
        child: new Text('dddd'),
      ),
    ),
    FutureBuilder<List<String>>(
      future: getPosts(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
          return SliverList(
            delegate: new SliverChildBuilderDelegate((BuildContext context, int index) {
              return new Text(snapshot.data[index].toString());
            },
            childCount: snapshot.data.length),
          );

        } else {
          return new SliverList(
              delegate: SliverChildListDelegate(buildTextViews(50))
          );
        }
    }
),
  ]),
);
}
like image 44
Willie Nandi Avatar answered Nov 26 '22 01:11

Willie Nandi