fancy_bottom_navigation_image 1.0.1

This plugin is used for bottomNavigationBar for fancy view of Bottom Navigation Bar. Flutter plugin - FancyBottomNavigation With Image

example/lib/main.dart

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

import 'second_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentPage = 0;

  GlobalKey bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Fancy Image Bottom Navigation "),
      ),
      body: Container(
        decoration: BoxDecoration(color: Colors.white),
        child: Center(
          child: _getPage(currentPage),
        ),
      ),
      bottomNavigationBar: FancyBottomNavigationImage(
        circleColor: Color(0xff4268cd),
        activeIconColor: Color(0xfff49b4d),
        textColor: Color(0xff4268cd),
        inactiveIconColor: Colors.grey,
        tabs: [
          TabData(
            imageData: "sydney-opera-house.png",
            title: "Home",
          ),
          TabData(
            imageData: "search.png",
            title: "Search",
          ),
          TabData(
            imageData: "user.png",
            title: "Profile",
          ),
          TabData(
            imageData: "settings.png",
            title: "Settings",
          ),
        ],
        initialSelection: 1,
        key: bottomNavigationKey,
        onTabChangedListener: (position) {
          setState(() {
            currentPage = position;
          });
        },
      ),
    );
  }

  _getPage(int page) {
    switch (page) {
      case 0:
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("This is the home page"),
          ],
        );
      case 1:
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("This is the search page"),
          ],
        );
      case 2:
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("This is the Profile page"),
          ],
        );
      case 3:
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("This is the Settings page"),
          ],
        );
      default:
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("This is the profile page"),
          ],
        );
    }
  }
}