CODEWITHSUNDEEP
flutterflutter-layoutflutter-sliver
JerryLin
JerryLin

Reputation: 129

Flutter:How do I set the SliverAppBar collapsed by default

I'm new guy using the flutter and when I code my app I met a problem that how could I set SliverAppBar collapsed status by default. To solve my confuse, I check the flutter's doc, unfortunately I couldn't find the solution, so I'm here.

Below is my code, if you know how to solve it, help me plz. Thanks guys.

class CollapsingBarLayoutState extends State<CollapsingBarLayout>
    with TickerProviderStateMixin {
  final List<ListItem> listData = [];

  @override
  Widget build(BuildContext context) {
    for (int i = 0; i < 20; i++) {
      listData.add(new ListItem("$i", Icons.cake));
    }
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              pinned: true,
              centerTitle: false,
              snap: true,
              floating: true,
              titleSpacing: 0,
              backgroundColor: Colors.green,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: _buildBriefCalendarChildren(),
                    ),
                  ),
                  background: GridPage(
                    children: _buildCalendarPageChildren(),
                    column: 7,
                    row: 5,
                  )),
            ),
          ];
        },
        body: Center(
          child: new ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              return new ListItemWidget(listData[index]);
            },
            itemCount: listData.length,
          ),
        ),
      ),
    );
  }
}

Upvotes: 8

Views: 3832

Answers (1)

Heisenbug
Heisenbug

Reputation: 970

There is a good plugin https://pub.dev/packages/after_layout I used in a situation like this. Just add a mixin and then the only method you would need to implement would look something like this:

  void afterFirstLayout(BuildContext context) {
    _scrollController //scroll controller of your list view under sliver
        .animateTo((expandedHeight) - collapsedHeight,
        duration: new Duration(milliseconds: 1),//0 dont work as duration
        curve: Curves.linear)
        .then((_) {
      setState(() {
        expandedPercentage = 0; //just my custom tracking of expansion percentage
      });
    });
  }

Edit - better solution: Initialise a new ScrollController(initialScrollOffset: expandedHeight - collapsedHeight); and pass it as a controller to your NestedScrollView.

Upvotes: 9

Related Questions