Saturday, February 15, 2025
HomeLập Trình FlutterScaffold widget | Lập trình Flutter

Scaffold widget | Lập trình Flutter

Trong Flutter Scaffold là một widget cơ bản cung cấo một cấu trúc UI cho app. Nó được xem là xương sống (hay giàn giáo) trên màn hình, cung cấp một chuẩn bố cục cho app.

Các thuộc tính chính

App Bar (appBar): Hiển thị một title, hành động và điều hướng
Body (body): Vùng chứa nội dung chính nơi đặt widget
Floating Action Button (floatingActionButton): một nút nhấn tròn cho hành động chính
Bottom Navigation Bar (bottomNavigationBar): là một thanh điều hương dưới màn hình dành cho việc điều hướng
Drawer(drawer): một menu thanh bên cho việc điều hướng
Snack Bar (snackBar): một popup tạm thời để hiển thị dòng thông báo

Scaffold cũng là một StatefulWidget:

Ví dụ đơn giản: ví dụ về các thuộc tính appBar, body

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Scaffold Example")),
        body: Text("This is Scaffold body"),
      ),
    );
  }
}


Thuộc tính Drawer

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Scaffold Example")),
        body: Text("This is Scaffold body"),
        drawer: DrawerExample(), // thuộc tính drawer
      ),
    );
  }
}

class DrawerExample extends StatelessWidget {
  const DrawerExample({super.key});
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Text("Menu"),
          ),
          ListTile(
            title: Text("Home"),
            onTap: () {},
          ),
          ListTile(
            title: Text("Settings"),
            onTap: () {},
          ),
        ],
      ),
    );
  }
}

Khi quét qua bên cạnh màn hình sẽ xuất hiện một menu như bên trên

Hiển thị snackbar popup trong Scaffold widget

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SnackBarExample(), 
    );
  }
}

class SnackBarExample extends StatelessWidget {
  const SnackBarExample({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SnackBar Example")),
      body: Center(
        // sử dụng một nút nhấn để show Snack Bar message
        child: ElevatedButton(
          onPressed: () {
            // Show the SnackBar
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text("This is a SnackBar message!"),
                duration: Duration(seconds: 2),
              ),
            );
          },
          child: Text("Show SnackBar"),
        ),
      ),
    );
  }
}

Khi nhấn nút nhấn “Show SnackBar” sẽ xuất hiện một popup tin nhắn bên dưới màn hình

Thuộc tính floatingActionButton và bottomNavigationBar

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Scaffold Example"),
        ),
        body: Center(
          child: Text("Hello, Flutter!"),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Text("Bottom Navigation"),
          ),
        ),
      ),
    );
  }
}

Nguyễn Minh Châu
Nguyễn Minh Châuhttps://nhatkydev.com
Hi guys ! I'm a software developer. I love programming and new technologies. I create non-professional content on this website, you can only view it for reference purposes.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular