CODEWITHSUNDEEP
fluttersinglechildscrollview
redboxdev
redboxdev

Reputation: 43

How to scroll withing a widget with a button?

I am building a WebApp in flutter and I have a SingleChildScrollView with some widgets inside. I want the buttons on the appbar to take me to the correspondent widget when I press on the buttons. Is that possible? Here I attach the part of the code.

    Widget build(BuildContext context) {
        return Scaffold(
          extendBodyBehindAppBar: true,
          appBar: CustomAppBar(),
          backgroundColor: Colors.white,
          body: SingleChildScrollView(
            controller: widget.homeController,
            child: Column(
              children: [
                Inicio(),
                Services(),
                QuienesSomos(),
                ContactForm(),
                BottomInfo(),
              ],
            ),
          ),
        );
       }

So I have one button on the appbar per each children in the SingleChildScrollView and I would like that when I press the correspondent button, it scrolls down to the correspondent section on the widget. I tried with Navigator.of().PushNamed but it opens a new screen instead of scrolling down. Any ideas? Thanks in advance!

Upvotes: 2

Views: 2952

Answers (3)

Muhammad Hussain
Muhammad Hussain

Reputation: 1244

Make a scroll controller:

  ScrollController myController = ScrollController();

and attach it to your SingleChildScrollView widget:

  SingleChildScrollView(
     controller: myController,
     child: ...

Now create a GlobalKey:

  final anchor = GlobalKey();

Attach it to any of your widget:

  Container(
    key: anchor,
    child: ...
  ),

That's it, now you can programmatically scroll to this widget using scroll controller:

myController.position.ensureVisible(
   anchor.currentContext.findRenderObject(),
   alignment: 0.5,
   duration: const Duration(seconds: 1),
);

Upvotes: 3

redboxdev
redboxdev

Reputation: 43

I could achieve my goal by using,

                onPressed: () {
                  Scrollable.ensureVisible(servicesKey.currentContext,
                      duration: Duration(seconds: 1),
                      curve: Curves.easeOut);
                },

and by asigning the corresponding key in each widget.

Upvotes: 1

ReyHaynes
ReyHaynes

Reputation: 3102

To control the position, you have to manage the controller of the SingleChildScrollView .

If you want to smoothly go a section, you can attach functionality to control the SingleChildScrollView controller to the button:

widget.homeController.animateTo(
  0.0, // change 0.0 {double offset} to corresponding widget position
  duration: Duration(seconds: 1),
  curve: Curves.easeOut,
);

If you just want to instantly jump to the position:

  widget.homeController.jumpTo(0.0); // change 0.0 {double value} to corresponding widget position

Upvotes: 3

Related Questions