{"id":19825,"date":"2022-05-27T05:51:48","date_gmt":"2022-05-27T05:51:48","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=3887"},"modified":"2022-05-27T05:51:48","modified_gmt":"2022-05-27T05:51:48","slug":"tabbar-step-6","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/05\/27\/tabbar-step-6\/","title":{"rendered":"Tabbar Step 6:"},"content":{"rendered":"\n<p><strong>Step 6:<\/strong>&nbsp;Finally, open the main.dart file and insert the following code<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-tabbar#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-tabbar#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-tabbar#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \nimport '.\/FirstScreen.dart';  \nimport '.\/SecondScreen.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: DefaultTabController(  \n        length: 2,  \n        child: Scaffold(  \n          appBar: AppBar(  \n            title: Text('Flutter Tabs Demo'),  \n            bottom: TabBar(  \n              tabs: &#91;  \n                Tab(icon: Icon(Icons.contacts), text: \"Tab 1\"),  \n                Tab(icon: Icon(Icons.camera_alt), text: \"Tab 2\")  \n              ],  \n            ),  \n          ),  \n          body: TabBarView(  \n            children: &#91;  \n              FirstScreen(),  \n              SecondScreen(),  \n            ],  \n          ),  \n        ),  \n      ),  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output<\/strong><\/p>\n\n\n\n<p>Now, run the app in your Android Studio. It will give the following screen where you can see two tab icons. So when you click any of the tab icons, it will display the associated screen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-tabbar.png\" alt=\"Flutter Tabbar\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-tabbar2.png\" alt=\"Flutter Tabbar\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Step 6:&nbsp;Finally, open the main.dart file and insert the following code Output Now, run the app in your Android Studio. It will give the following screen where you can see two tab icons. So when you click any of the tab icons, it will display the associated screen.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[575],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/19825"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=19825"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/19825\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=19825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=19825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=19825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}