Cách dùng AppBar trong Flutter

Cách dùng AppBar trong Flutter từ cơ bản đến nâng cao, đây là công cụ dùng để hiển thị một mẫu thiết kế dạng material khá quen thuộc.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Trong Flutter, AppBar class được dùng để hiển thị một ô giao diện với các tùy chọn bên trong, đó có thể là các button như những ứng dụng mà bạn đang sử dụng trên điện thoại của mình.

AppBar sẽ hiển thị cố định chiều cao ở phía trên cùng của màn hình, và nó có nhiều thuộc tính như: backgroundColor, primary, title ... giúp ta có thể tùy biến giao diện cho AppBar.

Cú pháp AppBar trong Flutter

Cú pháp đơn giản nhất đó là cấu hình tiêu đề cho AppBar, kèm theo đó là những hành động (actions) như sau:

Bài viết này được đăng tại [free tuts .net]

AppBar(
  title: /*some title*/,
  actions: <Widget>[
    //array of widgets that take some actions
  ],
),

Ví dụ: Viết một ứng dụng hiển thị AppBar trong Flutter, với tiêu đề là Flutter Tutorial.

main.dart

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
/// main application widget
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  static const String _title = 'Flutter Tutorial';
 
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}
 
/// stateless widget that the main application instantiates
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar Tutorial'),
      ),
      body: const Center(
        child: Text(
          'Hello World!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Chạy lên thì ta có giao diện như sau (trong trình Android Emulator):

flutter appbar android 1 png

Kết quả trên iPhone như sau:

flutter appbar iphone 1 png

Ví dụ Flutter AppBar kèm các actions

Trong ví dụ dưới đây ta sẽ xây dựng ứng dụng kèm theo các actions, bạn sẽ phải kết hợp với các đối tượng khác.

main.dart

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
/// main application widget
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  static const String _title = 'Flutter Tutorial';
 
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}
 
/// stateless widget that the main application instantiates
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar Tutorial'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add_alert),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('You pressed bell icon.')));
            },
          ),
        ],
      ),
      body: const Center(
        child: Text(
          'Hello World!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Kết quả trên Android Emulator:

flutter appbar android 2 png

Kết quả trên iPhone:

flutter appbar iphone 2 png

Như vậy là mình đã hướn dẫn xong cách sử dụng AppBar Flutter, đây là công cụ khá hữu ích và sử dụng thường xuyên khi làm việc với Flutter.

Cách dùng AppBar trong Flutter

Cú pháp AppBar trong Flutter

Ví dụ Flutter AppBar kèm các actions

Cùng chuyên mục:

Các bước cài đặt Flutter trên Linux Ubuntu

Cách dùng AppBar trong Flutter

Cú pháp AppBar trong Flutter

Ví dụ Flutter AppBar kèm các actions

Cùng chuyên mục:

Các bước cài đặt Flutter trên Linux Ubuntu

Giới thiệu

Thủ thuật

Link hay

Liên kết