Flutter - Add a button at the end of Grid View

Question

I want to add a button at the end of my GridView. I viewed another similar problem but the code given in the answer does not scroll. Here is the link to that answer.

My design has a similar. Here is a rough sketch.

Also just for clarification, I want the button to appear once the user has scrolled to the end of the grid view.

I am still new to flutter so your help would be much appreciated :)

user_5362583 · Answer

The thing which you need is ScrollController class.

WHY SCROLLCONTROLLER?

It keeps track of what are we doing with scrolling, that is, scrolling, reached bottom, or top

HOW CAN WE USE IT?

You need to use it inside GridView, to get your things up and running

// Simply initialise your controller in your project
ScrollController _controller = new ScrollController();

// add listener to the controller to find out the scrolling event
_controller.addListener((){});

// pass this into your GridView. 
// We we will add it to GridView. ScrollController is for every scrolling widget
// in Flutter
GridView.builder(
   controller: _controller,
)

DISCLAIMER: Please do not look at the UI aspect, since we care about the scrolling event tracking and show/hide our button

I have referred to your given link only for creating the UI => Your Provided Link
Also, I have added scrolling event to identify whether we're scrolling or not, but it is commented
The project currently show the button when we reach the bottom, and hide it when we are the top

CODE

class _MyHomePageState extends State {
  List homeList = [];
  
  //to check whether we have reached bottom
  bool isBottom = false;
  
  ScrollController _controller = new ScrollController();
  
  @override
  void initState() {
    super.initState();
    homeList = List.generate(10, (ind) => 'Item $ind').toList();
    
    // adding controller to check whether the page is 
    // at the bottom
    _controller.addListener((){
        // reached bottom
        if (_controller.offset >= _controller.position.maxScrollExtent &&
          !_controller.position.outOfRange) {
            setState(() => isBottom = true);
        }
      
        // IS SCROLLING
//         if (_controller.offset >= _controller.position.minScrollExtent &&
//             _controller.offset < _controller.position.maxScrollExtent && !_controller.position.outOfRange) {
//           setState(() {
//             isBottom = false;
//           });
//         }
      
        // REACHED TOP
        if (_controller.offset <= _controller.position.minScrollExtent &&
        !_controller.position.outOfRange) {
            setState(() => isBottom = false);
        }
     });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            GridView.builder(
              shrinkWrap: true,
              controller: _controller,
              itemCount: homeList.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, crossAxisSpacing: 20),
              itemBuilder: (ctx, i) {
                return GestureDetector(
                  onTap: () => print(i),
                  child: Container(
                    margin: EdgeInsets.only(bottom: 20.0),
                    decoration: BoxDecoration(
                      color: Colors.indigo[300],
                      borderRadius: BorderRadius.circular(15.0)
                    )
                  )
                );
              }
            ),
            // if we are bottom we show the button
            // else empty container, which is nothing but
            // hiding technique in Flutter
            isBottom ? Positioned(
              bottom: 20,
              left: 18,
              right: 18,
              child: Container(
                alignment: Alignment.center,
                height: 50,
                decoration: BoxDecoration(
                  color: Colors.orangeAccent,
                  borderRadius: BorderRadius.circular(15),
                ),
                child: Text('Your widget at the end')
              )
            ) : Container()
          ]
        )
      )
    );
  }
}

RESULT

Flutter - Add a button at the end of Grid View

1 Answers