Die Anleitung zu Flutter FancyBottomNavigation

View more Tutorials:

1- Flutter FancyBottomNavigation

Die Gemeinschaft  Flutter stellt die zahlreichen Bibliotheken zur Verfügung, mit denen Sie eine Navigationsbar erstellen können, die der  BottomNavigationBar ähnelt. Eine davon ist   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}
)
Mit  FacyBottomNavigation kann nur die Anzahl der  Tab größer als 1 und kleiner als 5 sein. Wenn Sie eine Anwendungsleiste mit 5 oder mehr als 5  Tab möchten, sollten Sie eine andere Bibliothek suchen.
Um die  FacyBottomNavigation verwenden zu können, müssen Sie diese Bibliothek mit dem Projekt deklarieren. Öffnen Sie insbesondere die Datei  pubspect.yaml und fügen Sie den folgenden Inhalt hinzu:
pubspect.yaml
dependencies:
  ...
  fancy_bottom_navigation: ^0.3.2
Sie können die Hauptseite dieser Bibliothek auf  GitHub besuchen, um die Information der neuesten Version zu erhalten:

2- FancyBottomNavigation Example

Unten ist das ein einfaches Beispiel von  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"));
  }
}

View more Tutorials: