Enable button in flutter when scrollbar is at the bottom of the list

Question

Can anyone post a sample flutter code to enable a button when the scrollbar is at the bottom of the list?

I used NotificationListener and NotificationListener but event is not firing when scrollbar is at the bottom of the list.

I want to enable the button only when the scrollbar is at the bottom of the list else it should be disabled.

Below is the code that I am using.

class _TermsAndCondnsPage extends State<TermsAndCondnsPage> {
bool _isButtonEnabled = false;

bool _scrollingStarted() {
setState(() => _isButtonEnabled = false);
return false;
}

bool _scrollingEnded() {
setState(() => _isButtonEnabled = true);
return true;
}

ScrollController scrollcontroller;
@override
Widget build(BuildContext context) {
var acceptAndContinueButtonPressed;
if (_isButtonEnabled) {
  acceptAndContinueButtonPressed = () {};
} else {
  acceptAndContinueButtonPressed == null;
}
return new Scaffold(
  appBar: new AppBar(
    automaticallyImplyLeading: false,
    title: new Text('Terms And Conditions', textAlign: TextAlign.center),
  ),
  body:
      NotificationListener<ScrollStartNotification>(
          onNotification: (_) => _scrollingStarted(),
          child: NotificationListener<ScrollEndNotification>(
            onNotification: (_) => _scrollingEnded(),
            child: new MaterialApp(
              home: new Scaffold(
                body: new SingleChildScrollView(
                  controller: scrollcontroller,
                  child: new Column(
                    children: <Widget>[
                      new Center(
                        child: new HtmlView(
                          data: html,
                        ),
                      ),
                    ],
                  ),
                ),
                persistentFooterButtons: <Widget>[
                  new RaisedButton(
                      color: Colors.blue,
                      onPressed: _isButtonEnabled ? () {} : null,
                      child: new Text(
                        'Accept and Continue',
                        style: new TextStyle(
                          color: Colors.white,
                        ),
                      )),
                ],
              ),
            ),
          )),
);
}

String html = '''
<p>Sample HTML</p>
''';
}

Solution

Here you have a basic example, enable the button when reach the bottom, and disable when reach the top.

        class ExampleState extends State<Example> {
          final list = List.generate((40), (val) => "val $val");
          final ScrollController _controller = new ScrollController();
          var reachEnd = false;

          _listener() {
            final maxScroll = _controller.position.maxScrollExtent;
            final minScroll = _controller.position.minScrollExtent;
            if (_controller.offset >= maxScroll) {
              setState(() {
                reachEnd = true;
              });
            }

            if (_controller.offset <= minScroll) {
              setState(() {
                reachEnd = false;
              });
            }
          }

          @override
          void initState() {
            _controller.addListener(_listener);
            super.initState();
          }

          @override
          void dispose() {
            _controller.removeListener(_listener);
            _controller.dispose();
            super.dispose();
          }

          @override
          Widget build(BuildContext context) {
            return Stack(children: [
              Positioned(
                top: 0.0,
                bottom: 50.0,
                width: MediaQuery.of(context).size.width,
                child: ListView.builder(
                  controller: _controller,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(list[index]),
                    );
                  },
                  itemCount: list.length,
                ),
              ),
              Align(
                  alignment: Alignment.bottomCenter,
                  child: RaisedButton(
                    child: Text("button"),
                    color: Colors.blue,
                    onPressed: reachEnd ? () => null : null,
                  ))
            ]);
          }
        }

Comments

[diegoveloper]

Could you put your code in the question ?