otocampos / SuperCustomBars

Library to make powerfull AppBars in Flutter

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

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),
      ), 
    );
  }

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