NGHỆ THUẬT FLUTTER : CÁC CÁCH QUẢN LÝ STATE TRONG FLUTTER – setState
Trong lập trình Flutter, setState là cách cập nhật trạng thái cơ bản, phổ biến và hầu hết đều được dùng trong xây dựng ứng dụng Flutter.
|
1 2 3 |
setState(() { // Write something here }); |
Hàm setState trong Flutter sẽ giúp cập nhật UI đối với những phần liên quan đến các biến được đặt trong hàm setState.
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
RaisedButton( child: Text("Đổi màu"), onPressed: (){ // Thay đổi trạng thái UI với các thành phần liên quan đến changedColor setState(() { changedColor = ! changedColor; }); }, ), SizedBox(height: 20,), RaisedButton( child: Text("Tăng số"), onPressed: (){ // Thay đổi trạng thái UI với các thành phần liên quan đến count setState(() { count++; }); }, ), |
Khi nhấn vào các nút Đổi màu hay Tăng số thì các bộ phận của UI liên quan đến changedColor hay count sẽ thay đổi.
Từ ảnh động trên, bạn có thể hiểu rõ , các hoạt động và sử dụng setState. Bạn có thể tự chạy trên thiết bị của mình bằng đoạn code bên dưới :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool changedColor = false; int count = 0; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("setState"), centerTitle: true, ), body: Container( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( height: 100, width: 100, decoration: BoxDecoration( color: changedColor ? Colors.red : Colors.green ), child: Center( child: Text(count.toString(), style: TextStyle(color: Colors.white, fontSize: 20),), ), ), SizedBox(height: 20,), // change Color RaisedButton( child: Text("Đổi màu"), onPressed: (){ // Thay đổi trạng thái UI với các thành phần liên quan đến changedColor setState(() { changedColor = ! changedColor; }); }, ), SizedBox(height: 20,), RaisedButton( child: Text("Tăng số"), onPressed: (){ // Thay đổi trạng thái UI với các thành phần liên quan đến count setState(() { count++; }); }, ), ], ), ) ), ), ); } } |
setState là một cách cơ bản để cập nhật trạng thái trên UI. Nó sẽ được dùng hầu hết trong các quá trình viết ứng dụng Flutter.
Ưu điểm của setState là đơn giản dễ dùng, không quá phức tạp. Tuy nhiên với trường hợp đặt quá nhiều biến trong hàm setState thì lúc đó việc dùng setState thì sẽ khiến ứng dụng bị chậm hơn, lúc đó chúng ta nên dùng các cách quản lý State khác ví dụ như Provider…
Chúc các bạn có được nhiều kiến thức từ blog Báo Flutter !
