Hướng dẫn và ví dụ Flutter FancyBottomNavigation

Flutter FancyBottomNavigation
FancyBottomNavigation Example

1. Flutter FancyBottomNavigation

Có rất nhiều các thư viện được cung cấp bởi cộng đồng Flutter giúp bạn tạo ra một thanh điều hướng tương tự với BottomNavigationBar, một trong số đó là 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 chỉ cho phép số lượng Tab lớn hơn 1 và nhỏ hơn 5, điều đó có nghĩa là nếu bạn muốn có một thanh ứng dụng có nhiều hơn hoặc bằng 5 Tab thì bạn nên tìm một thư viện khác.

Để sử dụng FacyBottomNavigation bạn cần khai báo thư viện này với project. Cụ thể, mở tập tin pubspect.yaml và thêm vào nội dung sau:

pubspect.yaml

dependencies:
  ...
  fancy_bottom_navigation: ^0.3.2

Bạn có thể ghé thăm trang chủ của thư viện này trên GitHub để có được thông tin về phiên bản mới nhất:

https://github.com/tunitowen/fancy_bottom_navigation

2. FancyBottomNavigation Example

Dưới đây là một ví dụ đơn giản về 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"));
  }
}

Hướng dẫn và ví dụ Flutter FancyBottomNavigation

1. Flutter FancyBottomNavigation

2. FancyBottomNavigation Example

Các hướng dẫn lập trình Flutter

Các hướng dẫn lập trình Flutter

Các bài viết mới nhất