pandabar 0.0.7 pandabar: ^0.0.7 copied to clipboard
A fancy bottom navigation bar for pandas. Pandabar designed for new neumorphic design trend.
import 'package:flutter/material.dart';
import 'package:pandabar/main.view.dart';
import 'package:pandabar/pandabar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage()
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String page = 'Blue';
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
bottomNavigationBar: PandaBar(
buttonData: [
PandaBarButtonData(
id: 'Blue',
icon: Icons.dashboard,
title: 'Blue'
),
PandaBarButtonData(
id: 'Green',
icon: Icons.book,
title: 'Green'
),
PandaBarButtonData(
id: 'Red',
icon: Icons.account_balance_wallet,
title: 'Red'
),
PandaBarButtonData(
id: 'Yellow',
icon: Icons.notifications,
title: 'Yellow'
),
],
onChange: (id) {
setState(() {
page = id;
});
},
onFabButtonPressed: () {
},
),
body: Builder(
builder: (context) {
switch (page) {
case 'Green':
return Container(color: Colors.green.shade500);
case 'Blue':
return Container(color: Colors.blue.shade900);
case 'Red':
return Container(color: Colors.red.shade900);
case 'Yellow':
return Container(color: Colors.yellow.shade700);
default:
return Container();
}
},
),
);
}
}