Giter Club home page Giter Club logo

flutter-ffnavigationbar's Introduction

ff_navigation_bar

A highly configurable navigation bar with emphasis for the selected item.

Add dependency

dependencies:
  ff_navigation_bar: ^0.1.5

Basic use

import 'package:flutter/material.dart';
import 'package:ff_navigation_bar/ff_navigation_bar.dart';
...
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Demonstration',
            ),
          ],
        ),
      ),
      bottomNavigationBar: FFNavigationBar(
        theme: FFNavigationBarTheme(
          barBackgroundColor: Colors.white,
          selectedItemBorderColor: Colors.yellow,
          selectedItemBackgroundColor: Colors.green,
          selectedItemIconColor: Colors.white,
          selectedItemLabelColor: Colors.black,
        ),
        selectedIndex: selectedIndex,
        onSelectTab: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
        items: [
          FFNavigationBarItem(
            iconData: Icons.calendar_today,
            label: 'Schedule',
          ),
          FFNavigationBarItem(
            iconData: Icons.people,
            label: 'Contacts',
          ),
          FFNavigationBarItem(
            iconData: Icons.attach_money,
            label: 'Bills',
          ),
          FFNavigationBarItem(
            iconData: Icons.note,
            label: 'Notes',
          ),
          FFNavigationBarItem(
            iconData: Icons.settings,
            label: 'Settings',
          ),
        ],
      ),
    );

Theme

The navbar has a Theme class which can be used to define the majority of appearance settings for the navbar and its items.

  • barBackgroundColor: The background color for the entire bar (default = white)
  • selectedItemBackgroundColor: The background color for the CircleAvatar widget used to display the selected item's icon (default = blueAccent)
  • selectedItemIconColor: The color for the selected item's icon (default = white)
  • selectedItemLabelColor: The color for the selected item's label (default = black)
  • selectedItemBorderColor: The color for the selected item's border (default = white)
  • unselectedItemBackgroundColor: The background color for unselected items (default = transparent)
  • unselectedItemIconColor: The color for unselected items' icons (default = grey)
  • unselectedItemLabelColor: The color for unselected items' icons (default = grey)
  • selectedItemTextStyle: The text style to use for the selected item's label. The selectedItemLabelColor takes priority over any color attribute of the style (defaults to size = 13.0, weight = Bold)
  • unselectedItemTextStyle: The text style to use for the unselected items' labels (defaults to size = 12.0, weight = Normal)
  • barHeight: The height for the bar (which is automatically included within a SafeArea widget)
  • itemWidth: The width to use for the selected item CircleAvater (default = 48.0)
  • showSelectedItemShadow: Indicates if the drop shadow below the selected item should be displayed (default = true)

FFNavigationBar Attributes

  • selectedIndex: The item number (zero indexed) which should be marked as selected
  • onSelectTab: Callback function to receive tap notifications using the typedef Function(int selectedIndex)
  • items: List of FFNavigationBarItem objects to be displayed as the bar's items
  • theme: A FFNavigationBarTheme theme object

FFNavigationBarItem

  • label: The String to display as the item's label
  • iconData: The IconData to use in the item's Icon
  • animationDuration: A Duration object which can be used to tweak the AnimatedContainer behaviour of the navigation bar item.
  • selectedBackgroundColor: A Color value which can override the theme's selectedItemBackgroundColor value for a specific navigation bar item (used to create different colors for each item)
  • selectedForegroundColor: A Color value which can override the theme's selectedItemIconColor value
  • selectedLabelColor: A Color value which can override the theme's selectedItemLabelColor value

flutter-ffnavigationbar's People

Contributors

crockford55 avatar jaydub55 avatar karbyshevdev avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.