Hướng dẫn và các ví dụ sử dụng Flutter BottomNavigationBar

BottomNavigationBar

BottomNavigationBar là một thanh điều hướng (Navigation) nằm ở phía cuối của màn hình (Bottom), trong các ứng dụng truyền thống BottomNavigationBar dùng chứa một vài chức năng chính và hoặc chứa những chức năng người dùng thường xuyên sử dụng

BottomNavigationBar thường được đặt trong một Scaffold thông qua thuộc tính (property) AppBar.bottomNavigationBar

BottomNavigationBar có tính năng sử dụng khá giống với BottomAppBar, BottomNavigationBar thường được dùng cho các mục đích đơn giản hơn BottomAppBar như chỉ chứa các Button. Nếu bạn muốn có nhiều dạng Widget hoặc muốn sáng tạo hơn thì nên sử dụng BottomAppBar

BottomNavigationBar Construction

BottomNavigationBar(
    {Key key,
    @required List items,
    ValueChanged onTap,
    int currentIndex: 0,
    double elevation,
    BottomNavigationBarType type,
    Color fixedColor,
    Color backgroundColor,
    double iconSize: 24.0,
    Color selectedItemColor,
    Color unselectedItemColor,
    IconThemeData selectedIconTheme,
    IconThemeData unselectedIconTheme,
    double selectedFontSize: 14.0,
    double unselectedFontSize: 12.0,
    TextStyle selectedLabelStyle,
    TextStyle unselectedLabelStyle,
    bool showSelectedLabels: true,
    bool showUnselectedLabels,
    MouseCursor mouseCursor}
)

Hãy cùng xem hình ảnh mô tả BottomNavigationBar dưới đây

Các sự kiện thuộc tính của BottomNavigationBar

Example

Chúng ta hay cùng xem một ví dụ tương đối hoàn chỉnh để hiểu rõ hơn về BottomNavigationBar sau đây nhé

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 createState() {
    return MyHomePageState();
  }

}

class MyHomePageState extends State {
  int selectedIndex = 0;
  Widget _myContacts = MyContacts();
  Widget _myEmails = MyEmails();
  Widget _myProfile = MyProfile();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("VTSOFT BottomNavigationBar Example"),
      ),
      body:  this.getBody(),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: this.selectedIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.contacts),
            title: Text("Contacts"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text("Emails"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text("Profile"),
          )
        ],
        onTap: (int index) {
          this.onTapHandler(index);
        },
      ),
    );
  }

  Widget getBody( )  {
    if(this.selectedIndex == 0) {
      return this._myContacts;
    } else if(this.selectedIndex==1) {
      return this._myEmails;
    } else {
      return this._myProfile;
    }
  }

  void onTapHandler(int index)  {
    this.setState(() {
      this.selectedIndex = index;
    });
  }
}

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

items

Thuộc tính Items dùng để định nghĩa số các Item có trong BottomNavigationBar, Số Items này phải từ 2 trở lên, nếu bạn khai báo dưới 2 Item thì sẽ gặp thông báo lỗi

@required List items

BottomNavigationBarItem Construction

const BottomNavigationBarItem(
    {@required Widget icon,
    Widget title,
    Widget activeIcon,
    Color backgroundColor}
)

Đoạn mã khai báo Items

items: [
  BottomNavigationBarItem(
    icon: Icon(Icons.contacts),
    title: Text("Contacts"),
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.mail),
    title: Text("Emails"),
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.person),
    title: Text("Profile"),
  )
],

onTap

OnTap là một hàm callback và đượcthực thi khi người dùng chạm (tap) và một item của BottomNavigationBar.

Chúng ta hãy cùng theo dõi ví dụ sau đây, khi chạm vào một Item ứng dụng sẽ đếm số lần chạm (tap) và item và ghi ra index của item đang thực thi

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 createState() {
    return MyHomePageState();
  }

}

class MyHomePageState extends State {
  int tapCount = 0;
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("VTSoft BottomNavigationBar Example"),
      ),
      body: Center(
          child: Text("Tap Count: " + this.tapCount.toString()
              + ", Index: " + this.selectedIndex.toString())
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this.selectedIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.contacts),
            title: Text("Contacts"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text("Emails"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text("Profile"),
          )
        ],
        onTap: (int index) {
          this.onTapHandler(index);
        },
      ),
    );
  }

  void onTapHandler(int index)  {
    this.setState(() {
      this.tapCount++;
      this.selectedIndex = index;
    });
  }
}

currentIndex

Thuộc tính currentIndex dùng để xác định vị trí Item đang được chọn trong BottomNavigationBar, chỉ số currentIndex được bắt đầu từ vị trí 0 tương đương Item đầu tiên trong BottomNavigationBar

int currentIndex: 0

type

Thuộc tính type để cấu hình hiển thị kiểu của BottomNavigationBar

BottomNavigationBarType type

iconSize

Thuộc tính iconSize dùng để xác định kích thước của biểu tượng của tất cả các BottomNavigationBar

double iconSize: 24.0

selectedIconTheme

Thuộc tính selectedIconTheme được sử dụng để thiết lập kích thước (Size), màu xắc (Color) và độ mờ đục (opacity) của biểu được BottomNavigationBar đang được lựa chọn

IconThemeData selectedIconTheme

Cấu trúc lệnh như sau :

const IconThemeData (
    {Color color,
    double opacity,
    double size}
)

Bên cạnh thuộc tính selectedIconTheme thì bạn nên sử dụng thêm thuộc tính unselectedIconTheme để định dạng những biểu tượng không được chọn trong BottomNavigationBar để trả trả lại trạng thái bình thường cho những

Hãy cùng xem ví dụ dưới đây

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 createState() {
    return MyHomePageState();
  }

}

class MyHomePageState extends State {
  int tapCount = 0;
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("VTSoft BottomNavigationBar Example"),
      ),
      body: Center(
          child: Text("Tap Count: " + this.tapCount.toString()
              + ", Index: " + this.selectedIndex.toString())
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this.selectedIndex,
        selectedIconTheme: IconThemeData (
            color: Colors.red,
            opacity: 1.0,
            size: 30
        ),
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.contacts),
            title: Text("Contacts"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text("Emails"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text("Profile"),
          )
        ],
        onTap: (int index) {
          this.onTapHandler(index);
        },
      ),
    );
  }

  void onTapHandler(int index)  {
    this.setState(() {
      this.tapCount++;
      this.selectedIndex = index;
    });
  }
}

unselectedIconTheme

Thuộc tính unselectedIconTheme được sử dụng để thiết lập kích thước (size), mầu sắc (color) và độ mờ đục (opacity) cho biểu tượng của các BottomNavigationBarItem không được chọn

IconThemeData unselectedIconTheme

Sau đây là cấu trúc của unselectedIconTheme

const IconThemeData (
    {Color color,
    double opacity,
    double size}
)

Khi thuộc tính unselectedIconTheme được sử dụng, bạn cũng nên chỉ định giá trị cho property selectedIconTheme, nếu không bạn sẽ không nhìn thấy biểu tượng trên BottomNavigationBarItem đang được chọn.

Ví dụ dưới đây sẽ kết hợp thuộc tính selectedIconTheme và unSelectedIconTheme để hiển thị kích thước, kiểu chữ, và màu sắc khác biệt khi Item được chọn và không được chọn

  selectedIconTheme: IconThemeData (
      color: Colors.red,
      opacity: 1.0,
      size: 45
  ),
  unselectedIconTheme: IconThemeData (
      color: Colors.black45,
      opacity: 0.5,
      size: 25
  ),

selectedLabelStyle, unselectedLabelStyle

thuộc tính selectedLabelStyle và unselectedLabelStyle sử dụng để thiết lập kiểu dáng chữ cho văn bản khi  BottomNavigationBarItem được chon hoặc không được chọn

cùng xem ví dụ sau

selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),

unselectedLabelStyle: TextStyle(fontStyle: FontStyle.italic),

showSelectedLabels showUnselectedLabels

thuộc tính showSelectedLabels và showUnselectedLabels dùng để cho phép hoặc không cho phép hiển thị văn bản khi BottomNavigationBarItem được chọn hoặc không được chọn

bool showSelectedLabels: true
bool showUnselectedLabels : true

Hãy xem ví dụ sau đây :

showSelectedLabels: true,
showUnselectedLabels: false,

selectedFontSize unselectedFontSize

Thuộc tính selectedFontSize, unselectedFontSize dùng để thiết lập kích cỡ font chữ cho văn bản của BottomNavigationBarItem đang được chọn và đang không được chọn

Chúng ta cùng theo dõi ví dụ sau đây :

selectedFontSize: 20,
unselectedFontSize: 15,

backgroundColor

Thuộc tính backgroundColor được sử dụng để chỉ định mầu nền cho BottomNavigationBar.

backgroundColor : Colors.greenAccent,

selectedItemColor, unselectedItemColor

Thuộc tính selectedItemColor dùng để chỉ định văn bản và biểu tượng cho BottomNavigationBarItem được chọn

unselectedItemColor dùng để chỉ định màu văn bản và và biểu tượng cho những bottomNavigationbarItem không được chọn

Chúng ta sử dụng đồng thời 2 sự kiện này để tạo cảm nhận cho người dùng rõ hiệu ứng trên bottomNavigationbarItem

selectedItemColor : Colors.red,
unselectedItemColor: Colors.cyan,

Trên đây là toàn bộ nội dung cho bài viết về Flutter BottomNavigationBar, các bạn quan tâm đến lập trình Flutter hãy tham gia cùng nhóm chúng tôi phát triển những ứng dụng trên Mobile, Thông tin vui lòng liên hệ Mr Dũng 098 333 0380