A Flutter Package for help you to customize AppBars or BottomNavigationBar
Under, you can see the many shape types available in library. Shapes in AppBar can be used in BottomBar as well and vice-versa.
dependencies:
super_custom_bar: ^1.0.0 @override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
bottomNavigationBar: SuperCustomBar(
flutterAppBar: BottomNavigationBar(
elevation: 0,
backgroundColor: Colors.transparent,
selectedItemColor: Colors.amber[800],
type: BottomNavigationBarType.fixed,
unselectedItemColor: Colors.blue,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.grade),
label: 'Level',
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
label: 'Notification',
),
]),
customPaint: Paint()
..color = Colors.black,
shapeType: SuperCustomBarTypes.shapeTopMultipleFringe,
customHeight: 125,
),
appBar: SuperCustomBar(
customHeight: 75,
customPaint:
Paint()
..shader = ui.Gradient.linear(
Offset(MediaQuery.of(context).size.width / 6,
MediaQuery.of(context).size.height / 8),
Offset(MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height / 55),
[Colors.green, Colors.red]),
shapeType: SuperCustomBarTypes.shapeBottomMultipleFringe,
flutterAppBar: AppBar(
leading: const BackButton(
color: Colors.white, // <-- SEE HERE
),
elevation: 0,
backgroundColor: Colors.transparent,
title: Container(
alignment: Alignment.center, // Center align
child: Text('your title here ',
style: TextStyle(fontSize: 24))),
centerTitle: true,
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
},
),
],
),
),
body: const TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
Temporally in this version, for that library works, is needed to set default appbar with background = TRANSPARENT
and elevation = 0
To contribute access : https://github.com/otocampos/SuperCustomBar