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.
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 })
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
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 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'), ), ], ) ),
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)") ], ) ], ) ),
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), ), ], )
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
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: () { } ); } ) ) ); } }
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.
Bài trước: Flutter là gì? Giới thiệu về Flutter
Bài tiếp theo: Hướng dẫn chi tiết cách sử dụng AppBar trong Flutter
11/11/2022
28/10/2022
27/10/2022
25/10/2022
22/08/2021
30/08/2021
19/08/2021
24/10/2022
14/10/2022
22/08/2024
15/08/2024
08/08/2024
06/08/2024
01/08/2024
Khám phá sự khác biệt với phần mềm quản trị doanh nghiệp hàng đầu! Đăng ký ngay để sử dụng phần mềm miễn phí.
Nhanh tay đăng ký để được tư vấn dịch vụ miễn phí và tìm ra giải pháp tốt nhất cho nhu cầu của bạn!