diff --git a/using_tabs/lib/main.dart b/using_tabs/lib/main.dart index dbd2e12..cc5958d 100644 --- a/using_tabs/lib/main.dart +++ b/using_tabs/lib/main.dart @@ -1,8 +1,7 @@ import 'package:flutter/material.dart'; - -import './FirstTab.dart' as first_tab; -import './SecondTab.dart' as second_tab; -import './ThirdTab.dart' as third_tab; +import 'package:using_tabs/tabs/first.dart'; +import 'package:using_tabs/tabs/second.dart'; +import 'package:using_tabs/tabs/third.dart'; void main() { runApp(new MaterialApp( @@ -19,6 +18,9 @@ class MyHome extends StatefulWidget { // SingleTickerProviderStateMixin is used for animation class MyHomeState extends State with SingleTickerProviderStateMixin { + /* + *-------------------- Setup Tabs ------------------* + */ // Create a tab controller TabController controller; @@ -27,7 +29,7 @@ class MyHomeState extends State with SingleTickerProviderStateMixin { super.initState(); // Initialize the Tab Controller - controller = new TabController(length: 3, vsync: this); + controller = new TabController(length: 2, vsync: this); } @override @@ -37,43 +39,49 @@ class MyHomeState extends State with SingleTickerProviderStateMixin { super.dispose(); } + TabBar getTabBar() { + return new TabBar( + tabs: [ + new Tab( + // set icon to the tab + icon: new Icon(Icons.favorite), + ), + new Tab( + icon: new Icon(Icons.adb), + ), + new Tab( + icon: new Icon(Icons.airport_shuttle), + ), + ], + // setup the controller + controller: controller, + ); + } + + TabBarView getTabBarView(var tabs) { + return new TabBarView( + // Add tabs as widgets + children: tabs, + // set the controller + controller: controller, + ); + } + + /* + *-------------------- Setup the page by setting up tabs in the body ------------------* + */ @override Widget build(BuildContext context) { return new Scaffold( // Appbar appBar: new AppBar( - // Title - title: new Text("Using Tabs"), - // Set the background color of the App Bar - backgroundColor: Colors.blue, - // Set the bottom property of the Appbar to include a Tab Bar - bottom: new TabBar( - tabs: [ - new Tab( - // set icon to the tab - icon: new Icon(Icons.favorite), - ), - new Tab( - icon: new Icon(Icons.adb), - ), - new Tab( - icon: new Icon(Icons.airport_shuttle), - ), - ], - // setup the controller - controller: controller, - ), - ), + // Title + title: new Text("Using Tabs"), + // Set the background color of the App Bar + backgroundColor: Colors.blue, + // Set the bottom property of the Appbar to include a Tab Bar + bottom: getTabBar()), // Set the TabBar view as the body of the Scaffold - body: new TabBarView( - // Add tabs as widgets - children: [ - new first_tab.First(), - new second_tab.Second(), - new third_tab.Third() - ], - // set the controller - controller: controller, - )); + body: getTabBarView([new First(), new Second(), new Third()])); } } diff --git a/using_tabs/lib/FirstTab.dart b/using_tabs/lib/tabs/first.dart similarity index 100% rename from using_tabs/lib/FirstTab.dart rename to using_tabs/lib/tabs/first.dart diff --git a/using_tabs/lib/SecondTab.dart b/using_tabs/lib/tabs/second.dart similarity index 100% rename from using_tabs/lib/SecondTab.dart rename to using_tabs/lib/tabs/second.dart diff --git a/using_tabs/lib/ThirdTab.dart b/using_tabs/lib/tabs/third.dart similarity index 100% rename from using_tabs/lib/ThirdTab.dart rename to using_tabs/lib/tabs/third.dart