Flutter SDK Tutorial - Tab Bar Navigation (App Development)

In this tutorial, I guide you through making a tab bar and handling navigating between pages. This code will run seamlessly on both Android and iOS.

NOTE: I'm using the android simulator, but you can simply open an iPhone simulator to run the same code!

Be sure to ask for help in the comments if you need any help. Suggestions for future Flutter tutorials are also very welcome! :D

Flutter is an SDK owned by Google to create applications for Android and iOS using a single codebase. Flutter uses the Dart programming language (also owned by Google). Flutter was in alpha when I released this video, so things might still change a bit. But the SDK is already mature enough to write some cool apps!

[BramVanbilsen]

If you'd like to skip me making the layout, go to: 06:46
Hope you guys enjoy it!

[eksploratordanych]

Great tutorial!
We can also use the default controller and then the code will be shorter.

import
import './FirstPage.dart' as first;
import './SecondPage.dart' as second;
import './ThirdPage.dart' as third;

void main() => runApp(MyTabs());

class MyTabs extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("Pages"),
backgroundColor: Colors.deepOrange,
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.arrow_forward)),
Tab(icon: Icon(Icons.arrow_downward)),
Tab(icon: Icon(Icons.arrow_back)),
],
),
),
bottomNavigationBar: Material(
color: Colors.deepOrange,
child: TabBar(
tabs: [
Tab(icon: Icon(Icons.arrow_forward)),
Tab(icon: Icon(Icons.arrow_downward)),
Tab(icon: Icon(Icons.arrow_back)),
]
)
),
body: TabBarView(
children: [
first.First(),
second.Second(),
third.Third(),
],
)
),
),
);
}
}

[rogerwprice]

What a SUPER step-by-step series to get started - THANKS!

[grantespo]

Superb tutorial. Still work great in 2020!

[hyperasci]

I am learning Flutter now. When I will learn it completely and start making money. I'll surely contribute some to this channel. I owe you big time!

[JoshStilwell]

Thanks for making this tutorial! Helped me out a ton today :D

[faizanbaber]

i havent reached the part of video yet which i'm actually here for but here's my subscribe already for the way you talk
liking video depends if it works for me or not :v

[huyhoang]

Hi Bram, your flutter tutorials are awesome! By any chance would you make an Airbnb UI clone using flutter? It can be huge for the channel :)

[heavysoccer]

nice video buddy. it is really helpful, fulfilled
my requirements

[ravenflames]

Great tutorials so far, Keep it up! :)

[peekpt]

Thank you! A lot as changed but it's been very helpful

[niklasgrewe]

Thank you for the great tutorial. Do you have an idea, how can i navigate between the pages using the Navigator? For Example... i want to navigate to Tab 3 when i click on an button

[aditya]

would be good if you tell what the various override methods actually do ... like the dispose . Very good intro to Flutter btw

[joaovirgili]

Hey, nice video! Let me ask you something. How can i edit the Tab width? For example, a TabBar with three Tabs, but one smaller than the others like whatsapp does. I've tried and searched but didn't find the answer

[peterroshdy]

I love your way in making the tutorial easy, btw how much RAM do you have on this machine?

[AnshGwash]

Is it possible to maintain the state of what's displayed on each of the tabs?

[vincentguttmann]

You can create stateful and -less widgets much simpler: type stless for a stateless widget, or stful for a stateful widget, and then press tab. Then you enter a name, and this name is written everywhere it should be, at least as long as you don't press esc, and that little red box around the name disappears.

[ebk_]

why can't I add more than 3 tab bars? Do I have to do something other than increase the length value?

[tientcheu]

idea for next tutorial: it would be great if you can do a tutorial on show/hide button depending on whether the user is scrolling up or down.

[folivif]

Hi, Is it possile to disactivate the animation when switching from a tab to another?