curved_bottom_navigation's Introduction

Curved Bottom Navigation.

This is implementation of an artwork in Uplabs

Let's get started

1 - Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  curved_bottom_navigation: ^1.0.0

2 - Install it

install packages from the command line:

flutter packages get

3 - Import it

Now in your Dart code, you can use:

import 'package:curved_bottom_navigation/curved_bottom_navigation.dart';

5 - Use it like a charm

Make your TabItems

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          IndexedStack(
            index: navPos,
            children: [
              Page1(),
              Page2(),
              Page3(),
              Page4(),
              Page5(),
            ],
          )
          Align(
            alignment: Alignment.bottomCenter,
            child: CurvedBottomNavigation(
              selected: navPos,
              onItemClick: (i) {
                setState(() {
                  navPos = i;
                });
              },
              items: [
                Icon(Icons.search, color: Colors.white),
                Icon(Icons.star, color: Colors.white),
                Icon(Icons.home, color: Colors.white),
                Icon(Icons.notifications, color: Colors.white),
                Icon(Icons.settings, color: Colors.white),
              ],
            ),
          ),
        ],
      ),
    );
  }