mirror of
https://github.com/nisrulz/flutter-examples.git
synced 2025-08-06 14:51:08 +08:00
implemented using_bottom_nav_bar example
This commit is contained in:
85
using_bottom_nav_bar/lib/main.dart
Normal file
85
using_bottom_nav_bar/lib/main.dart
Normal file
@ -0,0 +1,85 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import './FirstTab.dart' as first_tab;
|
||||
import './SecondTab.dart' as second_tab;
|
||||
import './ThirdTab.dart' as third_tab;
|
||||
|
||||
void main() {
|
||||
runApp(new MaterialApp(
|
||||
// Title
|
||||
title: "Using Tabs",
|
||||
// Home
|
||||
home: new MyHome()));
|
||||
}
|
||||
|
||||
class MyHome extends StatefulWidget {
|
||||
@override
|
||||
MyHomeState createState() => new MyHomeState();
|
||||
}
|
||||
|
||||
// SingleTickerProviderStateMixin is used for animation
|
||||
class MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {
|
||||
// Create a tab controller
|
||||
TabController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
// Initialize the Tab Controller
|
||||
controller = new TabController(length: 3, vsync: this);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
// Dispose of the Tab Controller
|
||||
controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new Scaffold(
|
||||
// Appbar
|
||||
appBar: new AppBar(
|
||||
// Title
|
||||
title: new Text("Using Bottom Navigation Bar"),
|
||||
// Set the background color of the App Bar
|
||||
backgroundColor: Colors.blue,
|
||||
),
|
||||
// Set the TabBar view as the body of the Scaffold
|
||||
body: new TabBarView(
|
||||
// Add tabs as widgets
|
||||
children: <Widget>[
|
||||
new first_tab.First(),
|
||||
new second_tab.Second(),
|
||||
new third_tab.Third()
|
||||
],
|
||||
// set the controller
|
||||
controller: controller,
|
||||
),
|
||||
// Set the bottom navigation bar
|
||||
bottomNavigationBar: new Material(
|
||||
// set the color of the bottom navigation bar
|
||||
color: Colors.blue,
|
||||
// set the tab bar as the child of bottom navigation bar
|
||||
child: new TabBar(
|
||||
tabs: <Tab>[
|
||||
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,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user