Die Anleitung zu Flutter FancyBottomNavigation

Flutter FancyBottomNavigation
FancyBottomNavigation Example

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:

https://github.com/tunitowen/fancy_bottom_navigation

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"));
  }
}

Die Anleitung zu Flutter FancyBottomNavigation

1. Flutter FancyBottomNavigation

2. FancyBottomNavigation Example

Anleitungen Flutter

Anleitungen Flutter

Neueste Artikel