How to implement navigation in a single page web application in flutter?

Question

I am creating a bit complex in terms of UI single page web application in flutter. As a last piece I am struggling with implementing navigation, all examples foundable online are focused on multi-page usecases.

AppBar(
 Row(
   children: [
     Button("Gallery"),
     Button("Faq"),
    Button("Contact"), #after clicking this button
   ]
  ),
),
SingleChildScrollView(
  child: Column( 
    children: [
      GallerySection(...),
      FaqSection(...), 
      ContactSection(...), #scroll to this section/container
    ]
  ),
);

The idea is to implement navigation that after pressing one the appBar buttons user is being scrolled to requested section. I do not care that much for the url formatting it can stay www.flutter-single-page.com/#but having back navigation would be outstanding :-), but optional.

Do you know a way how this can be accomplished?

Answer 1

You could use a scrollController to scroll to a widget with it's ensureVisible method. Then you just assign a key to each section and call ensureVisible for navigation.

Check this answer as an example