How to Create TabBar in futter - Default TabBar - Part 1

hey guys welcome to protocol does point okay so in this photo tutorial we're gonna learn how to create a tab bars in flutter so in this tutorial i'm going to create two separate parts so in the first part i am going to create a default tab bar as you can see over here so this is the default tab bar in flutter and in the second part i am going to create a customized tab bar so let me show you so this is the customized tab bar in flutter so let's begin with the tutorial okay so let's go to our android studio and here i have created a new flutter project in my android studio ide called as tab bar flutter and this is the default code given by flutter team that is the counter code so let me remove the code so i will just remove it and create my own stateful widget okay and name it as my home page okay so over here instead of this empty container i will make use of scaffold widget with the app bar and a body tag body property so inside body property i will just add a text widget for now so let me run the app okay so the app is running on my physical device that has been connected through usb as you can see over here we have added a app bar and a body tag uh us a text visit at the center of our body okay so this is the result of it so now let's add a tab bar to this app okay so to add a tab bar to this app so first of all we need to wrap this scaffold widget with a widget called as default tab controller so for that keep the cursor in this scaffold widget and press alt enter alt enter so you will give it will give you an option to wrap the widget so just select this option and replace this widget with default tab controller okay and here you need to pass a property as you can see it is saying required length property so you just need to pass how much tab you want to show in your app so as you saw here we need four tabs so one two three four so the length of the tab is four so you just need to pass the length over here okay so after that we can create the tabs so for that inside this app bar we will just create a tab so for that we will make use of a bar property called as bottom so inside this bottom property of app bar we will make use of tab bar okay widget so here we must define the list of tabs you want to create so in our case we need four tabs so tabs text and here and give a text to this tab so our text is a chat okay so like this we will just create four tabs okay so now here we have created four tabs one is that status calls and settings so these are the four pages when the user press on this tab we will redirect the user to different pages okay so let me make this const okay so now let me hot restart the app and check the ui the difference okay so now you can see we have four tabs been created okay so now when a user press on these tabs we need to change this body property so we must redirect the user to different widgets or pages okay so for that in the body tag we need to change it so for that i will just remove the default code that i have added and here i will just make use of tab bar view okay so in this tab bar view we must add children's property so as we have four tabs we need to pass four pages over here so you can just pass create four pages separate pages like this okay so here i have just created a chat page that is chat dot dot so let's use this in main dot dart page to show over here in the body tag when user select this chat page okay okay i think the app got hot refreshed by mistake so it is showing me a error because i'm not passing anything over here so let's pass the widgets over here so we have created a chat page so let's import it chat dot dot okay and then you can use the page over here so chats like this okay so you can just pass the pages like this or you can just pass any widget over here so for now i will just pass a center widget with a child as text widget so here the second page is the status so let me name it as status page okay and the third and the fourth one is call page and setting page so now if i hot refresh so you can see the chat page got loaded and then these are the widgets that got loaded so you can see this is the default uh tab bar in flutter so that's all for this video tutorial hope you got the concept of how to create a tab bar in flutter so the complete source code is in my website protocodespoint.com so you can just refer it if you have any problem in the video tutorial so following the video tutorial you can just get the source code from here so here i have explained everything step by step to how to use a tab bar and how we can use it so the complete source code is also there you can just copy the code and paste it in main.dart page or from this and your code will work okay so in the second part we are going to create a customized tab bar so this same app i am going to create uh give a customized tab bar so as you as i shown in the beginning of the tutorial so we are going to convert the default app so this is the default app and this is the customized app with a tab bar okay so thanks for watching this first part so hope you got the concept of how to create a tab bar in flutter and please watch the second part that is customized tap bar in flutter so thanks for watching please do subscribe protocol does point thank you

Channel: Proto Coders Point

Views: 3,103

Keywords: flutter, flutter tutorial, android, android tutorial, create tabBar in flutter, defaulttabcontrollder, flutterDefaultTabController, flutter defaulttabcontroller, flutter tabbar, flutter TabBarView, flutter TabView, how to create tabBar in flutter, tabbar, tabBar flutter, tabBar in flutter, TabBarView, TabBarView flutter, flutter widgets, flutter developers

Id: alIsvHqug4Q

Length: 7min 36sec (456 seconds)

Published: Mon Jan 24 2022