0

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?

Patrick
  • 472
  • 3
  • 16

1 Answers1

2

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

RegularGuy
  • 3,516
  • 1
  • 12
  • 29
  • Thanks man, no idea how I missed it. Since my question is more of a duplicate and does not bring lots of new content over the problem you linked. Would you notify moderator or simply delete it? – Patrick Oct 01 '20 at 09:21
  • 1
    I think it's not a dupicate since it's related to flutter web and web ui navigation patterns. So anyone who searchs for this pattern is more likely to find this question since they might not even know what a scrollController/ScrollView is – RegularGuy Oct 01 '20 at 14:42