showModalBottomSheet with SingleChildScrollView. how to recognize when reaches end of the scroll in Flutter?

Viewed 1410

I have to display a bottomModelSheet. This bottomModelSheet contains Terms and conditions details and the Accept Terms and Conditions button(By default disabled) at the bottom.

When the user reaches the end of the scroll then I need to enable this Accept Terms and Conditions

So to achieve the above scenario I have used bottomModelSheet with SingleChildScrollView.

My bottomModelSheet code is below:

  mFormBottomSheet(BuildContext aContext) {
print(reachEnd);
showModalBottomSheet(
  backgroundColor: Colors.transparent,
  context: aContext,
  isScrollControlled: true,
  builder: (BuildContext context) {
    return DraggableScrollableSheet(
          initialChildSize: 0.90, //set this as you want
          maxChildSize: 0.90, //set this as you want
          minChildSize: 0.90, //set this as you want
          expand: true,
          builder: (context, scrollController) {
            return new Scaffold(
              body: new SingleChildScrollView(
                      controller: _controller,
                      child: new Column(
                        children: <Widget>[
                          new Center(
                            child: new Html(
                              data: html,
                            ),
                          ),
                        ],
                      ),
                    ),
                  bottomNavigationBar: Container(
                    margin: EdgeInsets.only(left:16.0, right: 16.0, top: 24.0, bottom: 24.0),
                    child: ButtonTheme(
                        height: 45.0,
                        child: RaisedButton(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          side: BorderSide(color: blue20Color)),
                        onPressed: reachEnd
                            ? () {   
                                  finish(context);
                                  setState(() {
                                    isItButtonClick = true;
                                  });
                              }
                            : null,
                        color: blue20Color,
                        textColor: Colors.white,
                        child: Text("Accept the Terms and Conditions".toUpperCase(),
                          style: TextStyle(fontSize: 14)),
                      ),
                    ),
                  ),  
            );
          }
    );
  },
);
// future.then((void value) => _closeModal(value));

}

I have used ScrollController to find out whether the scroll reaches the end or not?

final ScrollController _controller = new ScrollController();
  @override
  void initState() {
    _controller.addListener(_listener);
    super.initState();
  }

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

  _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;
      });
    }
  }

reachEnd variable becoming true when scroll reaches end however, mFormBottomSheet function is not getting called.

When I hot reload manually mFormBottomSheet function is getting called and "Accept Terms and Conditions" button gets enabled.

So how to invoke the mFormBottomSheet function when the scroll reaches the end.

Please find below image for reference. Onclick of checkbox I have to display modelBottomSheet. So this mFormBottomSheet(context); will not be called whenever the state changes. It happens only when I click on the CheckboxListTile.

enter image description here

                  CheckboxListTile(
                    contentPadding: EdgeInsets.all(0),
                    checkColor: Colors.white,
                    controlAffinity: ListTileControlAffinity.leading,
                    value: isChecked10,
                    onChanged: (checked) {
                      setState(() {
                        if(checked) {
                          mFormBottomSheet(context);
                        } 
                      });
                    },
1 Answers

Calling setState makes your widget rebuild. Do you call mFormBottomSheet() in your build() method?

Related