How to scroll withing a widget with a button?

Question

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!

This would be possible using a `ScrollController` on your `SingleChildScrollView`. I do not have the answer on hw to do it. But i would recommend researching into using this controller — Floyd Watson, Mar 01 '21 at 02:00

score 3 · Accepted Answer · answered Mar 01 '21 at 02:05

3

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

answered Mar 01 '21 at 02:05

ReyHaynes

2,932
1
15
22

1

Rey, I have a question. What I am trying to achieve is some sort of "landing page" using web flutter. It also has forms and so, so it has some WebApps functions that's why I am using flutter. The thing is, when I change chrome size, let's say it's half the screen, with that method, it scrolls down to different sections of the widget than it should. Is there any way to scroll to a specific widget inside the SingleChildScrollView? Each widget inside would be a webpage section. Thanks! – redboxdev Mar 02 '21 at 14:50
Thank you. I only wanted to add, that 0.0 is the width of moving, so it can be 100, 200 etc. – Шахзод Aug 25 '22 at 17:33

score 2 · Answer 2 · answered Jan 22 '22 at 19:57

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),
);

score 1 · Answer 3 · answered Mar 02 '21 at 20:55

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.

How to scroll withing a widget with a button?

3 Answers3

Linked