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

Xem thêm các chuyên mục:

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

Flutter FancyBottomNavigation
FancyBottomNavigation Example

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

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

Xem thêm các chuyên mục:

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