การทำ BottomNavigationBar บน Flutter

วันนี้จะมาสอนการทำ BottomNavigationBar บน Flutter กันครับ หรือก็คือการทำปุ่ม Tab ด้านล่างของแอพพลิเคชั่น ซึ่งถ้าเป็น Android Studio เขาจะทำเป็น Fragment กัน ส่วนใน Flutter นั้นเราจะใช้ bottomNavigationBar และใช้ BottomNavigationBarItem เป็นตัวกำหนด List ต่างๆ ของ Tab ซึ่งเอาจริงๆ ผมว่าเขียนง่ายกว่าเยอะเลยนะ

ไฟล์ main.dart

import 'package:flutter/material.dart';
import './screen/launcher.dart';
 
void main() => runApp(MyApp());
 
// ส่วนของ Stateless widget
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
                theme: ThemeData(
                    primaryColor: Colors.pink,
                    accentColor: Colors.purple,
                    textTheme: TextTheme(body1: TextStyle(color: Colors.red)),
                ),
                title: 'First Flutter App',
                initialRoute: '/', // สามารถใช้ home แทนได้
                routes: {
                    Launcher.routeName: (context) => Launcher(),
                },
        );
    }
}

ไฟล์ main.dart จะเป็นหน้าแรกของ Flutter เสมอ ดังนั้นเวลารันโปรแกรมจะออกมาหน้านี้ แล้วถ้าเราต้องการให้ไปยังหน้าไหน ให้เราเขียนโค้ดต่อเข้าไปเอง อย่างโค้ดนี้ก็ให้รันไปที่ method Launcher() ต่อ หรือก็คือไฟล์ launcher.dart นั้นเอง

ถ้าต้องการเปลี่ยนสีแทบด้านบน ให้เปลี่ยนตรง primaryColor แล้วใส่สีได้เลย

ไฟล์ screen/launcher.dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'home.dart';
import 'contact.dart';
import 'profile.dart';
import 'about.dart';
import 'settings.dart';

class Launcher extends StatefulWidget {
    static const routeName = '/';
 
    @override
    State<StatefulWidget> createState() {
        return _LauncherState();
    }
}
 
class _LauncherState extends State<Launcher> {
    int _currentIndex = 0;
    List<Widget> _pageWidget = <Widget>[
        Home(),
        About(),
        Profile(),
        Contact(),
        Settings(),
    ];

  Widget build(BuildContext context) {
    return Scaffold(
      body: _pageWidget.elementAt(_currentIndex),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        backgroundColor: Colors.pink,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white.withOpacity(.6),
        selectedFontSize: 14,
        unselectedFontSize: 14,
        onTap: (value) {
          // Respond to item press.
          setState(() => _currentIndex = value);
        },
        items: [
          BottomNavigationBarItem(
            title: Text('Home'),
            icon: Icon(FontAwesomeIcons.home),
          ),
          BottomNavigationBarItem(
            title: Text('About'),
            icon: Icon(FontAwesomeIcons.infoCircle),
          ),
          BottomNavigationBarItem(
            title: Text('Profile'),
            icon: Icon(FontAwesomeIcons.userAlt),
          ),
          BottomNavigationBarItem(
            title: Text('Contact'),
            icon: Icon(FontAwesomeIcons.addressCard),
          ),
          BottomNavigationBarItem(
            title: Text('Setting'),
            icon: Icon(FontAwesomeIcons.cog),
          ),
        ],
      ),
    );
  }
}

ไฟล์ launcher.dart หน้านี้คือหน้าสำคัญสำหรับตัวอย่างนี้ การทำ BottomNavigationBar จะต้องมีการเขียนโค้ดกำหนดเงื่อนไขต่างๆ

ถ้าต้องการเปลี่ยนสีด้าน BottomNavagation ตรง backgroundColor แล้วใส่สีได้เลย

List<Widget> _pageWidget = <Widget>[
        Home(),
        About(),
        Profile(),
        Contact(),
        Settings(),
    ];

โค้ดนี้คือการกำหนด List เพื่อเก็บค่า Widget อย่างในนี้คือการเก็บ Method home , about , profile , contact , settings เพื่อเตรียมใส่ใน BottomNavigationBarItem

Widget build(BuildContext context) {
    return Scaffold(
      body: _pageWidget.elementAt(_currentIndex),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        backgroundColor: Colors.pink,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white.withOpacity(.6),
        selectedFontSize: 14,
        unselectedFontSize: 14,
        onTap: (value) {
          // Respond to item press.
          setState(() => _currentIndex = value);
        },
        items: [
          BottomNavigationBarItem(
            title: Text('Home'),
            icon: Icon(FontAwesomeIcons.home),
          ),
          BottomNavigationBarItem(
            title: Text('About'),
            icon: Icon(FontAwesomeIcons.infoCircle),
          ),
          BottomNavigationBarItem(
            title: Text('Profile'),
            icon: Icon(FontAwesomeIcons.userAlt),
          ),
          BottomNavigationBarItem(
            title: Text('Contact'),
            icon: Icon(FontAwesomeIcons.addressCard),
          ),
          BottomNavigationBarItem(
            title: Text('Setting'),
            icon: Icon(FontAwesomeIcons.cog),
          ),
        ],
      ),
    );
  }

การกำหนด bottomnavigationbar และตั้งค่าต่างๆ

ไปดูไฟล์ที่เหลือกันเลย

ไฟล์ screen/home.dart

import 'package:flutter/material.dart';

 
class Home extends StatefulWidget {
    static const routeName = '/home';
 
    @override
    State<StatefulWidget> createState() {
        return _HomeState();
    }
}
 
class _HomeState extends State<Home> {
 
    @override
    Widget build(BuildContext context) {
 
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('Home Screen'),
                    ],
                )
            ),
        );
    }
}

ไฟล์ screen/about.dart

import 'package:flutter/material.dart';

 
class About extends StatefulWidget {
    static const routeName = '/about';
 
    @override
    State<StatefulWidget> createState() {
        return _AboutState();
    }
}
 
class _AboutState extends State<About> {
 
    @override
    Widget build(BuildContext context) {
 
        return Scaffold(
            appBar: AppBar(
                title: Text('About'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('Home Screen'),
                    ],
                )
            ),
        );
    }
}

ไฟล์ screen/profile.dart

import 'package:flutter/material.dart';

 
class Profile extends StatefulWidget {
    static const routeName = '/about';
 
    @override
    State<StatefulWidget> createState() {
        return _ProfileState();
    }
}
 
class _ProfileState extends State<Profile> {
 
    @override
    Widget build(BuildContext context) {
 
        return Scaffold(
            appBar: AppBar(
                title: Text('Profile'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('Home Screen'),
                    ],
                )
            ),
        );
    }
}

ไฟล์ screen/contact.dart

import 'package:flutter/material.dart';

 
class Contact extends StatefulWidget {
    static const routeName = '/about';
 
    @override
    State<StatefulWidget> createState() {
        return _ContactState();
    }
}
 
class _ContactState extends State<Contact> {
 
    @override
    Widget build(BuildContext context) {
 
        return Scaffold(
            appBar: AppBar(
                title: Text('Contact'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('Home Screen'),
                    ],
                )
            ),
        );
    }
}

ไฟล์ screen/setting.dart

import 'package:flutter/material.dart';

 
class Settings extends StatefulWidget {
    static const routeName = '/about';
 
    @override
    State<StatefulWidget> createState() {
        return _SettingState();
    }
}
 
class _SettingState extends State<Settings> {
 
    @override
    Widget build(BuildContext context) {
 
        return Scaffold(
            appBar: AppBar(
                title: Text('Setting'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('Home Screen'),
                    ],
                )
            ),
        );
    }
}

Source Code : https://github.com/tanat29/BottomNavagationBar-Flutter

Credit : https://www.ninenik.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99_BottomNavigationBar_%E0%B9%83%E0%B8%99_Flutter_%E0%B9%80%E0%B8%9A%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%95%E0%B9%89%E0%B8%99-961.html

https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html