简体   繁体   中英

how to add a fixed to bottom container to a sliver flutter

I have a sliverAppbar and a sliver list that scrolls. I however need a fixed container at the bottom of the screen that does not move regardless of scrolling position or anything else on screen, the equivalent of position fixed in web CSS. I have used a SliverToBoxAdapter with a stack and positioned widget to implement this but it throws an error

    Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            primary: true,
            pinned: true,
            snap: false,
            elevation: 1.0,
            backgroundColor: Colors.blueAccent,
            floating: false,
            expandedHeight: 200.0,
            title: Text(
              "Title",
              style: TextStyle(
                  // color: Colors.grey[900]
                  ),
            ),
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network(
                "https://images.pexels.com/photos/20990/pexels-photo-20990.jpeg?auto=compress&cs=tinysrgh=650&w=940",
                height: double.infinity,
                width: double.infinity,
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
              delegate: SliverChildListDelegate([
            Container(color: Colors.red, height: 150.0),
            Container(color: Colors.purple, height: 150.0),
            Container(color: Colors.green, height: 150.0),
            Container(color: Colors.red, height: 150.0),
            Container(color: Colors.purple, height: 150.0),
            Container(color: Colors.green, height: 150.0),
          ])),
          SliverToBoxAdapter(
              child: Stack(
            children: [
              Positioned(
                bottom: 0,
                child: Container(
                  height: 80.0,
                  color: Colors.yellowAccent,
                ),
              ),
            ],
          )),
        ],
      ),
    );
  }

You could try and add a bottomNavigationBar to the Scaffold

   Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: CustomScrollView(
        slivers: []
      ),
      bottomNavigationBar: Container(),
      
    );
  }
```

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM