I would like to create a custom bottom nav bar with a changed floating action button like this:
and when change tab it will be like this with nice and ease animation:
any suggestions how we can built it.
CodePudding user response:
You can use for this design
ff_navigation_bar package here
motion_tab_bar package here
fancy_bottom_navigation here hope its helpful to you.
for more packages for bottom navigation bar go here
CodePudding user response:
You can try with the Convex_bottom_bar
And here all bottom_nav_bar package
import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State createState() => _State();
}
class _State extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: "/",
routes: {
"/": (_) => HelloConvexAppBar(),
"/bar": (BuildContext context) => Container(),
"/custom": (BuildContext context) => Container(),
"/fab": (BuildContext context) => Container(),
},
);
}
}
class HelloConvexAppBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Hello ConvexAppBar')),
body: Center(
child: TextButton(
child: Text('Click to show full example'),
onPressed: () => Navigator.of(context).pushNamed('/bar'),
)),
bottomNavigationBar: ConvexAppBar(
style: TabStyle.react,
items: [
TabItem(icon: Icons.list),
TabItem(icon: Icons.calendar_today),
TabItem(icon: Icons.assessment),
],
initialActiveIndex: 1,
onTap: (int i) => print('click index=$i'),
),
);
}
}