Hướng dẫn chi tiết cách sử dụng AppBar trong Flutter

AppBar là gì?

AppBar hay còn gọi là Thanh công cụ thuộc lớp Scraffold, nó dùng để miêu tả một chức năng hoặc một màn hình nào đó tới người dùng

AppBar được đặt cố định phía trên cùng màn hình (hay trên cùng Scraffold), có chiều cao cố định

AppBar là một lớp chứa bao gồm 5 khu vực leading, title, Tool Bar (actions), flexiableSpace, bottom.

Cấu trúc của AppBar

AppBar( {Key key,
    Widget leading,
    bool automaticallyImplyLeading: true,
    Widget title,
    List actions,
    Widget flexibleSpace,
    PreferredSizeWidget bottom,
    double elevation,
    Color shadowColor,
    ShapeBorder shape,
    Color backgroundColor,
    Brightness brightness,
    IconThemeData iconTheme,
    IconThemeData actionsIconTheme,
    TextTheme textTheme,
    bool primary: true,
    bool centerTitle,
    bool excludeHeaderSemantics: false,
    double titleSpacing: NavigationToolbar.kMiddleSpacing,
    double toolbarOpacity: 1.0,
    double bottomOpacity: 1.0,
    double toolbarHeight
  }
)

Leading và cách sử dụng

Leading là một widget hiển thị ngay phía trước của title và nằm bên trái của màn hình

Kiểu của leading có thể là Icon hoặc IconButton

Ví dụ với kiểu là IconButton

appBar: AppBar(
    title: Text("VTS AppBar Title"),
    leading: IconButton(
        icon: Icon(Icons.notifications_active),
        onPressed: () {
          // Do something.
        }
    )
)

Ví dụ về tạo một IconBotton trong khu vực leading khi kích vào IconBotton sẽ xuất hiện một thông báo

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: LeadingPage (),
    );
  }
}
class LeadingPage  extends StatelessWidget {
  const LeadingPage ({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("VTS Leading Sample"),
          leading: IconButton(
              icon: Icon(Icons.notifications_active),
              onPressed: () {
                showAlert(context);
              }
          )
      ),
      body: Center(
          child:  Text("VTS chuyên đào tạo Flutter từ đơn giản đến chuyên sâu")
      ),
    );
}
void showAlert(BuildContext context) {
    showDialog(
        context: context,
        builder: (context) => AlertDialog(
          content: Text("Hi"),
        ));
  }
}

Khi chạy ứng dụng sẽ ra kết quả sau

flutter

VD 2 : Hướng dẫn cách tạo ứng dụng có nút tắt/ bật âm thanh.

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("VTS Leading Title"),
          leading: MyVolumeButton()
      ),
      body: Center(
          child:  Text("VTS nhận đào tạo lập trình Flutter từ A-Z")
      ),
    );
  }
}
class MyVolumeButton extends StatefulWidget {
  const MyVolumeButton({Key? key}) : super(key: key);
  @override
  State createState() {
    return MyVolumeButtonState();
  }
}
class MyVolumeButtonState extends State {
  bool volumeOn = true;
  @override
  Widget build(BuildContext context) {
    return IconButton(
        icon: this.volumeOn? Icon(Icons.volume_up):Icon(Icons.volume_mute),
        onPressed: () {
          // Set new State
          setState(() => this.volumeOn = !this.volumeOn);
        }
    );
  }
}

Chạy ứng dụng sẽ ra kết quả sau

Appbar Leading MyVolumeButton sample

AutomaticallyImplyLeading

AutomaticallyImplyLeading là một thuộc tính (property) có giá trị mặc định là True trong lớp AppBar. Nếu không đặt bất kỳ một Widget nào trong AppBar ứng dụng sẽ tự động thêm vào một Widget phù hợp theo từng ngữ cảnh

VD 1 : Khi bạn tạo một đối tượng Drawer (Ngăn xếp) trên AppBar một đối tượng IconButton sẽ được tự động thêm vào khu vực leading nếu

Vùng leading của AppBar không có đối tượng nào được khai báo (Rỗng)
Thuộc tính AppBar. automaticallyImplyLeading : true
AppBar được khai báo trong Scaffold
Scaffold có chứa một Drawer

VD 2 : Một IconButtom BACK sẽ tự động được thêm vào khu vực leading của AppBar để hỗ trợ người dùng quay trở lại màn hình trước nếu

Vùng leading của AppBar không có đối tượng nào được khai báo (Rỗng)
Thuộc tính AppBar. automaticallyImplyLeading : true
Không có AppBar.drawer nào được khai báo AppBar.drawer : null
Bạn đang ở màn hình hiện tại từ việc di chuyển màn hình trước đó

Ví dụ về automaticallyImplyLeading

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar with automaticallyImplyLeading = "true" (Default)
      appBar: AppBar(
          title: Text("AppBar Title"),
          automaticallyImplyLeading: true
      )
      body: Center(
          child:  Text("VTS tuyển sinh lập trình Flutter")
      ),
      drawer: Drawer(
        child: ListView
          children: const [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              child: Text(
                'My Drawer',
                style: TextStyle(
                  color: Colors.green,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              title: Text('Gallery'),
            ),
            ListTile(
              title: Text('Slideshow'),
            ),
          ],
        ),
      ),
    );
  }
}

Chạy ứng dụng sẽ ra kế quả màn hình như sau

flutter

Thuộc tính title

Tilte (tiêu đề) dùng để hiển thị một đoạn văn bản trên Scraffold, nó thường dùng miên tả ngắn ngọn một chức năng hoặc nhiệm vụ nào đó

Ví dụ một AppBar đơn giản

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("VTS AppBar Title"),
      ),
      body: Center(
          child:  Text(
            'Hello World',
          )
      ),
    );
  }
}

Kết quả hiển thị

flutter

Căn lề title trong AppBar

Mặc định title sẽ được căn lề bên trái, tuy nhiên bạn có thể căn lại lề theo mong muốn thông qua thuộc tính

alignment: Alignment.center : Căn lề giữa
alignment: Alignment.centerRight : Căn lề bên phải
alignment: Alignment.centerLeft : Căn lề bên trái

Cú pháp câu lệnh như sau :

appBar: AppBar(
    title: Align (
        child: Text("VTS AppBar Title"),
        alignment: Alignment.center
    )
),

Chèn biểu tượng vào AppBar

Bạn cũng có thể chèn thêm các Icon bên canh title của AppBar, để tạo được icon bạn sẽ phải thêm vào một Widget bao gồm các icon và title

flutter

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 StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: IconTitleWidget()
      ),
      body: Center(
          child: Text(
            'VTS chuyên nhận đào tạo lập trình Flutter',
          )
      ),
    );
  }
}
class IconTitleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    imageCache?.clear();
    return Row (
      mainAxisAlignment: MainAxisAlignment.center, // Centers horizontally
      crossAxisAlignment: CrossAxisAlignment.center, // Centers vertically
      children: [
        Icon(Icons.train),
        Icon(Icons.place),
        // The SizedBox provides an immediate spacing between the widgets
        SizedBox (
          width: 5,
        ),
        Text(
          "VTS Place",
        )
      ],
    );
  }
}

Kết quả màn hình

flutter

FlexiableSpace

Flexiablespace là một không gian linh hoạt đứng ngay phía dưới AppBar có kích thước chiều cao bằng với chiều cao AppBar

FlexiableSpace dùng để ngăn sách thành phần AppBar với các thành phần khác trong Scraffold

Action

Khu vực action nằm ở phía trên bên phải của Scraffold, dùng để thêm các nút lệnh thực hiện một nhiệm vụ nào đó, nút lệnh (action) thường là các IconButton hoặc PopupMenuButton

Trong ví dụ này chúng ta sẽ thêm 2 nút iconButton và PopupMenuButton flutter

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("VTS AppBar Title"),
          actions: [
            IconButton(
              icon: Icon(Icons.file_upload),
              onPressed: () => {
                print("Click on upload button")
              },
            ),
            IconButton(
                icon: Icon(Icons.settings),
                onPressed: () => {
                  print("Click on settings button")
                }
            ),
            PopupMenuButton(
              icon: Icon(Icons.share),
              itemBuilder: (context) => [
                PopupMenuItem(
                  value: 1,
                  child: Text("Facebook"),
                ),
                PopupMenuItem(
                  value: 2,
                  child: Text("Instagram"),
                ),
              ],
            )
          ]
      ),
      body: Center(
          child: Text(
            'VTS nhận đào tạo lập trình Flutter từ A-Z',
          )
      ),
    );
  }
}

kết quả thực hiện

flutter

Bottom

Bottom (đáy) là khu vực nằm ở phía cuối cùng của AppBar, nó thường được sử dụng để chứa TabBar

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage_botton(),
    );
  }
}
class MyHomePage_botton extends StatelessWidget {
  const MyHomePage_botton({Key? key}) : super(key: key);
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('VTS AppBar Example'),
          ),
          body: TabBarView (
            children: [
              Center(child: Text("Car")),
              Center(child: Text("Transit")),
              Center(child: Text("Bike")
            ],
          ),
        )
    );
  }
}

Trên đây là toàn bộ bài giới thiệu về AppBar và chi tiết các thành phần trong AppBar, nếu bạn có bất kỳ câu hỏi gì vui lòng liên hệ với VTSoft qua số điện thoại 098 333 0380, VTSoft nhận hướng dẫn thực tập Flutter miễn phí cho các bạn có đam mê lập trình trên Mobile APP