circular_bottom_navigation 0.0.5 circular_bottom_navigation: ^0.0.5 copied to clipboard
Circular Bottom Navigation (or maybe a tab bar)
import 'package:circular_bottom_navigation/tab_item.dart';
import 'package:flutter/material.dart';
import 'package:circular_bottom_navigation/circular_bottom_navigation.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int selectedPos = 0;
double bottomNavBarHeight = 60;
List<TabItem> tabItems = List.of([
new TabItem(Icons.home, "Home", Colors.blue),
new TabItem(Icons.search, "Search", Colors.orange),
new TabItem(Icons.layers, "Reports", Colors.red),
new TabItem(Icons.notifications, "Notifications", Colors.cyan),
]);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Padding(child: bodyContainer(), padding: EdgeInsets.only(bottom: bottomNavBarHeight),),
Align(alignment: Alignment.bottomCenter, child: bottomNav())
],
),
);
}
Widget bodyContainer() {
Color selectedColor = tabItems[selectedPos].color;
String slogan;
switch (selectedPos) {
case 0:
slogan = "Familly, Happiness, Food";
break;
case 1:
slogan = "Find, Check, Use";
break;
case 2:
slogan = "Receive, Review, Rip";
break;
case 3:
slogan = "Noise, Panic, Ignore";
break;
}
return Container(
width: double.infinity,
height: double.infinity,
color: selectedColor,
child: Center(
child: Text(
slogan,
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20),
),
),
);
}
Widget bottomNav() {
return CircularBottomNavigation(
tabItems,
selectedCallback: (int selectedPos) {
setState(() {
this.selectedPos = selectedPos;
});
},
);
}
}