pandabar 0.1.1

Flutter Android iOS web

A fancy bottom navigation bar for pandas. Pandabar designed for new neumorphic design trend.

Pub

PandaBar #

A fancy bottom navigation bar for pandas. Pandabar designed for new neumorphic design trend.

PreviewPageView
BottomNavBar GifFix Gif

PandaBar #

  • buttonColor - to change button color
  • buttonSelectedColor - to change button selected color
  • backgroundColor - the navigation bar's background color
  • buttonData - navigation items, required more than one item and less than 5
  • fabIcon - the navigation bar's fab button icon
  • fabColors - the navigation bar's fab button gradient colors
  • onFabButtonPressed - required to listen fab button is pressed
  • onChange - required to listen when a item is pressed it provide the selected item's id

PandaBarButtonData #

  • id - the id of this item
  • icon - the icon of this item
  • title - the title of this item

Getting Started #

Add the dependency in pubspec.yaml:

dependencies:
  ...
  pandabar: ^0.1.1

Basic Usage #

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  String page = 'Grey';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      bottomNavigationBar: PandaBar(
        buttonData: [
          PandaBarButtonData(
            id: 'Grey',
            icon: Icons.dashboard,
            title: 'Grey'
          ),
          PandaBarButtonData(
            id: 'Blue',
            icon: Icons.book,
            title: 'Blue'
          ),
          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 'Grey':
              return Container(color: Colors.grey.shade900);
            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();
              
          }

        },
      ),
    );
  }
}
10
likes
90
pub points
66%
popularity

A fancy bottom navigation bar for pandas. Pandabar designed for new neumorphic design trend.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

kmltrk07@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on pandabar