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

    flutter BottomNavigationBar Sample

    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é

    Flutter BottomNavigationBar Example

    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

    Flutter BottomNavigation onTap

    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

    Flutter BottomNavigationBar IconSize

    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

    Flutter BottomNavigationBar selectedIconTheme

    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 selectedIconThemeunSelectedIconTheme để 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

    Flutter BottomNavigation unSelectedIconTheme

      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 selectedLabelStyleunselectedLabelStyle 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

    BottomNavigationBar selectedLabelStyle

    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 :

    BottomNavigation showSelectedLabels

    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 :

    BottomNavigation selectedFontSize

    selectedFontSize: 20,
    unselectedFontSize: 15,

    backgroundColor

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

    BottomNavigationBar backgroundColor

      

    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

    BottomNavigation selectedItemColor

    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