26

How to make a button Fixed "Sticky" in bottom of CustomScrollView

How to achieve like the screenshot https://i.stack.imgur.com/RDCn9.png

3

4 Answers 4

64

One Way of Doing it - using - BottomNavigationBar

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>\[
          SliverAppBar(
            title: Text('Sliver App Bar'),
            expandedHeight: 125.0,
          ),
          SliverList(
              delegate: SliverChildBuilderDelegate((context, int) {
            return Text('Boo');
          }, childCount: 65)),
          SliverFillRemaining(
            child: Text('Foo Text'),
          ),
        \],
      ),
      bottomNavigationBar: Padding(
        padding: EdgeInsets.all(8.0),
        child: RaisedButton(
          onPressed: () {},
          color: Colors.blue,
          textColor: Colors.white,
          child: Text('Fixed Button'),
        ),
      ),
    );
  }][1]][1]

OutPut:

enter image description here

3
  • 1
    How can I push the fixed button up if keyboard shows?
    – Emre Akcan
    Apr 12, 2021 at 21:46
  • Even though this is a pure "hack", it works perfectly with CustomScrollView, it persists when the user scrolls. Sep 18, 2021 at 10:44
  • @WaleedAlrashed I know this is an old answer, but why would this be considered a "hack"? What are the normal use cases of BottomNavigationBar besides buttons for navigation?
    – Igor Lima
    Feb 8, 2022 at 13:47
6

You can use floatingActionButton and floatingActionButtonLocation

exam:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {},
          isExtended: true,
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          icon: Icon(Icons.supervised_user_circle),
          label: Text('Fixed Button'),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        body: CustomScrollView(
          slivers: <Widget>[
            const SliverAppBar(
              pinned: true,
              expandedHeight: 250.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('Demo'),
              ),
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200.0,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.teal[100 * (index % 9)],
                    child: Text('grid item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
            SliverFixedExtentList(
              itemExtent: 50.0,
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 9)],
                    child: Text('list item $index'),
                  );
                },
              ),
            ),
          ],
        ));
  }
}
0
0
Scaffold(
      body: 
      // list view here
      bottomNavigationBar: GestureDetector(
  child: Container(
    height: 50,
    width: 325,
    child: Center(
      child: Text(
        "title",
      ),
    onTap: (){},
  ),
);

this works for me as a work around

4
  • I am against this work around, there are a lot of alternatives, like a floating button or widget, and here you are using a scaffold attribute that is supposed to serve another purpose.
    – Romeo
    Sep 29, 2020 at 11:05
  • Use the bottomNavigationBar just like a floating action button. And Scaffold is used for every screen
    – Phanindra
    Nov 12, 2020 at 10:47
  • The Scaffold has a floatingActionButton property, if you want to use it as a father widget than that's the way to go api.flutter.dev/flutter/material/Scaffold-class.html
    – Romeo
    Nov 16, 2020 at 9:33
  • 1
    it is better solution than using floatingactionbutton. Jul 8, 2022 at 9:35
-1

You can wrap up your scrollable widget with a Expanded widget. It will take up required space and leave the remaining for your button. Here's how i used to make the button stick both top & bottom.

Column(
            children: [
              //This is button 1
              Padding(
                padding: allPadding,
                child: GestureDetector(
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const myPage(),
                      ),
                    );
                  },
                  child: Container(
                    height: 40,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                        color: Colors.green,
                        borderRadius: BorderRadius.circular(4)),
                    child: const Center(
                      child: Text(
                        "Button Name",
                        style: TextStyle(
                            color: Colors.white, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ),
              ),
              
              //Here's my Scrollable widget
              Expanded(
                child: Center(
                  child: ListView.builder(
                    itemCount: provider.myList.length,
                    itemBuilder: (BuildContext context, index) {
                      return myCard(
                        provider: provider,
                        widgetTextStyle: widgetTextStyle,
                        index: index,
                      );
                    },
                  ),
                ),
              ),


             //this is the same button used as above
              Padding(
                padding: allPadding,
                child: GestureDetector(
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const myPage2(),
                      ),
                    );
                  },
                  child: Container(
                    height: 40,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                        color: Colors.green,
                        borderRadius: BorderRadius.circular(4)),
                    child: const Center(
                      child: Text(
                        "Button 2",
                        style: TextStyle(
                            color: Colors.white, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.