Hướng dẫn sử dụng Flutter FancyBottomNavigation
Xem thêm các chuyên mục:
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:
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"));
}
}
