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"),
),
),
),
);
}
}
