How do you navigate programmatically between tabs like this in Flutter?
Let's figure it out. 🧵
First of all, we need:
- a
TabBarwith three tabs - a
TabControllerto control the selected tab
Then, let's add a TabBarView to contain all the views (pages).
Our custom views have an onNext callback that we can use to change the index of the TabController (and update the page).
This works, but by default we can still navigate through tabs by tapping on them.
If we want to lead the user through the pages in order, this is not ideal:
To address this, we can create a ReadOnlyTabBar that uses IgnorePointer to ignore all interactions with the tabs.
Then we can wrap the TabBar with this new widget:
We should also make sure that we can't switch between tabs with interactive drag gestures.
NeverScrollableScrollPhysics() helps with that:
And that's it! We now have leveraged TabController, TabBar, and TabBarView to create a multi-step user journey.
For bonus points, we can show a dialog and reset the TabController index to 0 when we press OK:
You can find the full source code for this example on DartPad:
https://dartpad.dev/?null_safety=true&id=aabd31bb2b9a4b16d822759fce8b5010
Want more Flutter tips like this? Then follow me: @biz84
Happy coding!
Found this useful? Show some love and share the original tweet 🙏
| Previous | Next |
|---|---|
Responsive Flutter card layout with SizedBox & Center |
AsyncValueWidget: a reusable Flutter widget to work with AsyncValue (using Riverpod) |