30

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

How to achieve like the screenshot https://i.sstatic.net/RDCn9.png

3

5 Answers 5

69

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
    Commented Apr 12, 2021 at 21:46
  • Even though this is a pure "hack", it works perfectly with CustomScrollView, it persists when the user scrolls. Commented 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
    Commented 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
    Commented Sep 29, 2020 at 11:05
  • Use the bottomNavigationBar just like a floating action button. And Scaffold is used for every screen
    – Phanindra
    Commented 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
    Commented Nov 16, 2020 at 9:33
  • 1
    it is better solution than using floatingactionbutton. Commented Jul 8, 2022 at 9:35
0

Everything is quite simple. Use a column inside of which there will be an Expanded widget, inside of which there will be your scrollable main area

enter image description here

enter image description here

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: BottomFixedButtonExample(),
    );
  }
}

class BottomFixedButtonExample extends StatelessWidget {
  const BottomFixedButtonExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App Bar'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              decoration: BoxDecoration(border: Border.all(color: Colors.red, width: 10)),
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    const Padding(
                      padding: EdgeInsets.all(10),
                      child: Text(
                        'The key thing is to wrap all your scrollable content in an Expanded widget.\n\n'
                        'As scrollable content you can use any scrolling widget such as ListView, SingleChildScrollView, CustomScrollView, ...',
                        style: TextStyle(fontSize: 16),
                      ),
                    ),
                    for (int i = 0; i < 20; i++)
                      Padding(
                        padding: const EdgeInsets.all(10),
                        child: TextFormField(
                          decoration: InputDecoration(
                            filled: true,
                            fillColor: Colors.white,
                            hintText: 'Input ${i + 1} - Try focus here',
                            border: const OutlineInputBorder(borderSide: BorderSide(width: 1)),
                          ),
                        ),
                      ),
                  ],
                ),
              ),
            ),
          ),
          SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: SizedBox(
                width: double.infinity,
                height: 44,
                child: ElevatedButton(
                  style: const ButtonStyle(
                    backgroundColor: MaterialStatePropertyAll(Colors.blue),
                    foregroundColor: MaterialStatePropertyAll(Colors.white),
                  ),
                  onPressed: () {
                    //
                  },
                  child: const Text('Save', style: TextStyle(fontSize: 16)),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

-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 and acknowledge you have read our privacy policy.

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