Tìm hiểu lớp Scaffold và các thành phần trong Flutter

Scaffold là gì?

Scaffold là một class trong Flutter, Scaffold thông qua API cung cấp nhiều Widget để hiển thị như Drawer, SnackBar, BottomNavigationBar, FloatingActionButton, AppBar, … Scaffold có khả năng mở rộng để lấp đầy màn hình hoặc không gian có sẵn.

Cấu trúc Scaffold

const Scaffold({
  Key key,
  PreferredSizeWidget appBar,
  Widget body,
  Widget floatingActionButton,
  FloatingActionButtonLocation floatingActionButtonLocation,
  FloatingActionButtonAnimator floatingActionButtonAnimator,
  List persistentFooterButtons,
  Widget drawer,
  Widget endDrawer,
  Widget bottomNavigationBar,
  Widget bottomSheet,
  Color backgroundColor,
  bool resizeToAvoidBottomPadding,
  bool resizeToAvoidBottomInset,
  bool primary: true,
  DragStartBehavior drawerDragStartBehavior:   DragStartBehavior.down
})

FloatingActionButton

Là một biểu tượng hình tròn nổi phía trên màn hình, khi tác động vào sẽ thực thi một nhiệm vụ trong ứng dụng

flutter

AppBar

AppBar hay còn gọi là Thanh ứng dụng, bao gồm một thanh công cụ (Tool Bar) và các widget đặc biệt khác

AppBar được chia làm 5 nhóm khu vực gồm Leading, title, Tool Bar, flexibleSpace, bottom

home: Scaffold(
  appBar: AppBar(
    // AppBar takes a Text Widget
    // in it's title parameter
    title: const Text('VTSOFT'),
  ),
  body: const Center(child: Text('Hello World')),
));

Drawer

Drawer là một Panel thường được hiển thị bên trái của màn hình, thông thường nó ở trạng thái ẩn và chỉ xuất hiện khi người sử dụng kích vào một chức năng trên AppBar hoặc vuốt từ trái qua phải trên màn hình.

drawer: Drawer(
  child: ListView(
    children: const [
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.green,
        ),
        child: Text(
          'Hello World',
          style: TextStyle(
            color: Colors.green,
            fontSize: 24,
          ),
        ),
      ),
      ListTile(
        title: Text('Gallery'),
      ),
      ListTile(
        title: Text('Slideshow'),
      ),
    ],
  )
),

flutter

BottomSheet

BottomSheet là một khu vực thường được dùng để hiện thị các thông tin thêm (thông tin bổ sung) như thông tin liên hệ, nó được dùng để hiển thị phía gần cuối của Scaffold, không thay đổi vị trí khi người dùng cuộn màn hình lên hay xuống.

bottomSheet: Container(
    height: 55,
    color: Colors.cyan[50],
    child:Column    (
      children: [
        Row (
          children: [
            Icon(Icons.place),
            SizedBox(width:5, height:5),
            Text("Số 22/5 Lương Khánh Thiện, Hà Nội")
          ],
        ),
        Row (
          children: [
            Icon(Icons.phone),
            SizedBox(width:5, height:5),
            Text("(098) 333-0380)")
          ],
        )
      ],
    )
),

flutter

BottomNavigationBar

bottomNavigationBar hay còn gọi là thanh điều hướng, nó được hiển thì phía cuối của Scaffold và cố định ngay cả khi bạn cuộn màn hình. Bạn có thể sử dụng BottomAppBar và BottomNativationBar trong thanh điều hướng này

bottomNavigationBar : BottomNavigationBar(
  currentIndex : 0,
  fixedColor  : Colors.green,
  items : [
    BottomNavigationBarItem(
      title  : Text("Home"),
      icon  : Icon(Icons.home),
    ),
    BottomNavigationBarItem(
      title : Text("Search"),
      icon  : Icon(Icons.search),
    ),
    BottomNavigationBarItem(
      title  : Text("Profile"),
      icon  : Icon(Icons.account_circle),
    ),
  ],
)

Flutter

SnackBar

SnackBar được sử dụng để hiển thị một thông báo đến người dùng và sẽ tự động được tắt đi sau khoảng một thời gian nhất định hoặc sau khi người dùng tương tác trên màn hình, nó được mặc định hiển thị phía cuối của Scraffold

Trong SnackBar bạn cũng có thể bổ sung thêm một hành động (action) để tương tác lại với thông báo như hành động UNDO để hủy bỏ kết quả đã thực hiện trước đó

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter SnackBar Example'),
        ),
        body: Center(
            child: Builder(
                builder: (BuildContext ctxOfScaffold)  {
                  return ElevatedButton(
                      child: Text('Show SnackBar'),
                      onPressed: () {
                        this._showSnackBarMsgDeleted(ctxOfScaffold);
                      }
                  );
                }
            )
        )
    );
  }
  void _showSnackBarMsgDeleted(BuildContext ctxOfScaffold) {
    // Create a SnackBar.
    final snackBar = SnackBar(
      content: Text('Message is deleted!'),
      action: SnackBarAction(
        label: 'UNDO',
        onPressed: () {
          this._showSnackBarMsgRestored(ctxOfScaffold);
        },
      ),
    );
    // Find the Scaffold in the widget tree
    // and use it to show a SnackBar.
    Scaffold.of(ctxOfScaffold).showSnackBar(snackBar);
  }
  void _showSnackBarMsgRestored(BuildContext ctxOfScaffold) {
    // Create a SnackBar.
    final snackBar = SnackBar(
        content: Text('Message is restored!')
    );
    // Find the Scaffold in the widget tree
    // and use it to show a SnackBar.
    Scaffold.of(ctxOfScaffold).showSnackBar(snackBar);
  }
}

Kết quả sau khi thực hiện

flutter

backgroundColor

backgroundColor là một thuộc tính (property) được dùng để thiết lập màu nền cho toàn bộ màn hình bên trong Scraffold

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.greenAccent,
        appBar: AppBar(
          title: Text('Flutter SnackBar Example'),
        ),
        body: Center(
            child: Builder(
                builder: (BuildContext ctxOfScaffold)  {
                  return ElevatedButton(
                      child: Text('CÔNG TY CP TIN HỌC VÂN THANH'),
                      onPressed: () {
                                              }
                  );
                }
            )
        )
    );
  }
}

flutter

Trong các bài tiếp theo, VTSoft sẽ giới thiệu chi tiết ý nghĩa và cách sử dụng các thành phần trong Flutter, hẹn gặp lại các bạn trong các bài tiếp theo.