Le Tutoriel de Flutter FancyBottomNavigation

Flutter FancyBottomNavigation
FancyBottomNavigation Example

1. Flutter FancyBottomNavigation

Il existe de nombreuses bibliothèques fournies par la communauté Flutter qui permettent de créer une barre de navigation similaire à BottomNavigationBar, et l'une d'elles est FacyBottomNavigation.

FancyBottomNavigation Constructor

FancyBottomNavigation(
    {Key key,
    @required List<TabData> tabs,
    @required Function(int position) onTabChangedListener,
    int initialSelection = 0,
    Color circleColor,
    Color activeIconColor,
    Color inactiveIconColor,
    Color textColor,
    Color barBackgroundColor}
)

FacyBottomNavigation autorise seulement un nombre de Tab(s) supérieur à 1 et inférieur à 5, c'est-à-dire, si vous souhaitez obtenir une barre d'applications avec 5 ou plus de Tab, il faut chercher dans une autre bibliothèque.

Afin d'utiliser FacyBottomNavigation, il faut déclarer cette bibliothèque au projet. Plus précisément, il faut ouvrir le fichier pubspect.yaml et ajouter le contenu ci-dessous:

pubspect.yaml

dependencies:
  ...
  fancy_bottom_navigation: ^0.3.2

Il est possible de visiter la page d'accueil de cette bibliothèque sur GitHub pour obtenir les informations à propos de la version la plus récente:

https://github.com/tunitowen/fancy_bottom_navigation

2. FancyBottomNavigation Example

Ci-dessous un exemple simple sur FancyBottomNavigation:

main.dart (ex1)

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  int currentPage = 0;
  Widget _myContacts = MyContacts();
  Widget _myEmails = MyEmails();
  Widget _myProfile = MyProfile();

  @override
  Widget build(BuildContext context) {
    FancyBottomNavigation a;
    return Scaffold(
        appBar: AppBar(
          title: Text("FancyBottomNavigation Example"),
        ),
        body: Container(
          color: Colors.black12,
          child: getPage(),
          constraints: BoxConstraints.expand(),
        ),
        bottomNavigationBar: FancyBottomNavigation(
          tabs: [
            TabData(iconData: Icons.contacts, title: "Contacts"),
            TabData(iconData: Icons.mail, title: "Emails"),
            TabData(iconData: Icons.person, title: "Profile")
          ],
          onTabChangedListener: (position) {
            setState(() {
              currentPage = position;
            });
          },
        )
    );
  }

  Widget getPage() {
    if(this.currentPage == 0) {
      return this._myContacts;
    } else if(this.currentPage==1) {
      return this._myEmails;
    } else {
      return this._myProfile;
    }
  }
}

class MyContacts extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     return Center(child: Text("Contacts"));
  }
}

class MyEmails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Emails"));
  }
}

class MyProfile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Profile"));
  }
}

Le Tutoriel de Flutter FancyBottomNavigation

1. Flutter FancyBottomNavigation

2. FancyBottomNavigation Example

Tutoriels de programmation Flutter

Tutoriels de programmation Flutter

Articles les plus récents