Composant de barre d’onglets pour Flutter

Un package Flutter pour animer la position de l’élément sélectionné dans bottomNavigationBar avec une conception en forme d’encoche. Inspiré par réagir-native-tabbar-interaction brancher.

Traits :

• Prend en charge n’importe quel widget en tant qu’enfant de la barre inférieure.
• Anime l’encoche vers l’élément sélectionné.
• Créez une barre de navigation inférieure optimisée avec une belle animation.
• Prend en charge l’effet de flou comme iOS Tab View.

Commencer

Ajoutez la dépendance dans pubspec.yaml:

dependencies:
  ...
  animated_notch_bottom_bar: ^0.0.1

Utilisation de base

Place AnimatedNotchBottomBar dans le paramètre bottomNavigationBar d’un Scaffold widget et fournir PageController à AnimatedNotchBottomBar.

bottomNavigationBar:  AnimatedNotchBottomBar(
 pageController: _pageController,
  ...
)

Utilisez n’importe quel Widget comme élément de la barre inférieure

Vous pouvez également définir n’importe quel widget animé.

bottomNavigationBar:  AnimatedNotchBottomBar(
  pageController: _pageController,
  bottomBarItems: [
    const BottomBarItems(
        inActiveItem: Icon(
           Icons.home_filled,
            color: Colors.blueGrey,
        ),
        activeItem: Icon(
          Icons.home_filled,
          color: Colors.blueAccent,
        ),
        itemLabel: 'Page 1',
  ),
    const BottomBarItems(
        inActiveItem: Icon(
            Icons.star,
            color: Colors.blueGrey,
          ),
        activeItem: Icon(
            Icons.star,
            color: Colors.blueAccent,
        ),
        itemLabel: 'Page 2',
  ),

     ///svg item
    BottomBarItems(
        inActiveItem: SvgPicture.asset(
          'assets/search_icon.svg',
           color: Colors.blueGrey,
       ),
       activeItem: SvgPicture.asset(
          'assets/search_icon.svg',
           color: Colors.black,
       ),
       itemLabel: 'Page 3',
    ),
     ...
)

Customized Blur Effect (iOS Tab View)

bottomNavigationBar:  AnimatedNotchBottomBar(
    ...
    showBlurBottomBar: true,
    blurOpacity: 0.2,
    blurFilterX: 5.0,
    blurFilterY: 10.0,
    ...
)

Show/hide item label and style

bottomNavigationBar:  AnimatedNotchBottomBar(
     ...
     showLabel: true,
     itemLabelStyle: TextStyle(
                      color: Colors.black,
                      fontSize: 16.0
                    ),
     ...
)

AnimatedNotchBottomBar

• pageController – the page controller.
• bottomBarItems – navigation items, required more than one item and less than six.
• onTap – required to listen when an item is tapped it provides the selected item’s index.
• color – the bottom bar’s background color.
• showLabel: To show or hide the label under bottom bar item.
• itemLabelStyle – the bottom bar’s item text style.
• showShadow – if false the bottom bar’s elevation will be removed.
• showBlurBottomBar – if true the bottom bar will look blur.
• blurOpacity – to set opacity of blur effect.
• blurFilterX – Creates an image filter that applies a Gaussian blur at x axis.
• blurFilterY – Creates an image filter that applies a Gaussian blur at y axis.

BottomBarItems

• title – the bottom bar item label
• activeItem – the selected item.
• inActiveItem – the inactive item.

Guideline for contributors

Contribution towards our repository is always welcome, we request contributors to create a pull request to the develop branch only.

Animated Segment is MIT-licensed.

We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] et faites-nous savoir si vous avez des questions ou des suggestions concernant notre travail.

GitHub

Voir Github