Description:

super custom bars

A Flutter Package for help you to customize AppBars or BottomNavigationBar
Features #
Under, you can see the many shape types available in library.
Shapes in AppBar can be used in BottomBar as well and vice-versa.











Getting started #
dependencies:
super_custom_bar: ^1.0.0
copied to clipboard
Usage #
@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),
),
);
}


copied to clipboard
Additional information #
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

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter