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 :)

Solution

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<MyHomePage> {
  List<String> 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

Comments

[halfer]

(1) Please refrain from adding "hope this helps", "hope it is useful", "happy learning" and other fluff. Technical writing is an expectation here. I generally understand this sort of thing to be little more than vote begging.

[halfer]

(2) Quote blocks are not for general highlighting or break-out boxes. As the name implies, quote blocks are for quotes, i.e. material that is not in your own voice. It is semantically incorrect to use quotes on your own material unless you are quoting a speech or documentation that you said/wrote elsewhere.

[halfer]

(3) We do not have enough good editors on this platform, and in general the good ones we do have care about the quality of material here. They want material to be readable to a wide future audience. If you keep on replicating the same formatting/presentation errors despite their guidance, then you are creating new work for them. Wasting the time of volunteers in this fashion is (obviously) unkind.

[Alok]

Hey, thanks @halfer, for the inputs, and the downvote as well. As I say that Happy Learning, which implies on me as well. So I will take a note on that, and you will get the improvements in my answer as well. It is very difficult to find a mentor, and you indeed has given me some mentorship. Just a question, what should I do, if I want to highlight some aspect, like a statement which is not a quote, but has to be highlighted? I guess bold will not do the job

[Alok]

@halfer I do agree with your point 3. I am wondering how would I achieve this, of highlighting statement, or points in my SO answers?

[Alok]

Thank you @halfer. I have noted your points, just expecting an answer for the question raised by me. Thanks :)

[halfer]

In general, writers tend to overuse highlighting features. They write in all-caps (which looks like shouting) or embolden entire paragraphs (which looks awful). At a stretch, you could use italtics, as it is less disruptive to reading, but I would not use it for more than one sentence. The post above is now fine, and the sections you wanted to highlight are bookended by headings. I think that is readable, and does not need additional formatting.

[Alok]

Thank you @halfer. Appreciate your time and efforts you invested in mentoring me. I will keep these answers in back of my head, to proceed writing the best answers here in SO. :)