Simple Form Builder

pub package GitHub Stars Platform

A simple, colorful and fluid bottom navigation built with flutter

Maintainer : Tanmoy Karmakar

Specs

This library allows you easily implement bottom navigation with many customizable fields to make it your own

It has been written 100% in Dart. ❤️

Example


Installing

Add the following to your pubspec.yaml file:

dependencies:
  simple_bottom_nav: ^0.0.2

Sample code

import 'package:flutter/material.dart';
import 'package:simple_bottom_nav/simple_bottom_nav.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        body: SimpleBottomNavigator(
          navWidgetList: [
            BottomNavModel(
              title: "Home",
              index: 0,
              activeColor: const Color(0xffFB65B2),
              iconList: [
                "assets/Component 3.png",
                "assets/Home.png",
              ],
              context: context,
            ),
            BottomNavModel(
              title: "Recipe",
              index: 1,
              activeColor: const Color(0xff2EB2FF),
              iconList: [
                "assets/foodtrayFilled.png",
                "assets/foodtray.png",
              ],
              context: context,
            ),
          ],
          pageList: const [
            Scaffold(
              body: Center(
                child: Text("Home"),
              ),
            ),
            Scaffold(
              body: Center(
                child: Text("Recipe"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}


Simple Usage

To integrate the simple bottom navigation bar just implement it with the following code

Custom Usage

There are several options that allow for more control:

PropertiesDescription
navWidgetListThis takes a list of BottomNavModel object and converts them to bottom navigation widget
pageListThis takes in a list of widget preferably Scaffold to show corresponding screens

Libraries

bottom_nav_model
bottom_nav_widget
simple_bottom_nav