Flutter

19/03/2026

MediaQueryData: Thám Tử Màn Hình Giúp App Flutter Của Bạn "Biết Điều"

MediaQueryData: Thám Tử Màn Hình Giúp App Flutter Của Bạn "Biết Điều" Chào các chiến thần code tương lai của anh Creyt! Hôm nay, chúng ta sẽ cùng "soi" một khái niệm nghe có vẻ hàn lâm nhưng lại cực kỳ thực chiến trong Flutter: MediaQueryData. 1. MediaQueryData là gì và để làm gì? (Theo hướng GenZ) Nói một cách dễ hiểu, MediaQueryData giống như một "thám tử" chuyên nghiệp hoặc một "bản đồ thông minh" mà app của bạn dùng để biết chính xác nó đang "sống" trong môi trường nào. Em cứ hình dung thế này: bạn đang xây một căn nhà (app Flutter của bạn) và muốn nó phải đẹp, tiện nghi dù khách của bạn là "người khổng lồ" (máy tính bảng màn hình to đùng), "người tí hon" (điện thoại nhỏ xíu), hay "người thuận tay trái" (thiết bị xoay ngang). MediaQueryData chính là cái "bản đồ" cung cấp tất tần tật thông tin về cái "lô đất" mà app của em đang chiếm dụng. Nó cho em biết: Kích thước màn hình: Chiều rộng (width), chiều cao (height) của toàn bộ màn hình. Hướng màn hình: Đang xoay dọc (portrait) hay xoay ngang (landscape)? Mật độ pixel: Màn hình này "sắc nét" cỡ nào? (ví dụ: devicePixelRatio). Padding của hệ thống: Các vùng mà UI của em không nên "chạm" vào, như tai thỏ (notch), thanh trạng thái (status bar) ở trên, hay thanh điều hướng ảo (navigation bar) ở dưới. Vân vân mây mây các thông tin khác về font scale, keyboard status... Tóm lại: Nó là "bộ não" giúp app của em không bị "vỡ trận" hay "xấu ma chê quỷ hờn" khi chạy trên các thiết bị khác nhau. Muốn app "biết điều", tự động điều chỉnh giao diện cho phù hợp với mọi loại màn hình? Chính là nó chứ ai! 2. Code Ví Dụ Minh Họa Rõ Ràng Giờ thì, lý thuyết suông hoài cũng chán, mình vào thực hành luôn cho "nóng"! Anh Creyt sẽ show cho em một ví dụ đơn giản để thấy MediaQueryData hoạt động như thế nào. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Creyt\'s MediaQueryData Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const HomeScreen(), ); } } class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @override Widget build(BuildContext context) { // Đây chính là lúc "thám tử" MediaQuery bắt đầu làm việc! // Phương thức MediaQuery.of(context) sẽ trả về một đối tượng MediaQueryData final mediaQueryData = MediaQuery.of(context); // Lấy kích thước màn hình final screenWidth = mediaQueryData.size.width; final screenHeight = mediaQueryData.size.height; // Lấy hướng xoay màn hình (ngang hay dọc) final orientation = mediaQueryData.orientation; // Lấy padding của hệ thống (ví dụ: tai thỏ, thanh trạng thái, thanh điều hướng) final topPadding = mediaQueryData.padding.top; final bottomPadding = mediaQueryData.padding.bottom; return Scaffold( appBar: AppBar( title: const Text('Thám Tử Màn Hình: MediaQueryData'), ), body: Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Text( 'Chào mừng đến với lớp của anh Creyt!', style: Theme.of(context).textTheme.headlineSmall, textAlign: TextAlign.center, ), const SizedBox(height: 20), // Hiển thị thông tin cơ bản _buildInfoRow('Chiều rộng màn hình:', '${screenWidth.toStringAsFixed(2)} px'), _buildInfoRow('Chiều cao màn hình:', '${screenHeight.toStringAsFixed(2)} px'), _buildInfoRow('Hướng màn hình:', orientation == Orientation.portrait ? 'Dọc (Portrait)' : 'Ngang (Landscape)'), _buildInfoRow('Padding trên (Status bar, Notch):', '${topPadding.toStringAsFixed(2)} px'), _buildInfoRow('Padding dưới (Navigation bar):', '${bottomPadding.toStringAsFixed(2)} px'), const SizedBox(height: 30), // Một ví dụ nhỏ về responsive UI: // Cái container này sẽ thay đổi màu và kích thước dựa vào hướng màn hình Text( 'Thử xoay màn hình xem nào!', style: Theme.of(context).textTheme.titleLarge, textAlign: TextAlign.center, ), const SizedBox(height: 15), Container( width: orientation == Orientation.portrait ? screenWidth * 0.8 : screenWidth * 0.4, height: orientation == Orientation.portrait ? screenHeight * 0.2 : screenHeight * 0.4, color: orientation == Orientation.portrait ? Colors.deepPurpleAccent : Colors.teal, alignment: Alignment.center, child: Text( 'Anh Creyt đây!', style: TextStyle( color: Colors.white, fontSize: orientation == Orientation.portrait ? 24 : 30, fontWeight: FontWeight.bold, ), ), ), const SizedBox(height: 20), Text( 'Container này "biết điều" lắm, nó tự điều chỉnh theo hướng màn hình đó em. Nó co giãn như con mèo vậy!', textAlign: TextAlign.center, style: Theme.of(context).textTheme.bodyMedium, ), ], ), ), ), ); } Widget _buildInfoRow(String label, String value) { return Padding( padding: const EdgeInsets.symmetric(vertical: 4.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text(label, style: const TextStyle(fontWeight: FontWeight.bold)), Text(value), ], ), ); } } Trong ví dụ trên, anh Creyt đã sử dụng MediaQuery.of(context) để lấy các thông tin về màn hình và sau đó dùng chúng để: Hiển thị thông tin kích thước, hướng màn hình. Thay đổi kích thước và màu sắc của một Container dựa trên hướng màn hình (dọc hay ngang). Đây chính là cách đơn giản nhất để làm UI "responsive" đó em. 3. Mẹo (Best Practices) để ghi nhớ hoặc dùng thực tế Để trở thành một dev "xịn xò", em cần biết vài mẹo vặt này: Đừng lạm dụng MediaQuery.of(context) quá mức: Mỗi khi MediaQueryData thay đổi (ví dụ: người dùng xoay màn hình), widget của bạn sẽ được build lại. Nếu gọi quá nhiều chỗ không cần thiết có thể ảnh hưởng đến hiệu năng. Hãy chỉ gọi ở những widget thực sự cần thông tin responsive thôi nhé. Sử dụng LayoutBuilder cho responsive cục bộ: Nếu em chỉ muốn một phần nhỏ của UI responsive với kích thước của widget cha (chứ không phải toàn bộ màn hình), hãy dùng LayoutBuilder. Nó cung cấp BoxConstraints của widget cha, chính xác và hiệu quả hơn cho các trường hợp cụ thể. Cẩn thận với padding: Luôn nhớ dùng mediaQueryData.padding để xử lý các vùng an toàn như tai thỏ (notch), thanh trạng thái (status bar) hoặc thanh điều hướng ảo (navigation bar) trên Android. Nếu không, UI của em có thể bị che mất hoặc trông "lệch pha" lắm. Theme và Constants: Thay vì hardcode các giá trị responsive (ví dụ: screenWidth * 0.8), hãy định nghĩa các hằng số hoặc sử dụng theme để dễ quản lý và nhất quán hơn trong toàn bộ app. 4. Ví dụ thực tế các ứng dụng/website đã ứng dụng Em có biết không, hầu hết các ứng dụng di động và website "xịn sò" ngày nay đều phải responsive. MediaQueryData (hoặc các cơ chế tương tự trong web) là xương sống của điều đó: TikTok, Instagram, Facebook: Em để ý khi xoay ngang điện thoại hoặc dùng trên máy tính bảng, giao diện của chúng sẽ tự động điều chỉnh không? Ảnh, video, comment đều phải hiển thị đẹp và tối ưu không gian. Các ứng dụng đọc sách/báo (ví dụ: Kindle, Google News): Tùy chỉnh kích thước font, số cột văn bản, hay cách hiển thị hình ảnh khi em xoay màn hình hoặc đổi từ điện thoại sang tablet. Ecommerce Apps (Shopee, Lazada): Trên điện thoại, danh sách sản phẩm thường hiển thị dạng lưới 2 cột. Nhưng trên tablet, chúng có thể hiển thị 3-4 cột để tận dụng không gian màn hình lớn hơn, giúp người dùng xem được nhiều sản phẩm cùng lúc. 5. Thử nghiệm đã từng và hướng dẫn nên dùng cho case nào Anh Creyt đã từng "đau đầu" với việc làm một cái dashboard quản lý kho hàng. Trên điện thoại thì cần hiển thị dạng list gọn gàng, chỉ show những thông tin chính. Nhưng trên tablet lại muốn hiển thị dạng bảng chi tiết với nhiều cột hơn, có cả biểu đồ thống kê. MediaQueryData chính là "vị cứu tinh" giúp anh dễ dàng chuyển đổi layout giữa hai kịch bản này chỉ với vài dòng code kiểm tra screenWidth và orientation. Nên dùng MediaQueryData khi nào? Điều chỉnh layout tổng thể: Khi em muốn toàn bộ giao diện app thay đổi đáng kể dựa trên kích thước hoặc hướng màn hình (ví dụ: từ layout 1 cột sang 2 cột, hoặc thay đổi vị trí các thành phần chính). Xử lý các vùng an toàn (Safe Area): Đảm bảo UI của em không bị che bởi tai thỏ, thanh trạng thái, hoặc các phím điều hướng ảo. Đây là một trong những ứng dụng quan trọng nhất của mediaQueryData.padding. Thay đổi kích thước chữ, hình ảnh, hoặc khoảng cách: Để tối ưu trải nghiệm đọc/xem trên các màn hình khác nhau, tránh chữ quá to trên điện thoại nhỏ hoặc quá bé trên tablet lớn. Phân biệt giữa điện thoại và máy tính bảng: Để cung cấp các tính năng hoặc luồng người dùng khác nhau cho từng loại thiết bị, tối ưu hóa trải nghiệm cho từng "hệ sinh thái" màn hình. Hy vọng qua bài này, em đã nắm rõ được MediaQueryData là gì, làm được gì và dùng nó như thế nào để app của mình "biết điều" hơn trên mọi thiết bị. Hãy thực hành thật nhiều để biến kiến thức thành kỹ năng nhé! Chúc em code cháy máy! Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

40 Đọc tiếp

19/03/2026

MaterialStateProperty: Nút "Mood Ring" của Flutter!

MaterialStateProperty: Nút "Mood Ring" của Flutter! Chào các "dev-genz" tương lai, lại là anh Creyt đây! Hôm nay, chúng ta sẽ "bóc phốt" một khái niệm mà thoạt nghe có vẻ hàn lâm nhưng thực ra lại cực kỳ "cool ngầu" và thiết thực trong Flutter: MaterialStateProperty. 1. "Mood Ring" của UI: MaterialStateProperty là gì và để làm gì? Các em có bao giờ đeo cái nhẫn "mood ring" chưa? Nó đổi màu theo cảm xúc của mình ấy. Thì trong Flutter, các widget như nút bấm, checkbox, hay thậm chí cả text field cũng có "tâm trạng" riêng của chúng. Khi các em chạm vào, giữ, rê chuột qua, hoặc khi chúng bị vô hiệu hóa, chúng đều có một "trạng thái" (state) khác nhau. MaterialStateProperty chính là "sổ tay hướng dẫn" để các widget của chúng ta "biến hình" theo những trạng thái đó! Thay vì phải viết "if-else" loằng ngoằng cho từng trạng thái màu sắc, kích thước, hay bóng đổ, MaterialStateProperty cho phép các em định nghĩa một cách mạch lạc rằng: "Khi ở trạng thái A thì trông như thế này, khi ở trạng thái B thì trông như thế khác". Nói cách khác, nó là một lớp trừu tượng (abstract class) giúp chúng ta map một tập hợp các trạng thái (MaterialState) tới một giá trị cụ thể (ví dụ: một màu sắc, một kích thước, một hình dạng). Các trạng thái phổ biến mà chúng ta hay gặp là: MaterialState.pressed: Khi widget bị nhấn. MaterialState.hovered: Khi con trỏ chuột rê qua (trên web/desktop). MaterialState.focused: Khi widget được focus (ví dụ, dùng tab để di chuyển). MaterialState.disabled: Khi widget bị vô hiệu hóa, không thể tương tác. MaterialState.selected: Khi widget được chọn (ví dụ, checkbox). Nó "giải phóng" chúng ta khỏi việc phải tự quản lý từng trạng thái nhỏ nhặt, giúp code sạch hơn, dễ đọc hơn và "chuẩn Material Design" hơn. 2. Code Ví Dụ Minh Họa: "Thấy là hiểu ngay" Để các em "thấm" ngay, chúng ta hãy xem một ví dụ kinh điển với ElevatedButton nhé. Anh Creyt sẽ "phù phép" cho cái nút này đổi màu nền khi được nhấn và khi bị vô hiệu hóa. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'MaterialStateProperty Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key}); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { bool _isButtonEnabled = true; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('MaterialStateProperty Explained'), backgroundColor: Theme.of(context).colorScheme.inversePrimary, ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: _isButtonEnabled ? () { ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Nút đã được nhấn!')), ); } : null, // Khi null, nút sẽ tự động bị disabled style: ButtonStyle( backgroundColor: MaterialStateProperty.resolveWith<Color?>( (Set<MaterialState> states) { if (states.contains(MaterialState.pressed)) { return Colors.green.shade700; // Màu khi nhấn } if (states.contains(MaterialState.disabled)) { return Colors.grey.shade400; // Màu khi bị vô hiệu hóa } return Theme.of(context).colorScheme.primary; // Màu mặc định }, ), foregroundColor: MaterialStateProperty.resolveWith<Color?>( (Set<MaterialState> states) { if (states.contains(MaterialState.pressed)) { return Colors.white; // Chữ trắng khi nhấn } if (states.contains(MaterialState.disabled)) { return Colors.grey.shade700; // Chữ xám đậm khi disabled } return Colors.white; // Chữ trắng mặc định }, ), // Overlay color (hiệu ứng gợn sóng khi nhấn) overlayColor: MaterialStateProperty.resolveWith<Color?>( (Set<MaterialState> states) { if (states.contains(MaterialState.pressed)) { return Colors.green.shade900.withOpacity(0.2); } if (states.contains(MaterialState.hovered)) { return Colors.green.shade100.withOpacity(0.1); } return null; // Mặc định }, ), // Shape (ví dụ: bo tròn hơn khi nhấn) shape: MaterialStateProperty.resolveWith<OutlinedBorder?>( (Set<MaterialState> states) { if (states.contains(MaterialState.pressed)) { return RoundedRectangleBorder( borderRadius: BorderRadius.circular(20.0), ); } return const RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(8.0)), ); }, ), // Elevation (độ nổi) elevation: MaterialStateProperty.resolveWith<double?>( (Set<MaterialState> states) { if (states.contains(MaterialState.pressed)) { return 10.0; // Nổi hơn khi nhấn } return 2.0; // Mặc định }, ), ), child: const Text('Nhấn tôi đi!'), ), const SizedBox(height: 20), ElevatedButton( onPressed: () { setState(() { _isButtonEnabled = !_isButtonEnabled; }); }, child: Text(_isButtonEnabled ? 'Vô hiệu hóa nút trên' : 'Kích hoạt nút trên'), ), ], ), ), ); } } Trong ví dụ trên: Chúng ta dùng MaterialStateProperty.resolveWith để cung cấp một hàm callback. Hàm này nhận vào một Set<MaterialState> (tập hợp các trạng thái hiện tại của widget) và trả về giá trị mong muốn (ví dụ: Color?). Bên trong callback, chúng ta kiểm tra states.contains(MaterialState.pressed) hay states.contains(MaterialState.disabled) để quyết định trả về màu gì. overlayColor là màu hiển thị khi rê chuột hoặc nhấn, tạo hiệu ứng gợn sóng (splash effect). MaterialStateProperty.all<Color>(Colors.blue): Nếu các em muốn một giá trị không đổi dù widget ở bất kỳ trạng thái nào, thì dùng all cho gọn. Ví dụ, nếu backgroundColor luôn là xanh dương bất kể trạng thái nào. 3. Mẹo (Best Practices) từ "Lão Làng" Creyt: Đừng "lạm dụng" quá nhiều trạng thái: Mỗi lần đổi màu, đổi kích thước quá nhiều sẽ làm UI của các em trông "rối như canh hẹ". Chỉ nên thay đổi những thuộc tính quan trọng để người dùng dễ nhận biết trạng thái. Ưu tiên ThemeData: Thay vì định nghĩa MaterialStateProperty cho từng nút một, hãy định nghĩa nó ở cấp độ ThemeData (ví dụ: trong ElevatedButtonThemeData). Điều này giúp toàn bộ ứng dụng của các em có giao diện nhất quán và dễ bảo trì hơn rất nhiều. Coi như là "template" cho các nút vậy. Sử dụng MaterialStateProperty.all khi không cần đổi: Nếu một thuộc tính nào đó (ví dụ padding) không cần thay đổi theo trạng thái, hãy dùng MaterialStateProperty.all(value) thay vì resolveWith để code gọn gàng hơn. Kiểm tra thứ tự trạng thái: Khi dùng resolveWith, thứ tự các if statement quan trọng. Ví dụ, disabled thường có ưu tiên cao nhất, vì nó "ghi đè" lên các trạng thái khác. Đảm bảo dễ tiếp cận (Accessibility): Luôn kiểm tra độ tương phản màu sắc giữa chữ và nền ở tất cả các trạng thái, đặc biệt là khi nút bị disabled hoặc pressed, để người dùng có thị lực kém vẫn có thể nhận biết. 4. Ứng dụng Thực tế: "Ai cũng dùng, chỉ là không biết tên" Các em có thể chưa biết tên MaterialStateProperty, nhưng chắc chắn đã dùng nó hàng ngày rồi: Google Apps (Gmail, Drive, Maps): Các nút bấm, checkbox, radio button đều có hiệu ứng khi nhấn, khi rê chuột (trên web), hoặc khi bị vô hiệu hóa. Đó chính là MaterialStateProperty "đội lốt" ở phía dưới. Facebook, Instagram: Khi các em nhấn nút "Like", nút "Comment", hay nút "Send" trong Messenger, chúng sẽ có một hiệu ứng nhấn, hoặc đổi màu để báo hiệu tương tác. Các ứng dụng E-commerce: Nút "Thêm vào giỏ hàng" thường bị mờ đi (disabled) khi sản phẩm hết hàng, và sáng lên khi có hàng. Khi nhấn, nó có thể đổi màu nhẹ để xác nhận thao tác. Tóm lại, bất kỳ ứng dụng nào sử dụng Material Design và muốn có phản hồi trực quan mượt mà, chuyên nghiệp cho các tương tác của người dùng, đều sẽ dùng đến tư duy của MaterialStateProperty. 5. Thử nghiệm và Hướng dẫn nên dùng cho case nào? Anh Creyt đã từng "ngây thơ" thử quản lý trạng thái của nút bằng cách tự tạo biến _isPressed = false; rồi setState khi onPressed và onLongPress. Kết quả là code rối rắm, khó mở rộng, và không bao giờ "chuẩn Material Design" được như cách Flutter sinh ra. Khi "khai sáng" ra MaterialStateProperty, mọi thứ trở nên "dễ thở" hơn rất nhiều. Khi nào nên dùng? Tất cả các widget Material Design có thể tương tác: ElevatedButton, TextButton, OutlinedButton, Checkbox, Radio, Switch, TabBar, TextField (ví dụ, màu border khi focused), v.v. Khi các em muốn tuân thủ chặt chẽ Material Design: Nó là "công cụ vàng" để đạt được sự nhất quán và chuyên nghiệp. Khi muốn UI của mình "có hồn" hơn, phản hồi tốt hơn với người dùng. Khi nào nên cân nhắc không dùng (hoặc dùng cách khác)? Với các widget hoàn toàn tùy chỉnh (custom widget) không dựa trên Material Design: Nếu các em tự vẽ mọi thứ từ đầu bằng CustomPaint hoặc các widget cấp thấp, có thể các em sẽ muốn quản lý trạng thái theo cách riêng của mình để có toàn quyền kiểm soát. Khi chỉ cần một giá trị cố định, không thay đổi: Nếu một thuộc tính không bao giờ thay đổi theo trạng thái, thì chỉ cần truyền giá trị trực tiếp hoặc dùng MaterialStateProperty.all. Nhớ nhé, MaterialStateProperty không chỉ là một khái niệm, nó là một "triết lý" để xây dựng UI tương tác trong Flutter. Nắm vững nó, các em sẽ "nâng tầm" ứng dụng của mình lên một đẳng cấp mới! Chúc các em code vui vẻ và luôn "sáng tạo" nhé! Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

44 Đọc tiếp

19/03/2026

MaterialBanner: Cổng thông báo tinh tế trong Flutter

Chào các em, lại là Creyt đây! Hôm nay chúng ta sẽ mổ xẻ một 'công cụ' nhỏ mà có võ trong Flutter, đó là MaterialBanner. Các em cứ hình dung thế này, trong một căn nhà, có những lúc ta cần dán một cái 'post-it note' ngay cửa tủ lạnh để nhắc nhở những việc quan trọng: 'Hôm nay có sữa hết hạn!', 'Nhớ đóng tiền điện nhé!'. Nó ở đó, ngay tầm mắt, không la hét inh ỏi như chuông báo cháy (AlertDialog), cũng không thoáng qua nhanh như một lời thì thầm (SnackBar). Nó cứ lẳng lặng ở đó, cho đến khi ta đọc và hành động. MaterialBanner chính là cái 'post-it note' ấy trong thế giới ứng dụng của chúng ta. Nói một cách hàn lâm hơn, MaterialBanner là một widget UI trong Flutter, được thiết kế theo Material Design, dùng để hiển thị các thông báo quan trọng, mang tính chất hệ thống hoặc ứng dụng, mà không làm gián đoạn luồng công việc hiện tại của người dùng. Nó xuất hiện ở phía trên cùng của Scaffold, và có thể chứa nội dung, biểu tượng (leading icon) và các hành động (actions) để người dùng tương tác. Điểm đặc biệt của nó là nó không tự động biến mất sau một thời gian ngắn như SnackBar, mà cần được người dùng hoặc hệ thống chủ động đóng lại. Code Ví Dụ Minh Hoạ Giờ thì, lý thuyết suông thì chán òm. Chúng ta phải 'xắn tay áo' vào code mới thấy nó 'ngon' cỡ nào. Để dùng MaterialBanner, chúng ta sẽ cần đến 'anh quản gia' của màn hình, đó là ScaffoldMessenger. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'MaterialBanner Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('MaterialBanner Example'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ElevatedButton( onPressed: () { // Hiển thị MaterialBanner ScaffoldMessenger.of(context).showMaterialBanner( MaterialBanner( content: const Text('Mạng của bạn đang ngoại tuyến. Dữ liệu có thể không được cập nhật.'), leading: const Icon(Icons.signal_wifi_off, color: Colors.white), backgroundColor: Colors.redAccent, actions: <Widget>[ TextButton( onPressed: () { // Đóng MaterialBanner hiện tại ScaffoldMessenger.of(context).hideCurrentMaterialBanner(); }, child: const Text('ĐÓNG', style: TextStyle(color: Colors.white)), ), TextButton( onPressed: () { // Ví dụ: thử kết nối lại ScaffoldMessenger.of(context).hideCurrentMaterialBanner(); ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Đang thử kết nối lại...')) ); }, child: const Text('THỬ LẠI', style: TextStyle(color: Colors.white)), ), ], ), ); }, child: const Text('Hiển thị MaterialBanner'), ), const SizedBox(height: 20), ElevatedButton( onPressed: () { // Đóng MaterialBanner nếu có ScaffoldMessenger.of(context).hideCurrentMaterialBanner(); }, child: const Text('Đóng MaterialBanner'), ), ], ), ), ); } } Mẹo Vặt và Best Practices (Thực hành tốt nhất) Ổn rồi, code chạy ngon lành cành đào rồi. Nhưng để dùng nó 'chuẩn bài', không biến ứng dụng của mình thành 'bãi rác thông báo', các em cần ghi nhớ vài điều Creyt dặn dò: Dùng đúng việc: MaterialBanner sinh ra là để thông báo những thứ quan trọng, nhưng KHÔNG CẦN NGƯỜI DÙNG PHẢI DỪNG LẠI NGAY LẬP TỨC để xử lý. Ví dụ: 'Mạng yếu', 'Cập nhật ứng dụng mới', 'Dữ liệu đã được lưu thành công nhưng có thể chưa đồng bộ'. Tuyệt đối không dùng nó để hỏi 'Bạn có chắc muốn xóa?' – cái đó là việc của AlertDialog. Có lối thoát: Luôn cung cấp ít nhất một hành động để người dùng có thể đóng MaterialBanner. Không ai thích bị mắc kẹt với một thông báo cứ lù lù trên đầu cả. Ngắn gọn, súc tích: Nội dung của MaterialBanner nên ngắn gọn, dễ hiểu. Đừng viết một bài văn trong đó. Biểu tượng (Leading Icon): Thêm một cái icon phù hợp sẽ giúp thông báo trở nên trực quan và đẹp mắt hơn rất nhiều. Ví dụ: icon wifi gạch chéo cho thông báo mất mạng. Quản lý qua ScaffoldMessenger: Luôn nhớ rằng ScaffoldMessenger là "người gác cổng" duy nhất cho MaterialBanner. Dùng ScaffoldMessenger.of(context).showMaterialBanner() để hiển thị và hideCurrentMaterialBanner() để ẩn đi. Ứng Dụng Thực Tế Vậy thì, trong thế giới thực, các em có thể thấy những 'ông lớn' nào đang dùng cái 'post-it note' này dưới một hình thức nào đó? Dù không phải lúc nào cũng là MaterialBanner đúng nghĩa của Flutter, nhưng cái ý tưởng về một banner thông báo không chặn tương tác thì phổ biến vô cùng: Google Drive/Docs/Sheets: Khi bạn làm việc ngoại tuyến, sẽ có một banner xuất hiện ở trên cùng thông báo "Offline mode enabled" hoặc "Document saved offline". Khi có mạng lại, nó có thể thông báo "All changes saved to cloud". Ứng dụng ngân hàng/tài chính: Đôi khi sẽ có banner thông báo về các chương trình khuyến mãi, cập nhật bảo mật, hoặc thông báo hệ thống đang bảo trì. Ứng dụng tin tức/truyền thông: "New articles available", "Bạn đang đọc phiên bản cũ, vuốt xuống để cập nhật tin mới." Ứng dụng giao hàng: "Đơn hàng của bạn đang được xử lý," "Tài xế đang đến." (Mặc dù đôi khi là SnackBar, nhưng ý tưởng thông báo trạng thái không chặn là tương tự). Ứng dụng email: "Đang đồng bộ thư..." hoặc "Không thể kết nối với máy chủ." Tóm lại, MaterialBanner là một công cụ tuyệt vời để giữ cho người dùng được thông tin mà không làm họ khó chịu. Hãy dùng nó một cách khôn ngoan, các em nhé! Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

43 Đọc tiếp

19/03/2026

MaterialApp: Kiến Trúc Sư Trưởng Của Mọi Ứng Dụng Flutter

Chào các chiến hữu lập trình, tôi là Creyt đây. Hôm nay, chúng ta sẽ mổ xẻ một nhân vật cực kỳ quan trọng trong thế giới Flutter: MaterialApp. Nếu bạn coi ứng dụng của mình là một tòa nhà chọc trời, thì MaterialApp chính là kiến trúc sư trưởng và đồng thời là bộ khung xương cốt lõi định hình toàn bộ phong cách, quy tắc và trải nghiệm người dùng theo chuẩn Material Design của Google. MaterialApp Là Gì và Để Làm Gì? Nói một cách đơn giản, MaterialApp là một widget đặc biệt, đóng vai trò là root widget (widget gốc) cho hầu hết các ứng dụng Flutter. Nó không chỉ là một cái tên, mà nó là cả một "hệ sinh thái" nhỏ bên trong, cung cấp và quản lý những thứ cực kỳ thiết yếu cho một ứng dụng di động hiện đại: Cung cấp Material Design: Đây là lý do chính. MaterialApp "bao bọc" ứng dụng của bạn trong môi trường Material Design, cho phép bạn sử dụng các widget như Scaffold, AppBar, FloatingActionButton... với giao diện và hành vi nhất quán. Không có nó, bạn sẽ phải tự xây từng viên gạch, từng cái nút từ con số 0, mệt lắm! Quản lý Theme: Bạn muốn ứng dụng có màu sắc chủ đạo, font chữ riêng biệt, hay chế độ sáng/tối? MaterialApp cung cấp ThemeData để bạn định nghĩa tất cả những điều đó một cách tập trung. Nó như việc bạn chọn bộ màu sơn và nội thất cho cả tòa nhà vậy. Điều hướng (Navigation) và Routes: Ứng dụng có nhiều màn hình, đúng không? MaterialApp xử lý hệ thống điều hướng giữa các màn hình thông qua routes, onGenerateRoute hay navigatorKey. Nó giống như hệ thống thang máy và hành lang trong tòa nhà, giúp người dùng di chuyển mượt mà giữa các tầng. Locale và Internationalization: Muốn ứng dụng hỗ trợ đa ngôn ngữ? MaterialApp có các thuộc tính để bạn cấu hình ngôn ngữ và khu vực, giúp ứng dụng "giao tiếp" được với người dùng toàn cầu. Overlay và Dialogs: Các hộp thoại, Snackbar, hay các widget nổi lên trên toàn bộ ứng dụng đều được MaterialApp quản lý lớp phủ (overlay) để hiển thị đúng cách. Tóm lại, MaterialApp là nền tảng vững chắc, là "bộ não" điều phối mọi thứ để ứng dụng của bạn không chỉ đẹp mà còn hoạt động trơn tru, có tổ chức. Code Ví Dụ Minh Họa Rõ Ràng Để các bạn thấy rõ hơn "kiến trúc sư trưởng" này làm việc thế nào, chúng ta cùng xem một ví dụ kinh điển: import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); // Bắt đầu ứng dụng với MyApp làm root widget } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Ứng dụng Đếm Của Creyt', // Tên hiển thị khi đa nhiệm (ví dụ: trên Android) debugShowCheckedModeBanner: false, // Tắt cái banner 'DEBUG' ở góc phải trên cùng, trông chuyên nghiệp hơn theme: ThemeData( // Định nghĩa theme chung cho toàn bộ ứng dụng primarySwatch: Colors.deepPurple, // Màu chủ đạo của app (ví dụ: AppBar, FAB) appBarTheme: const AppBarTheme( backgroundColor: Colors.deepPurpleAccent, // Màu riêng cho AppBar foregroundColor: Colors.white, // Màu chữ trên AppBar ), visualDensity: VisualDensity.adaptivePlatformDensity, // Tối ưu giao diện trên các nền tảng khác nhau ), home: const MyHomePage(title: 'Trang Chủ Của Creyt'), // Widget màn hình đầu tiên khi ứng dụng khởi chạy // Ví dụ về Routes (khi ứng dụng có nhiều màn hình) routes: { '/second': (context) => const SecondScreen(), }, // onGenerateRoute: (settings) { ... } // Tùy biến route phức tạp hơn ); } } // Màn hình chính của ứng dụng class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( // Scaffold là một widget cung cấp cấu trúc Material Design cơ bản (AppBar, Body, FAB...) appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( 'Bạn đã nhấn nút này bao nhiêu lần:', ), Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, // Sử dụng theme đã định nghĩa ở MaterialApp ), ElevatedButton( onPressed: () { Navigator.pushNamed(context, '/second'); // Điều hướng đến màn hình thứ hai }, child: const Text('Đi đến màn hình thứ hai'), ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Tăng', child: const Icon(Icons.add), ), ); } } // Màn hình thứ hai class SecondScreen extends StatelessWidget { const SecondScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Màn Hình Thứ Hai'), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.pop(context); // Quay lại màn hình trước đó }, child: const Text('Quay lại'), ), ), ); } } Trong ví dụ trên: MaterialApp là điểm khởi đầu, nó thiết lập môi trường Material Design. title: Tên ứng dụng hiển thị trên trình đa nhiệm của điện thoại. debugShowCheckedModeBanner: Đặt là false để ẩn banner "DEBUG" xấu xí khi chạy ứng dụng. theme: Nơi bạn định nghĩa giao diện chung, màu sắc, font chữ cho toàn bộ ứng dụng. Thay đổi ở đây sẽ ảnh hưởng đến mọi widget con sử dụng Theme.of(context). home: Widget đầu tiên mà người dùng nhìn thấy khi mở ứng dụng. Thường là một Scaffold. routes: Một Map định nghĩa các đường dẫn (paths) và widget tương ứng. Navigator.pushNamed dùng để điều hướng tới chúng. Mẹo Vặt (Best Practices) Từ Creyt Luôn Đặt Nó Ở Gốc: MaterialApp nên là widget cấp cao nhất (hoặc gần nhất) trong cây widget của bạn. Nó là trái tim, là bộ não, đặt nó đúng chỗ thì mọi thứ mới hoạt động. Sử Dụng title Thông Minh: Đừng coi thường thuộc tính title. Nó giúp người dùng dễ dàng nhận diện ứng dụng của bạn khi chuyển đổi giữa các ứng dụng khác trên điện thoại. Tận Dụng theme Tối Đa: Thay vì phải đặt màu sắc, font chữ cho từng widget riêng lẻ, hãy định nghĩa chúng một lần trong ThemeData của MaterialApp. Vừa nhất quán, vừa dễ bảo trì. Đây là bí quyết của những ứng dụng có phong cách riêng biệt. debugShowCheckedModeBanner: false Khi Demo: Khi bạn demo sản phẩm cho khách hàng hoặc quay video, hãy luôn tắt cái banner "DEBUG" đi. Nó làm ứng dụng trông thiếu chuyên nghiệp. Hiểu Rõ home vs routes: home: Dùng cho ứng dụng đơn giản, chỉ có một màn hình chính hoặc màn hình khởi đầu duy nhất. routes & onGenerateRoute: Cần thiết khi ứng dụng của bạn có nhiều màn hình và bạn muốn quản lý việc điều hướng một cách rõ ràng, dễ test và linh hoạt hơn (ví dụ: truyền đối số giữa các màn hình). Sử Dụng builder cho các Widget Cần Thiết Lập Sớm: Đôi khi, bạn cần một widget (như Overlay, Provider cho state management) bao bọc toàn bộ ứng dụng, thậm chí cả home widget. Khi đó, builder của MaterialApp là lựa chọn hoàn hảo để inject các widget này ở cấp độ cao nhất. Các Ứng Dụng/Website Đã Ứng Dụng MaterialApp Hầu hết các ứng dụng Flutter mà bạn thấy trên Google Play Store hay Apple App Store đều sử dụng MaterialApp làm nền tảng, đặc biệt là những ứng dụng muốn có giao diện theo chuẩn Material Design. Google Ads, Google Pay: Đây là những ứng dụng "con cưng" của Google, và việc chúng được xây dựng với Flutter và Material Design là điều hiển nhiên. MaterialApp giúp họ duy trì sự nhất quán về thương hiệu và trải nghiệm. Alibaba, eBay: Các ông lớn thương mại điện tử này cũng đã có phiên bản Flutter cho một số phần của ứng dụng hoặc toàn bộ, tận dụng khả năng xây dựng UI nhanh chóng và theme mạnh mẽ của MaterialApp. Reflectly: Một ứng dụng nhật ký cá nhân nổi tiếng với giao diện đẹp mắt, mượt mà. MaterialApp là xương sống cho việc định hình phong cách độc đáo của nó. The New York Times (một số phần): Cũng là một ví dụ cho thấy Flutter và MaterialApp được tin dùng trong các ứng dụng tin tức lớn, nơi yêu cầu cao về hiệu năng và trải nghiệm người dùng. Những ứng dụng này chứng minh rằng MaterialApp không chỉ là một khái niệm lý thuyết mà là một công cụ thực chiến, mạnh mẽ, giúp các nhà phát triển tạo ra những ứng dụng di động chất lượng cao, có tính thẩm mỹ và hiệu năng tuyệt vời. Nắm vững nó, bạn đã có trong tay chìa khóa để xây dựng những "tòa nhà" ứng dụng vững chắc rồi đó! Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

42 Đọc tiếp

19/03/2026

LongPressDraggable: Nắm Bắt Thế Giới Kéo Thả Trong Flutter

Chào mừng các bạn đến với buổi học hôm nay cùng anh Creyt! Chủ đề của chúng ta là một khái niệm tuy đơn giản về mặt ý tưởng nhưng lại cực kỳ mạnh mẽ trong việc tạo ra trải nghiệm người dùng (UX) sống động: LongPressDraggableState trong Flutter. 1. LongPressDraggableState là gì và để làm gì? Anh em cứ hình dung thế này, trong thế giới lập trình Flutter, cái từ khóa "LongPressDraggableState" nó không phải là một class cụ thể mà anh em có thể new ra đâu nhé. Nó là cái trạng thái hay hành vi được kiểm soát bởi widget LongPressDraggable và các widget liên quan như DragTarget. Nói nôm na, nó chính là toàn bộ quá trình một vật thể được "nhấn giữ lâu" để kích hoạt chế độ kéo, sau đó di chuyển tự do và cuối cùng "thả" vào một vị trí mong muốn. Để làm gì ư? Đơn giản thôi! Anh em muốn người dùng có thể sắp xếp lại danh sách công việc trên một ứng dụng Trello mini của riêng mình? Hay muốn họ kéo một icon ứng dụng từ màn hình chính vào thùng rác? Hoặc thậm chí là kéo thả các item vào giỏ hàng? Chính xác, LongPressDraggable là chìa khóa mở cánh cửa đó. Phép ẩn dụ của Creyt: Hãy tưởng tượng anh em đang chơi một trò chơi xếp hình LEGO. Thay vì chỉ nhấc một viên gạch lên và đặt xuống ngay lập tức (như Draggable thông thường), anh em muốn chọn kỹ một viên gạch bằng cách giữ tay vào nó một lúc (đó là long press), sau đó mới bắt đầu di chuyển nó đến vị trí mới. Cái "trạng thái" của viên gạch khi nó đang được giữ trên tay anh em, lơ lửng giữa không trung, chờ được đặt vào một ô trống nào đó – đó chính là cái tinh thần của LongPressDraggableState. Nó không chỉ là "có đang kéo hay không", mà là "đang được giữ sau một cú nhấn giữ, và đang lơ lửng để tìm nơi hạ cánh". 2. Code Ví Dụ Minh Họa Rõ Ràng Để anh em dễ hình dung, chúng ta sẽ xây dựng một ví dụ đơn giản: kéo thả một hình vuông màu đỏ vào một vùng màu xanh lá cây. Khi thả thành công, vùng màu xanh sẽ thay đổi nội dung. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'LongPressDraggable Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const DragAndDropScreen(), ); } } class DragAndDropScreen extends StatefulWidget { const DragAndDropScreen({super.key}); @override State<DragAndDropScreen> createState() => _DragAndDropScreenState(); } class _DragAndDropScreenState extends State<DragAndDropScreen> { bool _isDropped = false; String _droppedText = 'Thả vật phẩm vào đây!'; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Kéo Thả với LongPressDraggable'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ // Vật phẩm có thể kéo (Draggable item) LongPressDraggable< String>( data: 'Vật phẩm màu đỏ', feedback: Material( color: Colors.red.withOpacity(0.7), elevation: 4.0, child: SizedBox( width: 100.0, height: 100.0, child: Center( child: Text( 'Đang kéo!', style: TextStyle(color: Colors.white, fontSize: 16), ), ), ), ), childWhenDragging: Container( // Widget hiển thị tại vị trí gốc khi đang kéo width: 100.0, height: 100.0, color: Colors.grey.shade300, child: const Center(child: Text('Đã rời đi')), ), child: Container( // Widget gốc width: 100.0, height: 100.0, color: Colors.red, child: const Center(child: Text('Kéo tôi!')), ), onDragStarted: () { print('Bắt đầu kéo!'); }, onDragEnd: (details) { print('Kết thúc kéo tại: ${details.offset}'); }, ), // Vùng có thể nhận vật phẩm (DragTarget) DragTarget< String>( builder: (BuildContext context, List<String?> candidateData, List rejectedData) { return Container( width: 200.0, height: 200.0, color: _isDropped ? Colors.green.shade700 : Colors.green.shade300, child: Center( child: Text( _droppedText, style: TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, ), textAlign: TextAlign.center, ), ), ); }, onWillAccept: (data) { // Chỉ chấp nhận nếu data là 'Vật phẩm màu đỏ' print('Sẽ chấp nhận data: $data'); return data == 'Vật phẩm màu đỏ'; }, onAccept: (data) { // Khi vật phẩm được thả thành công setState(() { _isDropped = true; _droppedText = '$data đã được thả thành công!'; }); print('Đã chấp nhận data: $data'); }, onLeave: (data) { // Khi vật phẩm rời khỏi vùng target mà chưa được thả print('Vật phẩm rời khỏi target: $data'); }, ), ], ), ), ); } } Giải thích Code: LongPressDraggable<String>: Đây là widget cho phép một child của nó có thể được kéo sau một cú nhấn giữ. Kiểu String trong dấu <> chỉ ra kiểu dữ liệu mà nó sẽ mang theo khi được kéo. data: Dữ liệu mà vật phẩm này mang theo. Khi kéo, DragTarget sẽ nhận được dữ liệu này. feedback: Widget sẽ hiển thị dưới ngón tay người dùng trong suốt quá trình kéo. Anh em nên làm cho nó hơi trong suốt hoặc khác biệt so với child gốc để người dùng biết họ đang kéo cái gì. childWhenDragging: Widget sẽ hiển thị tại vị trí gốc của LongPressDraggable khi nó đang được kéo. Thường dùng để tạo hiệu ứng "chỗ trống" hoặc "mờ đi" ở vị trí cũ. child: Widget gốc ban đầu mà người dùng tương tác để kéo. onDragStarted, onDragEnd: Các callback được gọi khi quá trình kéo bắt đầu và kết thúc. DragTarget<String>: Đây là widget định nghĩa một vùng mà các Draggable có thể được thả vào. builder: Hàm xây dựng giao diện của DragTarget. Nó nhận vào context, candidateData (danh sách các vật phẩm đang lơ lửng trên target này), và rejectedData (danh sách các vật phẩm không được chấp nhận). onWillAccept: Callback này được gọi khi một Draggable lơ lửng trên DragTarget. Nó trả về true nếu DragTarget muốn chấp nhận vật phẩm đó, false nếu không. Đây là nơi anh em có thể kiểm tra data của vật phẩm kéo. onAccept: Callback này được gọi khi một Draggable được thả thành công vào DragTarget (tức là onWillAccept trả về true). onLeave: Callback này được gọi khi một Draggable rời khỏi DragTarget mà chưa được thả. 3. Mẹo (Best Practices) để Ghi Nhớ và Dùng Thực Tế Để sử dụng LongPressDraggable như một pro, anh em cần nhớ vài "chiêu" sau: Phản hồi trực quan là Vàng: Luôn cung cấp feedback rõ ràng và khác biệt so với child gốc. Người dùng cần biết họ đang kéo cái gì và cái gì đang chờ ở vị trí cũ. Thêm một chút opacity hoặc elevation cho feedback là một ý hay. Quản lý data thông minh: Dữ liệu mà anh em truyền qua data là cực kỳ quan trọng. Nó giúp DragTarget biết được vật phẩm nào đang được kéo và có nên chấp nhận hay không. Hãy dùng các đối tượng (object) hoặc enum phức tạp hơn String nếu cần để truyền nhiều thông tin. Xử lý các sự kiện kéo thả đầy đủ: Đừng bỏ qua onDragStarted, onDragEnd, onWillAccept, onAccept, onLeave. Mỗi callback này đều là một cơ hội để anh em cập nhật UI hoặc logic nghiệp vụ, tạo ra trải nghiệm mượt mà và thông báo cho người dùng về trạng thái hiện tại. Tối ưu hiệu suất: Nếu anh em có nhiều LongPressDraggable hoặc DragTarget trong một danh sách dài, hãy cẩn thận với việc rebuild quá nhiều widget. Đôi khi, việc sử dụng ValueNotifier hoặc các giải pháp quản lý state cục bộ có thể giúp giảm thiểu rebuild không cần thiết. Kích thước và khoảng cách: Đảm bảo các vùng kéo và thả đủ lớn để người dùng dễ dàng tương tác, đặc biệt trên màn hình cảm ứng. Không ai thích cái cảm giác phải "nhắm" mãi mới trúng đích cả. 4. Ứng Dụng Thực Tế Các Ứng Dụng/Website Đã Ứng Dụng LongPressDraggable và cơ chế kéo thả không phải là thứ gì đó xa lạ đâu anh em. Nó xuất hiện nhan nhản trong cuộc sống số của chúng ta: Trello/Jira và các ứng dụng quản lý dự án: Việc kéo thả các thẻ công việc giữa các cột "To Do", "In Progress", "Done" là một ví dụ kinh điển. Nó giúp người dùng trực quan hóa và sắp xếp công việc cực kỳ hiệu quả. Sắp xếp lại icon ứng dụng trên điện thoại: Anh em nhấn giữ một icon trên màn hình chính của Android hay iOS, sau đó kéo nó đi khắp nơi để sắp xếp lại, tạo thư mục. Đó chính là một dạng của LongPressDraggable đấy! Xây dựng giao diện (UI Builder) dạng kéo thả: Các công cụ cho phép người dùng tự thiết kế trang web hay ứng dụng bằng cách kéo các thành phần (nút, hình ảnh, văn bản) vào một "canvas" cũng sử dụng cơ chế này. Ví dụ như Webflow, Bubble.io. Giỏ hàng trong ứng dụng mua sắm: Một số ứng dụng cho phép người dùng kéo trực tiếp sản phẩm từ danh sách vào biểu tượng giỏ hàng để thêm vào. Tiện lợi phải không? Game ghép hình, game giải đố: Rất nhiều game yêu cầu người chơi kéo các mảnh ghép vào đúng vị trí để hoàn thành bức tranh hoặc giải đố. Hy vọng với bài giảng này, anh em đã "nắm bắt" được LongPressDraggable và có thể tự tin triển khai các tính năng kéo thả "chất như nước cất" trong các dự án Flutter của mình. Nhớ nhé, lập trình không chỉ là code, mà còn là tạo ra trải nghiệm tuyệt vời cho người dùng! Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

47 Đọc tiếp

19/03/2026

Cuộn Tròn Đời Sống: Khám Phá ListWheelScrollView trong Flutter

ListWheelScrollView là gì và để làm gì? Chào các chiến hữu! Hôm nay, chúng ta sẽ đào sâu vào một widget khá 'nghệ' trong Flutter, đó là ListWheelScrollView. Anh em cứ hình dung thế này: Có bao giờ các bạn thấy cái máy đánh bạc (slot machine) hay cái bộ chọn ngày tháng trên điện thoại chưa? Cái mà các mục nó cứ xoay xoay như một cái bánh xe, mục nào được chọn thì nổi bật lên giữa màn hình ấy. Chính xác! ListWheelScrollView sinh ra là để làm cái trò đó đấy! Nói một cách hàn lâm hơn (nhưng vẫn dễ hiểu), ListWheelScrollView là một widget cho phép hiển thị một danh sách các mục (children) theo một góc nhìn 3D, tạo hiệu ứng như thể chúng đang nằm trên một cái bánh xe và bạn đang cuộn để chọn. Nó cực kỳ hữu ích khi bạn cần: Chọn một mục từ một tập hợp nhỏ đến trung bình: Ví dụ như chọn ngày, giờ, số lượng, hoặc một tùy chọn cụ thể nào đó. Tạo hiệu ứng UI độc đáo: Khi bạn muốn giao diện của mình trông 'khác bọt' và thu hút hơn so với các ListView truyền thống. Các thuộc tính quan trọng nhất mà anh em cần nắm là itemExtent (chiều cao của mỗi mục trên bánh xe), children (danh sách các widget con), và onSelectedItemChanged (sự kiện khi mục được chọn thay đổi). Code Ví Dụ Minh Họa Rõ Ràng Để các bạn dễ hình dung, chúng ta sẽ xây dựng một ví dụ đơn giản với ListWheelScrollView để chọn các mục từ một danh sách. Hãy cùng xem code nhé: import 'package:flutter/material.dart'; class ListWheelScrollViewDemo extends StatefulWidget { const ListWheelScrollViewDemo({super.key}); @override State<ListWheelScrollViewDemo> createState() => _ListWheelScrollViewDemoState(); } class _ListWheelScrollViewDemoState extends State<ListWheelScrollViewDemo> { int _selectedItem = 0; final List<String> _items = List<String>.generate(20, (index) => 'Mục số ${index + 1}'); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('ListWheelScrollView Demo'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Mục đã chọn: ${_items[_selectedItem]}', style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold), ), const SizedBox(height: 20), SizedBox( height: 200, // Chiều cao của khu vực cuộn child: ListWheelScrollView( itemExtent: 60, // CHIỀU CAO CỦA MỖI MỤC TRÊN BÁNH XE perspective: 0.007, // Độ cong của bánh xe (thường từ 0.001 đến 0.01) diameterRatio: 1.5, // Tỷ lệ đường kính của bánh xe useMagnifier: true, // Dùng kính lúp để phóng to mục được chọn magnification: 1.2, // Độ phóng đại của kính lúp onSelectedItemChanged: (index) { setState(() { _selectedItem = index; }); }, children: _items.map((item) { return Card( margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8), color: _selectedItem == _items.indexOf(item) ? Colors.blueAccent.shade100 : Colors.grey.shade200, child: Center( child: Text( item, style: TextStyle( fontSize: 20, color: _selectedItem == _items.indexOf(item) ? Colors.white : Colors.black87, fontWeight: _selectedItem == _items.indexOf(item) ? FontWeight.bold : FontWeight.normal, ), ), ), ); }).toList(), ), ), const SizedBox(height: 20), // Để điều khiển cuộn programmatically, bạn sẽ cần FixedExtentScrollController. // Ví dụ: FixedExtentScrollController _controller = FixedExtentScrollController(initialItem: 5); // Sau đó gán controller vào ListWheelScrollView và dùng _controller.animateToItem(...) Text( 'Để cuộn tự động tới một mục, dùng FixedExtentScrollController.', style: TextStyle(fontStyle: FontStyle.italic, color: Colors.grey.shade600), ) ], ), ), ); } } Trong ví dụ trên: Chúng ta có một danh sách _items đơn giản. ListWheelScrollView được đặt trong một SizedBox với chiều cao cố định để nó có không gian hiển thị. itemExtent: 60 định nghĩa mỗi mục sẽ cao 60 logical pixels trên trục cuộn. Đây là điểm mấu chốt! perspective và diameterRatio giúp điều chỉnh hiệu ứng 3D. onSelectedItemChanged cập nhật trạng thái _selectedItem mỗi khi người dùng cuộn và chọn một mục mới. Các Card được dùng làm widget con, và màu sắc của chúng thay đổi tùy theo mục được chọn. Mẹo Vặt (Best Practices) từ Giảng viên Creyt Để dùng ListWheelScrollView một cách hiệu quả và không bị 'ngã ngửa', các bạn nhớ mấy chiêu này: itemExtent là chìa khóa (Key Property): Đây là thuộc tính quan trọng nhất, nó định nghĩa chiều cao của vùng mà mỗi item chiếm trên bánh xe. Không phải là chiều cao thực tế của widget con đâu nhé! Nếu itemExtent quá nhỏ so với widget con, các mục sẽ chồng lên nhau. Nếu quá lớn, chúng sẽ có khoảng trống thừa thãi. Cứ coi như nó là 'kích thước ô' mà mỗi item phải vừa vặn vào. Đừng ham list quá dài: ListWheelScrollView không được tối ưu hóa cho các danh sách vô hạn hoặc cực kỳ dài như ListView.builder. Nó render tất cả các widget con cùng lúc. Do đó, chỉ nên dùng cho các danh sách có số lượng mục vừa phải (dưới vài chục đến vài trăm là hợp lý). Nếu bạn có hàng ngàn mục, hãy nghĩ đến giải pháp khác hoặc chia nhỏ dữ liệu. Dùng FixedExtentScrollController để điều khiển: Nếu bạn muốn cuộn đến một mục cụ thể theo lập trình (ví dụ: khi khởi tạo DatePicker, bạn muốn nó hiển thị ngày hiện tại), hãy dùng FixedExtentScrollController. Nó cung cấp các phương thức như animateToItem() hoặc jumpToItem(). Chơi với perspective và diameterRatio: Hai thuộc tính này giống như 'góc máy quay' và 'độ cong của ống kính' vậy. perspective (thường từ 0.001 đến 0.01) điều chỉnh độ sâu của hiệu ứng 3D, còn diameterRatio (thường từ 0.5 đến 2.0) ảnh hưởng đến kích thước ảo của 'bánh xe'. Cứ thử nghiệm để tìm ra hiệu ứng ưng ý nhất cho UI của mình. Giữ Widget con đơn giản: Để đảm bảo hiệu suất mượt mà, các widget con bên trong ListWheelScrollView nên được giữ càng đơn giản càng tốt. Tránh các widget quá phức tạp hoặc tốn tài nguyên bên trong mỗi item. Ứng dụng Thực Tế của ListWheelScrollView ListWheelScrollView không chỉ là một widget 'làm màu' đâu nhé, nó có rất nhiều ứng dụng thực tế mà các bạn có thể đã gặp hàng ngày: Bộ chọn ngày/giờ (Date/Time Pickers): Đây là ứng dụng phổ biến nhất. Hầu hết các ứng dụng lịch, đặt hẹn đều dùng cơ chế tương tự để chọn ngày, tháng, năm hoặc giờ, phút. Bộ chọn số lượng/đơn vị: Trong các ứng dụng mua sắm, bạn có thể thấy nó được dùng để chọn số lượng sản phẩm. Hoặc trong các ứng dụng đo lường, để chọn đơn vị (kg, lít, mét...). Hiệu ứng 'Slot Machine' hay 'Lucky Wheel': Các ứng dụng game, quay số may mắn thường sử dụng hiệu ứng này để tạo sự kịch tính và thú vị cho người chơi. Bộ chọn tùy chỉnh (Custom Selectors): Bạn có thể dùng nó để chọn font chữ, màu sắc, hoặc bất kỳ tùy chọn nào khác mà bạn muốn mang lại trải nghiệm độc đáo cho người dùng. Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

46 Đọc tiếp

19/03/2026

LimitedBox: Người Giám Hộ Thông Minh Cho Widget Flutter

Chào các em, hôm nay chúng ta sẽ giải mã một anh bạn khá 'đặc biệt' trong thế giới Flutter: LimitedBox. Nghe tên thì có vẻ như anh ta 'giới hạn' cái gì đó, đúng không? Chính xác! Hãy hình dung thế này: Các em có một đứa trẻ (widget con) rất năng động, cứ thích chạy nhảy khắp nơi mà không biết điểm dừng. Bình thường thì bố mẹ (widget cha) sẽ đặt ra ranh giới cho nó, kiểu 'Con chỉ được chơi trong sân này thôi nhé'. Nhưng đôi khi, đứa trẻ này lại được thả vào một không gian 'vô tận' như bãi biển mênh mông (ví dụ: một Row hoặc Column không có giới hạn chiều rộng/cao cụ thể, hoặc trong một ListView mà bản thân nó lại không có giới hạn). Lúc này, đứa trẻ sẽ không biết đâu là điểm dừng, nó cứ cố gắng 'bành trướng' mãi, và thế là ứng dụng của chúng ta sẽ 'khóc thét' vì lỗi 'RenderFlex overflowed' hay 'has unbounded height/width'. LimitedBox chính là 'người giám hộ' đặc biệt, chỉ xuất hiện khi đứa trẻ của chúng ta bị thả vào không gian vô tận đó. Anh ta sẽ nói: 'Này nhóc, nếu không ai đặt ra giới hạn cho mày, thì tao sẽ đặt ra giới hạn tối đa là X nhé!'. Tức là, LimitedBox chỉ áp dụng giới hạn của mình khi và chỉ khi widget con của nó nhận được một ràng buộc vô hạn (unbounded constraint) từ widget cha. Nếu widget cha đã có ràng buộc rõ ràng (ví dụ: 'Mày chỉ được cao 100px thôi'), thì LimitedBox sẽ 'ngồi chơi xơi nước', không làm gì cả. Nó giống như một 'bảo hiểm' vậy, chỉ kích hoạt khi có rủi ro xảy ra. 1. Code Ví Dụ Minh Hoạ Để các em dễ hình dung, chúng ta cùng xem hai trường hợp: Trường hợp 1: LimitedBox phát huy tác dụng (khi widget con nhận ràng buộc vô hạn) Trong ví dụ này, chúng ta đặt một Container vào trong một Row mà không có Expanded hay Flexible. Bình thường, Container sẽ cố gắng mở rộng vô hạn theo chiều ngang, gây lỗi tràn màn hình. LimitedBox sẽ 'can thiệp' và đặt giới hạn tối đa. import 'package:flutter/material.dart'; class LimitedBoxShowcase extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('LimitedBox: Người Giám Hộ Thông Minh')), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( '1. LimitedBox can thiệp khi có ràng buộc vô hạn (như Container trong Row không Expanded):', style: TextStyle(fontWeight: FontWeight.bold), ), SizedBox(height: 10), Container( height: 100, // Chiều cao cố định cho hàng này để dễ nhìn color: Colors.grey[200], child: Row( children: <Widget>[ Container( width: 80, color: Colors.red, child: Center(child: Text('Cố định', style: TextStyle(color: Colors.white))), ), // Đây là nơi LimitedBox phát huy tác dụng: // Khi Container xanh này nhận được ràng buộc chiều rộng vô hạn từ Row, // LimitedBox sẽ áp đặt giới hạn maxWidth là 150px. LimitedBox( maxWidth: 150.0, // Giới hạn tối đa 150px nếu nhận ràng buộc vô hạn child: Container( color: Colors.blue, child: Center(child: Text('Được LimitedBox giới hạn 150px', style: TextStyle(color: Colors.white))), ), ), Container( width: 80, color: Colors.green, child: Center(child: Text('Cố định', style: TextStyle(color: Colors.white))), ), ], ), ), SizedBox(height: 30), Text( '2. LimitedBox 'ngồi chơi' khi đã có giới hạn từ cha (như Expanded):', style: TextStyle(fontWeight: FontWeight.bold), ), SizedBox(height: 10), // Trường hợp 2: LimitedBox bên trong Expanded - nó sẽ không làm gì Container( height: 100, color: Colors.grey[200], child: Row( children: <Widget>[ Container( width: 80, color: Colors.red, child: Center(child: Text('Cố định', style: TextStyle(color: Colors.white))), ), Expanded( // Expanded đã cung cấp giới hạn rõ ràng cho con của nó child: LimitedBox( maxWidth: 50.0, // Giới hạn này sẽ BỊ BỎ QUA maxHeight: 50.0, // Giới hạn này cũng BỊ BỎ QUA child: Container( color: Colors.purple, child: Center(child: Text('Expanded đã có giới hạn, LimitedBox 'ngồi chơi'', style: TextStyle(color: Colors.white))), ), ), ), Container( width: 80, color: Colors.green, child: Center(child: Text('Cố định', style: TextStyle(color: Colors.white))), ), ], ), ), ], ), ), ); } } 2. Mẹo và Thực hành Tốt (Best Practices) Dùng khi nào? LimitedBox là một vị cứu tinh khi bạn biết rằng widget con của mình có khả năng nhận được ràng buộc vô hạn (unbounded constraints) từ widget cha, và bạn muốn đặt một giới hạn 'mặc định' cho nó để tránh lỗi tràn màn hình (overflow). Ví dụ điển hình là một Container không có kích thước cố định, đặt trong một Row hoặc Column mà không được bọc bởi Expanded hay Flexible. Nhớ điều gì? Hãy coi LimitedBox như một 'bảo hiểm cháy nổ'. Nó chỉ kích hoạt và áp dụng giới hạn của mình khi và chỉ khi có nguy cơ xảy ra sự cố (tức là khi widget con nhận ràng buộc vô hạn). Nó không phải là một SizedBox hay Container với width/height cố định, vốn luôn áp đặt giới hạn. Tránh dùng quá mức: Nếu bạn đã sử dụng các widget như Expanded, Flexible, SizedBox, hoặc widget cha đã cung cấp ràng buộc rõ ràng (ví dụ: một Container với width cụ thể), thì LimitedBox là thừa thãi và không có tác dụng. Hiểu rõ cơ chế layout của Flutter (constraints go down, sizes go up) là chìa khóa để biết khi nào cần LimitedBox. 3. Ví Dụ Thực Tế Các Ứng Dụng/Website Đã Ứng Dụng LimitedBox thường được sử dụng trong các tình huống mà bạn muốn kiểm soát kích thước tối đa của một thành phần động, đặc biệt là khi nó nằm trong một môi trường có thể cung cấp ràng buộc vô hạn: Item trong ListView/GridView động: Khi bạn có một danh sách các item mà nội dung của chúng có thể thay đổi kích thước, và ListView đó lại được đặt trong một ngữ cảnh mà nó có thể mở rộng vô hạn (ví dụ: một ListView nằm trong một Row mà không có Expanded). LimitedBox có thể giới hạn kích thước tối đa của mỗi item để tránh tràn màn hình. Widget trong CustomScrollView: Khi bạn tạo các layout phức tạp với CustomScrollView và SliverList/SliverGrid, đôi khi các widget con có thể nhận ràng buộc vô hạn, và LimitedBox sẽ giúp kiểm soát chúng. Nội dung động trong bố cục linh hoạt: Ví dụ, một khối văn bản hoặc hình ảnh mà bạn muốn giới hạn kích thước tối đa của nó trong một Row hoặc Column không có Expanded, nhưng bạn không muốn nó có kích thước cố định mọi lúc. LimitedBox sẽ đặt một 'ngưỡng an toàn' mà không làm ảnh hưởng đến khả năng co giãn của nó trong các trường hợp khác. Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

46 Đọc tiếp

19/03/2026

LayoutId: Phù Thủy Sắp Đặt Bố Cục Độc Lạ Trong Flutter

Chào các chiến hữu code, lại là Creyt đây! Hôm nay chúng ta sẽ cùng nhau giải mã một "bí kíp" ít người biết nhưng cực kỳ lợi hại trong kho tàng Flutter: LayoutId. Nghe cái tên thì có vẻ đơn giản, nhưng tin tôi đi, đây chính là chìa khóa vàng mở ra cánh cửa sáng tạo không giới hạn cho những bố cục "dị biệt", độc nhất vô nhị mà các widget có sẵn như Row, Column, Stack... đành bó tay chịu trói. LayoutId là gì và để làm gì? Vậy LayoutId là cái quái gì? Thực chất, nó không phải là một widget đứng độc lập để tự mình sắp xếp mọi thứ. Hãy hình dung thế này: bạn là đạo diễn của một vở kịch hoành tráng, với hàng tá diễn viên (tức là các widget con của bạn). Bạn muốn mỗi diễn viên đứng đúng vị trí, chiếm đúng không gian trên sân khấu theo kịch bản của riêng bạn. Việc bạn hô 'Ê, thằng mặc áo đỏ, mày đứng ra giữa!' thì nó mơ hồ quá, đúng không? LayoutId chính là cái "thẻ bài" hay "số hiệu lính" mà bạn gán cho từng diễn viên: 'Romeo, đứng đây! Juliet, đứng kia!' Nó là một định danh duy nhất, giúp bạn 'chỉ mặt đặt tên' từng widget con khi làm việc với CustomMultiChildLayout. Khi nào thì cần đến cái thẻ bài này? Đơn giản là khi bạn muốn thoát ly hoàn toàn khỏi mọi quy tắc bố cục có sẵn. Khi bạn muốn tạo ra một cái gì đó hoàn toàn mới, một bố cục mà chỉ có trong đầu bạn, một sự sắp đặt mà Flutter chưa nghĩ ra widget nào để giải quyết. CustomMultiChildLayout sinh ra để làm điều đó, và LayoutId là công cụ để bạn "gọi tên" từng thành phần trong cái bố cục custom ấy, biến ý tưởng điên rồ nhất thành hiện thực trên màn hình. Mỗi CustomMultiChildLayout đều cần một delegate (đại diện), mà cụ thể là một lớp kế thừa từ MultiChildLayoutDelegate. Chính cái delegate này mới là "bộ não" thực sự, nơi bạn viết ra toàn bộ logic để đo đạc (performLayout) và định vị (layoutChild, positionChild) từng widget con dựa vào cái LayoutId mà chúng mang. Nó giống như bạn có một bản thiết kế kiến trúc cực kỳ chi tiết, và delegate là kỹ sư trưởng tài ba đọc bản thiết kế đó để đặt từng viên gạch, từng cánh cửa vào đúng từng milimet vị trí. Không sai một li! Code Ví Dụ Minh Hoạ: Bố Cục "Nền & Overlay" Để các bạn dễ hình dung, chúng ta sẽ tạo một ví dụ đơn giản: một Container làm nền, và một Text làm lớp phủ (overlay) nằm ở góc dưới bên phải, độc lập với dòng chảy bố cục thông thường. Đây là lúc LayoutId và CustomMultiChildLayout tỏa sáng! import 'package:flutter/material.dart'; // 1. Định nghĩa các LayoutId của chúng ta bằng enum – Mẹo của Creyt: Luôn dùng enum! enum CustomLayoutIds { background, // ID cho widget nền overlayText, // ID cho widget văn bản phủ } class CustomLayoutExample extends StatelessWidget { const CustomLayoutExample({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('LayoutId & CustomMultiChildLayout')), body: Center( child: Container( width: 300, // Kích thước cố định cho CustomMultiChildLayout height: 200, color: Colors.grey[200], child: CustomMultiChildLayout( delegate: _MyCustomLayoutDelegate(), // "Kỹ sư trưởng" của chúng ta children: [ // Widget 1: Nền (background) - Gán LayoutId để delegate biết nó là ai LayoutId( id: CustomLayoutIds.background, child: Container( color: Colors.blue.shade100, alignment: Alignment.center, child: const Text('Nền chính', style: TextStyle(fontSize: 20)), ), ), // Widget 2: Văn bản phủ (overlayText) - Gán LayoutId LayoutId( id: CustomLayoutIds.overlayText, child: Container( padding: const EdgeInsets.all(8), decoration: BoxDecoration( color: Colors.black.withOpacity(0.6), borderRadius: BorderRadius.circular(8), ), child: const Text( 'Đây là Overlay!', style: TextStyle(color: Colors.white, fontSize: 16), ), ), ), ], ), ), ), ); } } // 2. Tạo Delegate để xử lý việc đo đạc và định vị các widget con class _MyCustomLayoutDelegate extends MultiChildLayoutDelegate { @override void performLayout(Size size) { // 'size' ở đây là kích thước của CustomMultiChildLayout (Container 300x200) final parentWidth = size.width; final parentHeight = size.height; // 1. Đo đạc và định vị 'background' // background sẽ chiếm toàn bộ không gian của parent if (hasChild(CustomLayoutIds.background)) { final backgroundSize = layoutChild( CustomLayoutIds.background, // Gọi tên widget bằng ID BoxConstraints.tightFor(width: parentWidth, height: parentHeight), // Cho nó chiếm full ); positionChild(CustomLayoutIds.background, Offset.zero); // Đặt ở góc (0,0) // print('Background size: $backgroundSize'); // Dùng để debug nếu cần } // 2. Đo đạc và định vị 'overlayText' // overlayText sẽ có kích thước tự nhiên của nó (loose constraints) if (hasChild(CustomLayoutIds.overlayText)) { final overlayTextSize = layoutChild( CustomLayoutIds.overlayText, // Gọi tên widget bằng ID BoxConstraints.loose(size), // Cho phép nó tự quyết định kích thước tối đa trong vùng 'size' ); // Định vị overlayText ở góc dưới bên phải, cách lề 10px final x = parentWidth - overlayTextSize.width - 10; final y = parentHeight - overlayTextSize.height - 10; positionChild(CustomLayoutIds.overlayText, Offset(x, y)); // print('Overlay Text size: $overlayTextSize'); // Dùng để debug nếu cần } } @override bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) { // Đây là cái 'công tắc thông minh' của bạn. // Trả về true nếu bố cục cần được vẽ lại khi delegate thay đổi // (ví dụ: có các tham số đầu vào cho delegate thay đổi). // Trong ví dụ đơn giản này, ta luôn trả về false vì không có tham số nào thay đổi. return false; } } // Để chạy ví dụ này, bạn có thể đặt nó vào hàm main như sau: // void main() { // runApp(const MaterialApp(home: CustomLayoutExample())); // } Mẹo của Creyt để không biến 'thẻ bài' thành 'thẻ bài chết' Dùng enum cho id: Đừng dại dột mà dùng String hay int cho id nhé các bạn. enum là lựa chọn vàng. Nó không chỉ giúp code của bạn rõ ràng như pha lê, tránh lỗi chính tả ngớ ngẩn (kiểu 'overlayText' thành 'overLayText'), mà còn dễ dàng refactor khi bạn muốn đổi tên. Coi nó như danh sách các vai trò đã được định danh rõ ràng trong kịch bản của bạn. shouldRelayout: Đây là cái 'công tắc thông minh' trong delegate của bạn. Nếu bạn có các tham số đầu vào cho delegate, hãy so sánh chúng trong shouldRelayout để Flutter biết khi nào cần tính toán lại bố cục. Trả về true khi có sự thay đổi đáng kể, và false khi không có gì thay đổi. Đừng để nó luôn true nếu không cần, vì bạn sẽ biến ứng dụng của mình thành 'cua bò' đấy – hiệu suất sẽ khéo 'đổ đèo' nhanh chóng. Hiểu rõ BoxConstraints: Khi gọi layoutChild, bạn đang nói cho widget con biết nó có bao nhiêu không gian để 'chơi đùa'. BoxConstraints.tightFor, BoxConstraints.loose, BoxConstraints.expand... mỗi loại có một ý nghĩa riêng. Nắm vững chúng là chìa khóa để điều khiển kích thước widget con theo ý muốn, không hơn không kém. Khi nào thì 'vác súng thần công' ra bắn?: CustomMultiChildLayout và LayoutId là 'súng thần công' cho những bố cục cực kỳ phức tạp, độc đáo, hoặc khi bạn cần tối ưu hóa hiệu suất layout ở mức độ rất thấp. Đừng lôi nó ra bắn chim sẻ (những bố cục đơn giản đã có sẵn Row, Column, Stack lo liệu). Dùng đúng công cụ cho đúng việc, đó mới là coder thông thái. Ứng dụng thực tế: Ai đã dùng "bí kíp" này? LayoutId kết hợp với CustomMultiChildLayout là công cụ mạnh mẽ dành cho những tình huống mà các widget bố cục tiêu chuẩn của Flutter không thể đáp ứng, hoặc khi bạn cần kiểm soát layout ở cấp độ cực kỳ chi tiết. Một số ví dụ thực tế mà bạn có thể thấy hoặc tự tay xây dựng: Dashboard 'siêu cấp': Tưởng tượng các dashboard hiển thị hàng tá biểu đồ, widget thông tin với kích thước và vị trí linh hoạt, đôi khi chồng lấn lên nhau theo những logic riêng mà không một Stack nào giải quyết nổi. LayoutId giúp bạn định danh từng biểu đồ, từng thẻ thông tin để delegate sắp đặt chúng hoàn hảo. Ứng dụng chỉnh sửa ảnh/video 'nhà nghề': Các lớp (layer) văn bản, sticker, hiệu ứng cần được đặt chính xác từng pixel trên một khung hình. Người dùng có thể kéo thả, thay đổi kích thước chúng một cách tự do, và LayoutId giúp bạn 'ghi nhớ' và điều phối vị trí của từng layer đó khi người dùng tương tác. Biểu đồ động 'thế hệ mới': Các loại biểu đồ nâng cao nơi các nhãn, chú thích, điểm dữ liệu cần được căn chỉnh một cách tinh vi, tự động 'né tránh' nhau hoặc bám sát một đường cong nào đó mà không làm ảnh hưởng đến hiệu suất vẽ lại. Delegate sẽ dùng LayoutId để 'nhận diện' từng phần tử và tính toán vị trí. UI tương tác game 'đỉnh cao': Các yếu tố HUD (Head-Up Display) trong game, như thanh máu, bản đồ nhỏ, thông báo, cần được định vị chính xác tương đối với các yếu tố khác trên màn hình, và đôi khi chúng còn tự động ẩn hiện, di chuyển theo kịch bản game. LayoutId là chìa khóa để quản lý sự phức tạp này. Đó, các bạn thấy đấy, LayoutId không chỉ là một cái tên, nó là một "công cụ định danh quyền năng" mở ra cánh cửa cho những bố cục độc đáo và hiệu quả trong Flutter. Hãy thực hành, thử nghiệm và đừng ngại sáng tạo nhé! Hẹn gặp lại trong bài học tiếp theo! Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

66 Đọc tiếp

19/03/2026

KeyboardActions: Kềm Cương Bàn Phím Flutter - Creyt Dẫn Lối

KeyboardActions: Kềm Cương Bàn Phím Flutter - Creyt Dẫn Lối Chào các đồng chí lập trình viên tương lai! Hôm nay, thầy Creyt sẽ dẫn dắt các bạn vào một chủ đề tưởng chừng nhỏ nhưng lại cực kỳ quan trọng trong việc 'đánh bóng' trải nghiệm người dùng trên app Flutter của mình: KeyboardActions. Hãy hình dung thế này: cái bàn phím ảo trên điện thoại của chúng ta đôi khi giống như một con ngựa hoang vậy. Nó nhảy ra bất thình lình, che mất tầm nhìn, và đôi khi còn 'làm khó' người dùng khi họ muốn di chuyển giữa các ô nhập liệu. KeyboardActions chính là bộ 'kềm cương' thần thánh, giúp chúng ta thuần hóa con ngựa này, điều khiển nó theo ý muốn, và biến quá trình nhập liệu thành một trải nghiệm mượt mà, chuyên nghiệp. Nói một cách hàn lâm hơn, KeyboardActions là một thư viện Flutter cung cấp các tiện ích để quản lý hành vi của bàn phím ảo, đặc biệt là khi tương tác với TextField và TextFormField. Mục tiêu chính là cải thiện khả năng điều hướng và hiển thị nội dung khi bàn phím xuất hiện. Nó sinh ra để giải quyết những phiền toái kinh điển: bàn phím che mất trường nhập liệu đang hoạt động, người dùng không biết làm thế nào để chuyển sang trường tiếp theo hoặc đóng bàn phím. Với KeyboardActions, chúng ta có thể thêm các nút điều hướng như 'Tiếp theo' (Next), 'Hoàn thành' (Done) hoặc thậm chí là các hành động tùy chỉnh ngay trên thanh công cụ của bàn phím, đảm bảo mọi thứ luôn trong tầm kiểm soát và tầm nhìn của người dùng. Code Ví Dụ Minh Họa: Thuần Hóa Ngựa Hoang Lý thuyết suông thì khô khan lắm, phải thực hành mới 'thấm' được. Nào, chúng ta cùng xây dựng một ví dụ đơn giản với vài trường nhập liệu để xem KeyboardActions hoạt động như thế nào nhé. Bước 1: Thêm dependency vào pubspec.yaml Đầu tiên, chúng ta cần thêm thư viện keyboard_actions vào dự án của mình. Hãy mở file pubspec.yaml và thêm dòng sau vào phần dependencies: dependencies: flutter: sdk: flutter keyboard_actions: ^4.2.0 # Hoặc phiên bản mới nhất tại thời điểm bạn đọc bài viết này Sau đó, chạy flutter pub get để tải thư viện về. Bước 2: Cài đặt và sử dụng KeyboardActions Bây giờ, chúng ta sẽ tạo một màn hình đơn giản với vài TextField và tích hợp KeyboardActions vào đó. Hãy chú ý cách chúng ta sử dụng FocusNode cho từng trường nhập liệu và cấu hình KeyboardActionsConfig. import 'package:flutter/material.dart'; import 'package:keyboard_actions/keyboard_actions.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'KeyboardActions Demo của Thầy Creyt', theme: ThemeData(primarySwatch: Colors.blue), home: const KeyboardActionsScreen(), ); } } class KeyboardActionsScreen extends StatefulWidget { const KeyboardActionsScreen({super.key}); @override State<KeyboardActionsScreen> createState() => _KeyboardActionsScreenState(); } class _KeyboardActionsScreenState extends State<KeyboardActionsScreen> { // Khai báo FocusNode cho mỗi TextField. Đây là 'dây cương' cho từng trường. final FocusNode _node1 = FocusNode(); final FocusNode _node2 = FocusNode(); final FocusNode _node3 = FocusNode(); final FocusNode _node4 = FocusNode(); /// Tạo cấu hình cho KeyboardActions. Đây là 'bộ kềm cương' tổng thể. KeyboardActionsConfig _buildConfig(BuildContext context) { return KeyboardActionsConfig( keyboardActionsPlatform: KeyboardActionsPlatform.ALL, // Áp dụng cho mọi nền tảng (iOS/Android) keyboardBarColor: Colors.grey[200], // Màu nền của thanh công cụ bàn phím nextFocus: true, // Cho phép tự động chuyển focus khi nhấn nút 'Next' actions: [ // Cấu hình cho trường nhập liệu đầu tiên (_node1) KeyboardActionsItem( focusNode: _node1, // Thêm các nút tùy chỉnh vào thanh công cụ. Ở đây là nút 'Đóng'. toolbarButtons: [ (node) { return GestureDetector( onTap: () => node.unfocus(), // Khi nhấn, đóng bàn phím child: const Padding( padding: EdgeInsets.all(8.0), child: Text('Đóng', style: TextStyle(fontWeight: FontWeight.bold)), ), ); } ], ), // Cấu hình cho trường nhập liệu thứ hai (_node2). Mặc định sẽ có nút 'Next'/'Done'. KeyboardActionsItem(focusNode: _node2), // Cấu hình cho trường nhập liệu thứ ba (_node3) với một nút xử lý tùy chỉnh. KeyboardActionsItem(focusNode: _node3, toolbarButtons: [ (node) { return GestureDetector( onTap: () { // Thầy Creyt 'phím' cho các bạn một mẹo: Nút này có thể làm bất cứ điều gì! ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Nút "Xử lý" tùy chỉnh đã được nhấn!')) ); node.unfocus(); // Đóng bàn phím sau khi thực hiện hành động }, child: const Padding( padding: EdgeInsets.all(8.0), child: Text('Xử lý', style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)), ), ); }, ]), // Cấu hình cho trường nhập liệu thứ tư (_node4). Chỉ hiển thị nút 'Done'. KeyboardActionsItem(focusNode: _node4, displayDoneButton: true), ], ); } @override void dispose() { // Luôn nhớ 'giải phóng' FocusNode khi Widget bị hủy để tránh rò rỉ bộ nhớ. Đây là nguyên tắc vàng! _node1.dispose(); _node2.dispose(); _node3.dispose(); _node4.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('KeyboardActions Demo')), body: KeyboardActions( config: _buildConfig(context), // Truyền cấu hình đã tạo vào đây child: Padding( padding: const EdgeInsets.all(16.0), child: ListView( // Dùng ListView để đảm bảo các trường nhập liệu có thể cuộn được nếu bàn phím che mất children: <Widget>[ const Text('Trường 1 (Nút đóng tùy chỉnh):'), TextField( focusNode: _node1, decoration: const InputDecoration(hintText: 'Nhập tên của bạn'), ), const SizedBox(height: 20), const Text('Trường 2 (Mặc định Next/Done):'), TextField( focusNode: _node2, decoration: const InputDecoration(hintText: 'Nhập email của bạn'), keyboardType: TextInputType.emailAddress, ), const SizedBox(height: 20), const Text('Trường 3 (Nút xử lý tùy chỉnh):'), TextField( focusNode: _node3, decoration: const InputDecoration(hintText: 'Nhập số điện thoại'), keyboardType: TextInputType.phone, ), const SizedBox(height: 20), const Text('Trường 4 (Chỉ nút Done, có nhiều dòng):'), TextField( focusNode: _node4, decoration: const InputDecoration(hintText: 'Nhập địa chỉ'), maxLines: 3, // Trường này có thể nhập nhiều dòng ), const SizedBox(height: 100), // Thêm khoảng trống để thấy rõ việc cuộn lên khi bàn phím xuất hiện ElevatedButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Form đã được gửi!')) ); }, child: const Text('Gửi Form'), ), ], ), ), ), ); } } Trong ví dụ trên, khi bạn nhấn vào từng TextField, bạn sẽ thấy một thanh công cụ xuất hiện phía trên bàn phím. Thanh này sẽ có các nút 'Next'/'Done' mặc định hoặc các nút tùy chỉnh mà chúng ta đã cấu hình, giúp việc điều hướng và hoàn tất nhập liệu trở nên dễ dàng hơn bao giờ hết. Mẹo Vặt & Best Practices Từ Thầy Creyt: "Đi Ngang" Không "Đi Tắt" Để sử dụng KeyboardActions một cách hiệu quả nhất, hãy ghi nhớ những lời khuyên "xương máu" này từ thầy Creyt: Luôn dùng cho form nhiều trường: Nếu app của bạn có form đăng nhập, đăng ký, thanh toán, hay bất kỳ form nào có từ hai trường nhập liệu trở lên, thì KeyboardActions không phải là 'có thể dùng', mà là 'phải dùng'! Nó nâng tầm trải nghiệm người dùng (UX) lên một bậc, giúp người dùng cảm thấy ứng dụng của bạn thật sự 'nghĩ cho họ', chứ không phải tự vật lộn với bàn phím. Tận dụng FocusNode: Mỗi TextField cần một FocusNode riêng để KeyboardActions biết chính xác nó đang 'kềm cương' trường nào. Hãy nhớ dispose() chúng khi State bị hủy để tránh rò rỉ bộ nhớ. Đây là nguyên tắc vàng của người lập trình chuyên nghiệp, đừng bao giờ quên! Đừng ngại nút tùy chỉnh: Tính năng toolbarButtons là một kho báu. Bạn có thể thêm nút 'Lưu', 'Tính toán', 'Thêm hàng' hoặc bất kỳ hành động nào phù hợp với ngữ cảnh. Nhưng nhớ nhé, đừng lạm dụng, hãy giữ cho thanh công cụ gọn gàng và dễ hiểu để không làm người dùng bối rối. Kiểm tra trên nhiều thiết bị: Bàn phím ảo có thể 'hành xử' khác nhau trên các thiết bị Android và iOS, hoặc giữa các kích thước màn hình. Luôn luôn kiểm tra kỹ lưỡng để đảm bảo trải nghiệm nhất quán và không có "sự cố bất ngờ" nào xảy ra. Kết hợp với ListView hoặc SingleChildScrollView: Để đảm bảo các trường nhập liệu không bị bàn phím che khuất và có thể cuộn lên khi cần, hãy đặt chúng trong một ListView hoặc SingleChildScrollView. KeyboardActions sẽ tự động cuộn đến trường đang focus nếu nó bị che. Đây là combo "bất bại" để đảm bảo mọi thứ luôn trong tầm mắt người dùng. Ứng Dụng Thực Tế: "Ai Đã Dùng Nó?" Hầu hết các ứng dụng di động mà bạn đang dùng hàng ngày, đặc biệt là những ứng dụng yêu cầu nhập liệu nhiều, đều có những cơ chế tương tự KeyboardActions (hoặc chính nó) để tối ưu trải nghiệm. Dưới đây là một vài ví dụ điển hình: Ứng dụng ngân hàng/thanh toán: Khi bạn nhập số tài khoản, số tiền, mã OTP... việc có các nút 'Tiếp theo' hay 'Xong' trên bàn phím giúp quá trình này diễn ra nhanh chóng, ít sai sót hơn. Bạn có muốn nhập số thẻ tín dụng mà bàn phím cứ che mất ô nhập liệu không? Chắc chắn là không rồi! Các ngân hàng lớn rất chú trọng UX để đảm bảo độ tin cậy và sự hài lòng. Ứng dụng mạng xã hội/chat: Mặc dù không trực tiếp là KeyboardActions nhưng các ứng dụng như Facebook Messenger, Zalo, WhatsApp cũng phải xử lý bàn phím rất khéo léo để khung chat không bị che, và có các nút gửi/biểu tượng cảm xúc tiện lợi. Việc này giúp cuộc trò chuyện không bị gián đoạn. Ứng dụng ghi chú/quản lý công việc: Khi bạn tạo một ghi chú mới, nhập tiêu đề, nội dung, ngày tháng... KeyboardActions giúp bạn di chuyển mượt mà giữa các trường, đảm bảo bạn có thể tập trung vào nội dung thay vì "đánh vật" với bàn phím. Các trang web thương mại điện tử (trên mobile): Quá trình thanh toán, điền thông tin giao hàng là những ví dụ điển hình. KeyboardActions giúp người dùng hoàn tất đơn hàng một cách thuận tiện nhất, giảm tỷ lệ bỏ giỏ hàng - một yếu tố cực kỳ quan trọng đối với các doanh nghiệp. Vậy đấy các đồng chí, KeyboardActions không chỉ là một thư viện, nó là một 'người hùng thầm lặng' giúp chúng ta xây dựng những ứng dụng thân thiện, chuyên nghiệp hơn. Hãy nắm vững nó và biến những 'con ngựa hoang' bàn phím thành những 'chiến mã' đắc lực phục vụ người dùng nhé! Hẹn gặp lại trong bài học tiếp theo! Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

40 Đọc tiếp

19/03/2026

KeyboardActions: Chỉ huy bàn phím ảo trong Flutter

Chào mừng các bạn đến với buổi học hôm nay! Anh Creyt sẽ giải mã một khái niệm tuy nhỏ mà có võ, giúp trải nghiệm người dùng của ứng dụng Flutter của bạn 'mượt như bơ'. Đó chính là KeyboardActions. 1. KeyboardActions là gì và để làm gì? Anh em cứ hình dung thế này: cái bàn phím ảo trên điện thoại của mình ấy, đôi khi nó như một con ngựa hoang, xuất hiện bất thình lình, che khuất nửa màn hình, và nhiều lúc mình ước gì có cái dây cương để điều khiển nó. KeyboardActions chính là cái "dây cương" cao cấp đó, một hệ thống điều khiển tinh vi hay đúng hơn là một "bảng điều khiển" (dashboard) cho cái bàn phím ảo trong ứng dụng Flutter của bạn. Mục đích chính của nó là gì? Đơn giản là nó cho phép bạn thêm một thanh công cụ tùy chỉnh (toolbar) nằm ngay phía trên bàn phím, cung cấp cho người dùng các hành động nhanh gọn lẹ như "Tiếp theo", "Quay lại", "Xong", hoặc thậm chí là các nút tùy chỉnh riêng biệt cho từng trường nhập liệu của bạn. Ngoài ra, nó còn là "người quản gia" tận tụy, giúp quản lý việc chuyển đổi tiêu điểm (focus) giữa các TextField một cách tự động và liền mạch, biến những form nhập liệu dài ngoằng trở nên thân thiện hơn bao giờ hết. Thử nghĩ mà xem, nếu bạn đang điền một tờ đơn xin việc dài dằng dặc trên điện thoại. Mỗi lần xong một ô, bạn phải tự kéo màn hình lên, tự tìm ô tiếp theo, rồi lại tự ẩn bàn phím khi xong... ôi thôi, mệt mỏi! KeyboardActions như một người quản gia chuyên nghiệp, tự động dẫn bạn đến ô kế tiếp, và đưa ra các nút "Xong" hay "Tiếp theo" ngay trên bàn phím để bạn không phải với tay lên màn hình nữa. Nó biến cái trải nghiệm "cà rề cà rề" thành "mượt mà như bơ", đúng chuẩn UX hiện đại. 2. Code Ví Dụ Minh Họa Để sử dụng keyboard_actions, đầu tiên bạn cần thêm nó vào file pubspec.yaml: dependencies: flutter: sdk: flutter keyboard_actions: ^version_mới_nhất # Ví dụ: ^4.2.0 Sau đó, hãy xem ví dụ dưới đây về cách tích hợp KeyboardActions vào một form đơn giản với nhiều trường nhập liệu: import 'package:flutter/material.dart'; import 'package:keyboard_actions/keyboard_actions.dart'; class KeyboardActionsDemo extends StatefulWidget { const KeyboardActionsDemo({super.key}); @override State<KeyboardActionsDemo> createState() => _KeyboardActionsDemoState(); } class _KeyboardActionsDemoState extends State<KeyboardActionsDemo> { // 1. Khai báo FocusNode cho mỗi TextField bạn muốn quản lý final FocusNode _nameFocus = FocusNode(); final FocusNode _emailFocus = FocusNode(); final FocusNode _phoneFocus = FocusNode(); final FocusNode _addressFocus = FocusNode(); // 2. Cấu hình KeyboardActionsConfig KeyboardActionsConfig _buildConfig(BuildContext context) { return KeyboardActionsConfig( keyboardActionsPlatform: KeyboardActionsPlatform.ALL, // Áp dụng cho mọi nền tảng (iOS, Android) keyboardBarColor: Colors.grey[200], // Màu nền của thanh công cụ trên bàn phím nextFocus: true, // Cho phép nút 'Next'/mũi tên chuyển focus tự động actions: [ // Item cho trường Họ và Tên KeyboardActionsItem( focusNode: _nameFocus, toolbarButtons: [ (node) { return GestureDetector( onTap: () => node.nextFocus(), // Chuyển đến focus tiếp theo child: const Padding( padding: EdgeInsets.all(8.0), child: Text("Tiếp tục", style: TextStyle(fontWeight: FontWeight.bold)), ), ); } ], ), // Item cho trường Email (sử dụng nút Next mặc định) KeyboardActionsItem( focusNode: _emailFocus, ), // Item cho trường Số điện thoại (tùy chỉnh nút 'Xong') KeyboardActionsItem( focusNode: _phoneFocus, displayArrows: false, // Không hiển thị mũi tên Previous/Next mặc định toolbarButtons: [ (node) { return GestureDetector( onTap: () => node.unfocus(), // Ẩn bàn phím child: const Padding( padding: EdgeInsets.all(8.0), child: Text("Xong", style: TextStyle(fontWeight: FontWeight.bold)), ), ); } ], ), // Item cho trường Địa chỉ (tùy chỉnh nút 'Gửi đi') KeyboardActionsItem( focusNode: _addressFocus, toolbarButtons: [ (node) { return GestureDetector( onTap: () { // Xử lý logic khi nhấn 'Gửi đi' ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Dữ liệu địa chỉ đã được gửi!')), // Thông báo nhỏ ); node.unfocus(); // Ẩn bàn phím sau khi gửi }, child: const Padding( padding: EdgeInsets.all(8.0), child: Text("Gửi đi", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue)), ), ); } ], ), ], ); } @override void dispose() { // 3. Luôn dispose FocusNode khi Widget bị loại bỏ để tránh rò rỉ bộ nhớ _nameFocus.dispose(); _emailFocus.dispose(); _phoneFocus.dispose(); _addressFocus.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Demo KeyboardActions')), // 4. Bọc phần nội dung chứa TextField bằng KeyboardActions body: KeyboardActions( config: _buildConfig(context), child: ListView( // Dùng ListView để có thể cuộn khi bàn phím hiện lên padding: const EdgeInsets.all(16.0), children: [ const Text( 'Điền thông tin cá nhân:', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), ), const SizedBox(height: 20), TextField( focusNode: _nameFocus, decoration: const InputDecoration( labelText: 'Họ và Tên', border: OutlineInputBorder(), ), textInputAction: TextInputAction.next, // Gợi ý hành động 'Next' cho bàn phím mặc định onSubmitted: (_) => _emailFocus.requestFocus(), // Chuyển focus khi nhấn Enter trên bàn phím ), const SizedBox(height: 16), TextField( focusNode: _emailFocus, decoration: const InputDecoration( labelText: 'Email', border: OutlineInputBorder(), ), keyboardType: TextInputType.emailAddress, textInputAction: TextInputAction.next, onSubmitted: (_) => _phoneFocus.requestFocus(), ), const SizedBox(height: 16), TextField( focusNode: _phoneFocus, decoration: const InputDecoration( labelText: 'Số điện thoại', border: OutlineInputBorder(), ), keyboardType: TextInputType.phone, textInputAction: TextInputAction.next, onSubmitted: (_) => _addressFocus.requestFocus(), ), const SizedBox(height: 16), TextField( focusNode: _addressFocus, decoration: const InputDecoration( labelText: 'Địa chỉ', border: OutlineInputBorder(), ), maxLines: 3, textInputAction: TextInputAction.done, // Hành động cuối cùng là 'Done' onSubmitted: (_) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Dữ liệu đã được gửi!')), // Thông báo nhỏ ); _addressFocus.unfocus(); // Ẩn bàn phím }, ), const SizedBox(height: 300), // Thêm khoảng trống để dễ dàng test cuộn khi bàn phím hiện ElevatedButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Form đã được submit hoàn tất!')), // Thông báo nhỏ ); // Ẩn tất cả bàn phím khi submit form _nameFocus.unfocus(); _emailFocus.unfocus(); _phoneFocus.unfocus(); _addressFocus.unfocus(); }, child: const Text('Submit Form'), ), ], ), ), ); } } 3. Mẹo và Best Practices từ Giảng viên Creyt FocusNode là chìa khóa (Key): Luôn nhớ khai báo FocusNode cho mỗi TextField mà bạn muốn quản lý và quan trọng hơn cả là phải dispose() chúng khi Widget không còn được sử dụng nữa. FocusNode như là "điểm neo" để KeyboardActions biết phải điều khiển cái TextField nào. Quên dispose() là rò rỉ bộ nhớ đấy, sinh viên Harvard không ai làm thế! Bọc đúng chỗ: Đừng bọc toàn bộ MaterialApp bằng KeyboardActions. Hãy bọc Scaffold hoặc phần body của Scaffold chứa các TextField của bạn. Nó giống như việc bạn đặt cái bảng điều khiển lên đúng cái máy mà bạn muốn lái, chứ không phải đặt lên cả cái nhà máy sản xuất xe. Tùy chỉnh linh hoạt với toolbarButtons: Đừng ngại ngần sử dụng toolbarButtons trong KeyboardActionsItem để tạo ra các nút tùy chỉnh. "Xong", "Tiếp theo", "Tìm kiếm", "Tính toán"... tùy ý bạn. Đây là lúc bạn thể hiện sự tinh tế trong thiết kế trải nghiệm người dùng (UX) của mình. Kết hợp textInputAction: Hãy tận dụng thuộc tính textInputAction của TextField (ví dụ: TextInputAction.next, TextInputAction.done, TextInputAction.search). Nó giúp bàn phím ảo hiển thị nút hành động mặc định phù hợp với ngữ cảnh, bổ trợ rất tốt cho KeyboardActions. Test trên thiết bị thật: Mặc dù emulator (trình giả lập) rất tiện lợi, nhưng trải nghiệm bàn phím ảo trên thiết bị thật đôi khi có những "cú lừa" nho nhỏ về layout hay animation. Luôn test trên thiết bị thật để đảm bảo "mượt như bơ" đúng nghĩa. 4. Ứng dụng thực tế KeyboardActions (hoặc các kỹ thuật quản lý bàn phím tương tự) không phải là một tính năng "sáng tạo đột phá" mà là một "tiêu chuẩn vàng" cho UX hiện đại. Hầu hết các ứng dụng có form nhập liệu phức tạp đều cần đến kiểu quản lý bàn phím như thế này: Ứng dụng ngân hàng/tài chính: Khi bạn nhập số tài khoản, số tiền, mật khẩu... việc có nút "Tiếp theo" để chuyển nhanh giữa các trường, hoặc nút "Xong" để ẩn bàn phím và xác nhận là cực kỳ quan trọng để đảm bảo tính chính xác và an toàn. Ứng dụng thương mại điện tử (e-commerce): Các form đặt hàng, form thanh toán, form đăng ký thông tin giao hàng... Hãy nghĩ đến Shopee, Lazada, Tiki. Bạn không muốn người dùng phải vật lộn với bàn phím khi đang muốn mua hàng đâu. Ứng dụng mạng xã hội: Đăng bài viết, bình luận, nhập thông tin cá nhân. Ví dụ như Facebook, Instagram, LinkedIn. Khi bạn gõ một caption dài, việc có nút "Xong" tiện lợi ngay trên bàn phím thì còn gì bằng. Các ứng dụng productivity/ghi chú: Như Google Keep, Evernote. Khi bạn soạn một ghi chú dài, việc điều khiển bàn phím để chuyển dòng, kết thúc nhập liệu một cách nhanh chóng là rất cần thiết. Tóm lại, bất cứ đâu có nhiều TextField nằm cạnh nhau và yêu cầu trải nghiệm nhập liệu liền mạch, KeyboardActions đều là "vị cứu tinh". Nó nâng tầm trải nghiệm người dùng từ mức "chấp nhận được" lên "tuyệt vời". Hy vọng bài giảng này đã giúp các bạn nắm rõ về KeyboardActions và cách ứng dụng nó một cách hiệu quả. Hẹn gặp lại trong các bài học tiếp theo! Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

43 Đọc tiếp

19/03/2026

Bí Mật Điều Khiển 'Kính Lúp' Flutter: Sức Mạnh của InteractiveViewerState

Hãy tưởng tượng bạn đang cầm trên tay một chiếc kính lúp vạn năng, có thể phóng to, thu nhỏ, kéo qua kéo lại bất kỳ tấm ảnh hay bản đồ nào. Trong Flutter, cái "kính lúp" đó chính là InteractiveViewer – một widget siêu tiện lợi giúp bạn làm điều đó một cách dễ dàng. Nó nhận một child (ví dụ: một Image, một Container chứa nội dung phức tạp) và biến nó thành một khu vực có thể tương tác: zoom, pan (kéo), thậm chí là rotate (xoay). InteractiveViewerState là gì? Để làm gì? Vậy còn InteractiveViewerState? À ha, đây chính là cái bảng điều khiển trung tâm, hay nói cách khác là trái tim của chiếc kính lúp thần kỳ đó. InteractiveViewerState là đối tượng quản lý toàn bộ trạng thái hiện tại của InteractiveViewer. Nó biết được: Bạn đang phóng to đến mức nào (scale factor)? Bạn đang kéo nội dung dịch chuyển bao nhiêu (pan offset)? Và tất cả những thông tin về ma trận biến đổi (transformation matrix) đang được áp dụng lên child của bạn. Nói một cách đơn giản, nếu InteractiveViewer là cái xe bus cho phép người dùng tự do lái (kéo, zoom), thì InteractiveViewerState chính là cái bảng đồng hồ hiển thị tốc độ, vị trí, và tất cả thông số hiện hành của chuyến đi đó. Vậy tại sao chúng ta cần "đụng chạm" vào nó? Thường thì người dùng tự do tương tác là đủ rồi. Nhưng đôi khi, bạn muốn trở thành "người điều khiển từ xa", muốn lập trình để: Reset lại chế độ xem về trạng thái ban đầu (ví dụ: nút "Đặt lại"). Tự động phóng to vào một điểm cụ thể trên bản đồ khi người dùng nhấn vào. Hoặc đơn giản là muốn biết hiện tại người dùng đang xem ở mức độ phóng to nào để điều chỉnh UI khác. Đây chính là lúc InteractiveViewerState phát huy tác dụng. Mặc dù cách tốt nhất để kiểm soát InteractiveViewer từ bên ngoài là thông qua TransformationController, nhưng InteractiveViewerState vẫn là nơi chứa và phản ánh trạng thái đó, và cung cấp một số phương thức tiện ích. Code Ví Dụ Minh Hoạ: "Người Lái Xe Bus" và "Bảng Điều Khiển" Để điều khiển chiếc kính lúp này một cách có chủ đích, chúng ta sẽ cần một "người lái xe bus" riêng, đó chính là TransformationController. Và chiếc TransformationController này sẽ làm việc chặt chẽ với InteractiveViewerState. Hãy cùng xem ví dụ đơn giản sau: Chúng ta có một tấm ảnh, và một nút bấm để "Đặt lại" chế độ xem về ban đầu. import 'package:flutter/material.dart'; class InteractiveViewerDemo extends StatefulWidget { const InteractiveViewerDemo({super.key}); @override State<InteractiveViewerDemo> createState() => _InteractiveViewerDemoState(); } class _InteractiveViewerDemoState extends State<InteractiveViewerDemo> { // Đây là "người lái xe bus" của chúng ta. // Nó sẽ điều khiển trạng thái phóng to/kéo của InteractiveViewer. final TransformationController _transformationController = TransformationController(); @override void dispose() { _transformationController.dispose(); // Nhớ dọn dẹp "người lái xe bus" khi không dùng nữa! super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Kính Lúp Thần Kỳ của Creyt'), ), body: Center( child: Column( children: [ Expanded( child: InteractiveViewer( // Giao "người lái xe bus" cho InteractiveViewer. transformationController: _transformationController, boundaryMargin: const EdgeInsets.all(20.0), minScale: 0.1, maxScale: 4.0, child: Image.network( 'https://picsum.photos/seed/flutter/800/600', // Một bức ảnh ngẫu nhiên fit: BoxFit.contain, ), ), ), Padding( padding: const EdgeInsets.all(8.0), child: ElevatedButton( onPressed: () { // Này "người lái xe bus", đưa tôi về điểm xuất phát đi! _transformationController.value = Matrix4.identity(); // Hoặc bạn có thể dùng Animation để reset mượt mà hơn: // _transformationController.animateTo( // Matrix4.identity(), // duration: const Duration(milliseconds: 300), // curve: Curves.easeOut, // ); // Để đọc trạng thái hiện tại từ InteractiveViewerState (nếu bạn cần): // Nếu bạn muốn truy cập InteractiveViewerState trực tiếp mà không dùng controller, // bạn sẽ cần một GlobalKey cho InteractiveViewer và dùng key.currentState. // Nhưng với việc điều khiển, TransformationController là cách chuẩn mực hơn. // Ví dụ: Để lấy scale hiện tại từ controller: // final currentScale = _transformationController.value.getMaxScaleOnAxis(); // print('Current Scale: $currentScale'); }, child: const Text('Đặt Lại Chế Độ Xem'), ), ), ], ), ), ); } } Trong ví dụ trên: Chúng ta tạo một TransformationController (_transformationController). Đây là công cụ chính để điều khiển InteractiveViewer một cách lập trình. Khi bạn gán _transformationController vào InteractiveViewer, mọi tương tác của người dùng (zoom, pan) sẽ được phản ánh vào _transformationController.value. Ngược lại, khi bạn thay đổi _transformationController.value (như khi nhấn nút "Đặt Lại"), InteractiveViewer sẽ tự động cập nhật hiển thị của nó. InteractiveViewerState chính là nơi lưu trữ cái value này và các trạng thái nội bộ khác. Mặc dù chúng ta không trực tiếp gọi _interactiveViewerKey.currentState trong ví dụ này để reset, nhưng TransformationController chính là "cầu nối" hiệu quả nhất để tương tác với trạng thái đó. Nếu bạn muốn truy cập các phương thức của InteractiveViewerState mà không dùng TransformationController, bạn sẽ cần một GlobalKey gắn vào InteractiveViewer. Mẹo Nhỏ và Best Practices từ Giảng viên Creyt Dùng TransformationController như bạn thân: Khi bạn muốn điều khiển InteractiveViewer bằng code (reset, pan đến điểm cụ thể, zoom tự động), hãy nghĩ ngay đến TransformationController. Nó sinh ra là để làm việc này! Nhớ dispose() nó khi State không còn được sử dụng để tránh rò rỉ bộ nhớ. Hiệu năng là vàng: InteractiveViewer rất mạnh mẽ, nhưng nếu bạn nhét vào đó một widget con quá phức tạp hoặc một tấm ảnh siêu to khổng lồ, việc phóng to/thu nhỏ có thể không mượt mà. Hãy tối ưu widget con nếu có thể, hoặc cân nhắc việc hiển thị phiên bản độ phân giải thấp hơn khi zoom out và tải phiên bản chất lượng cao khi zoom in. builder vs child: Nếu nội dung của bạn thay đổi động hoặc cần được xây dựng dựa trên trạng thái phóng to/kéo, hãy cân nhắc dùng InteractiveViewer.builder thay vì InteractiveViewer với child thông thường. builder cung cấp BuildContext và Matrix4 hiện tại, giúp bạn xây dựng widget con linh hoạt hơn. boundaryMargin và minScale/maxScale: Luôn định nghĩa rõ ràng các thuộc tính này để kiểm soát giới hạn tương tác của người dùng, tránh việc nội dung bị kéo ra khỏi màn hình hoàn toàn hoặc zoom quá lố. Ứng dụng Thực tế: "Kính Lúp" ở khắp mọi nơi Bạn có thể thấy InteractiveViewer (và gián tiếp là InteractiveViewerState) được sử dụng ở rất nhiều nơi trong các ứng dụng hàng ngày: Ứng dụng bản đồ: Google Maps, Apple Maps, hay bất kỳ ứng dụng bản đồ nào bạn từng dùng đều cần khả năng phóng to, kéo bản đồ mượt mà. Ứng dụng xem ảnh/PDF: Khi bạn mở một bức ảnh độ phân giải cao hoặc một tài liệu PDF, bạn thường muốn zoom vào chi tiết, kéo để xem các phần khác nhau. Ứng dụng thiết kế/CAD: Các phần mềm xem bản vẽ kỹ thuật, sơ đồ mạch điện thường cho phép người dùng phóng to các chi tiết nhỏ, kéo để di chuyển giữa các khu vực. Trình duyệt web: Một số website có tính năng zoom vào nội dung ảnh hoặc biểu đồ lớn. Tóm lại, InteractiveViewerState là "bộ não" giữ thông tin về trạng thái tương tác của InteractiveViewer. Và TransformationController là "người lái xe" giúp bạn điều khiển bộ não đó một cách có chủ đích. Nắm vững bộ đôi này, bạn sẽ có trong tay sức mạnh để tạo ra những trải nghiệm người dùng thực sự sống động và linh hoạt trong ứng dụng Flutter của mình. Chúc mừng bạn đã lên thêm một level nữa trong hành trình trở thành "phù thủy" code! Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

35 Đọc tiếp

19/03/2026

InteractiveInkFeature: Vẽ Họa Tiết Tương Tác Cực Chất trong Flutter

Chào các "coder" tương lai và những "phù thủy" UI/UX! Anh Creyt đây, và hôm nay chúng ta sẽ cùng "mổ xẻ" một khái niệm nghe có vẻ "hàn lâm" nhưng lại cực kỳ "vi diệu" trong Flutter: InteractiveInkFeature. Nghe tên thôi đã thấy nó "interactive" rồi, đúng không? 1. InteractiveInkFeature là gì và để làm gì? Các em cứ hình dung thế này: trong thế giới số của chúng ta, mỗi khi người dùng chạm vào một thứ gì đó trên màn hình, chúng ta muốn có một "lời thì thầm" phản hồi nho nhỏ, một hiệu ứng thị giác báo hiệu rằng "À, tôi đã nhận được cú chạm của bạn rồi đây!". Cái "lời thì thầm" đó chính là những hiệu ứng "gợn sóng" (ripple), "sáng lên" (highlight) mà các em thường thấy. InkWell và InkResponse trong Flutter đã làm rất tốt việc này. Chúng tự động tạo ra những hiệu ứng gợn sóng Material Design "chuẩn chỉnh". Nhưng nếu một ngày đẹp trời, sếp yêu cầu một hiệu ứng gợn sóng hình "trái tim" hay một vệt sáng hình "tia chớp" thì sao? Lúc đó, InkWell và InkResponse sẽ "bó tay" vì chúng chỉ biết làm những gì được lập trình sẵn. Đây chính là lúc InteractiveInkFeature "ra tay"! Nó giống như một "bảng vẽ tự do" dành cho các hiệu ứng chạm. Thay vì dùng cọ có sẵn, InteractiveInkFeature cho phép các em tự tay "vẽ" bất kỳ hiệu ứng nào mình muốn lên màn hình khi có tương tác. Nó là "viên gạch" cơ bản mà InkWell và InkResponse cũng dùng để xây dựng nên các hiệu ứng của chúng, nhưng ở cấp độ cao hơn, chúng ta có thể tùy chỉnh nó. Tóm lại: InteractiveInkFeature là một widget cấp thấp trong Flutter, dùng để tạo ra các hiệu ứng hình ảnh tùy chỉnh (như gợn sóng, highlight) phản hồi lại các cử chỉ của người dùng. Nó giúp chúng ta có toàn quyền kiểm soát cách hiệu ứng tương tác trông như thế nào, vượt xa các hiệu ứng mặc định. 2. Code Ví Dụ Minh Hoạ: "Vẽ" Hiệu Ứng Tương Tác Của Riêng Bạn Để sử dụng InteractiveInkFeature, chúng ta thường sẽ làm việc với InkResponse (hoặc InkWell) và Material widget. Material là "tấm bạt" mà các hiệu ứng mực (ink effects) sẽ được vẽ lên. InkResponse là "cái loa" thông báo khi có sự kiện chạm. Đầu tiên, hãy xem một InkWell cơ bản trông như thế nào: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'InkFeature Demo', home: Scaffold( appBar: AppBar(title: Text('InkFeature Basics')), body: Center( child: Material( color: Colors.blue[100], child: InkWell( onTap: () { print('InkWell tapped!'); }, child: Container( width: 200, height: 100, alignment: Alignment.center, child: Text( 'Chạm vào đây (InkWell)', style: TextStyle(fontSize: 18), ), ), ), ), ), ), ); } } Khi bạn chạm vào Container trên, bạn sẽ thấy hiệu ứng gợn sóng Material Design mặc định. Bây giờ, hãy "nâng cấp" nó bằng cách tạo ra một InteractiveInkFeature của riêng chúng ta! Chúng ta sẽ tạo một hiệu ứng gợn sóng hình vuông, màu đỏ, thay vì hình tròn mặc định. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // 1. Định nghĩa một InteractiveInkFeature tùy chỉnh của riêng bạn class SquareInkFeature extends InteractiveInkFeature { SquareInkFeature({ required MaterialInkController controller, required RenderBox referenceBox, required Color color, required VoidCallback onRemoved, }) : super( controller: controller, referenceBox: referenceBox, color: color, onRemoved: onRemoved, ); @override void paintFeature(Canvas canvas, Matrix4 transform) { final Rect rect = referenceBox.paintBounds.shift(referenceBox.globalToLocal(Offset.zero)); final Paint paint = Paint()..color = color; // Lấy tiến độ của hiệu ứng (0.0 đến 1.0) // 'super.controller.progress' là một thuộc tính quan trọng để tạo animation final double progress = controller.progress; // Ví dụ: Vẽ một hình vuông mở rộng từ tâm final double size = rect.shortestSide * progress; // Kích thước hình vuông tăng dần final RRect square = RRect.fromRectAndRadius( Rect.fromCenter( center: rect.center, width: size, height: size, ), Radius.circular(0.0), // Không bo góc, tạo hình vuông sắc nét ); canvas.drawRRect(square, paint); } } // 2. Sử dụng InkResponse để kích hoạt SquareInkFeature class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Custom InkFeature Demo', home: Scaffold( appBar: AppBar(title: Text('Custom InkFeature')), body: Center( child: Material( color: Colors.green[100], // Màu nền của Material child: InkResponse( onTap: () { print('Custom InkFeature tapped!'); }, // Đây là nơi chúng ta "tiêm" hiệu ứng tùy chỉnh vào InkResponse! onHighlightChanged: (bool isHighlighted) { if (isHighlighted) { // Khi widget được highlight (chạm vào) final RenderBox renderBox = context.findRenderObject() as RenderBox; final MaterialInkController inkController = Material.of(context)!; // Thêm SquareInkFeature của chúng ta vào controller inkController.addInkFeature(SquareInkFeature( controller: inkController, referenceBox: renderBox, color: Colors.red.withOpacity(0.5), // Màu hiệu ứng onRemoved: () {}, )); } }, child: Container( width: 200, height: 100, alignment: Alignment.center, child: Text( 'Chạm vào đây (Square InkFeature)', style: TextStyle(fontSize: 18), ), ), ), ), ), ), ); } } Trong ví dụ trên: Chúng ta tạo SquareInkFeature kế thừa từ InteractiveInkFeature. Phương thức paintFeature là "linh hồn" của nó, nơi chúng ta dùng Canvas để vẽ hình vuông màu đỏ. controller.progress giúp chúng ta tạo hiệu ứng động (hình vuông lớn dần). InkResponse được dùng để lắng nghe sự kiện onHighlightChanged. Khi người dùng chạm vào (tức là isHighlighted là true), chúng ta lấy MaterialInkController và "nhét" SquareInkFeature của mình vào đó. MaterialInkController chính là "người quản lý" tất cả các hiệu ứng "mực" trên "tấm bạt" Material. 3. Mẹo Vặt & Best Practices Từ "Lão Làng" Creyt Khi nào dùng InkWell, InkResponse, và InteractiveInkFeature? InkWell: Dùng cho 90% trường hợp. Khi bạn chỉ cần hiệu ứng gợn sóng Material Design mặc định và đơn giản. Nó là "bộ đồ may sẵn", nhanh gọn lẹ. InkResponse: Khi bạn cần kiểm soát chi tiết hơn về vùng chạm (ví dụ: radius, borderRadius, highlightShape) hoặc cần lắng nghe các sự kiện onHighlightChanged, onHover. Nó là "bộ đồ may đo cơ bản", có thể tùy chỉnh một chút. InteractiveInkFeature: Khi bạn muốn "tự thiết kế" hoàn toàn hiệu ứng gợn sóng hoặc hiệu ứng tương tác. Đây là "xưởng may đồ haute couture", dành cho những ai muốn tạo ra hiệu ứng độc nhất vô nhị. Hãy nhớ, dùng nó khi thực sự cần một hiệu ứng không thể đạt được bằng InkWell hay InkResponse thông thường. Đừng quên "tấm bạt" Material!: Các hiệu ứng "mực" (ink effects) luôn cần một widget Material làm "nền" để vẽ lên. Nếu không có Material ở trên cây widget, các hiệu ứng sẽ không hiển thị. Hãy xem Material như cái khung tranh cho các tác phẩm tương tác của bạn. Hiệu năng là vàng: Việc vẽ tùy chỉnh trong paintFeature có thể tốn tài nguyên nếu bạn vẽ quá phức tạp hoặc thực hiện các phép tính nặng. Luôn giữ cho logic vẽ đơn giản, hiệu quả, đặc biệt là khi hiệu ứng đang trong quá trình chuyển động (animation). "Đừng biến màn hình thành một bức tranh sơn dầu quá chi tiết khi chỉ cần một nét vẽ chì!" "Tái sử dụng" là nghệ thuật: Nếu bạn có nhiều nơi cần cùng một hiệu ứng tùy chỉnh, hãy đóng gói InteractiveInkFeature của bạn thành một widget nhỏ gọn hoặc một helper function để dễ dàng tái sử dụng và quản lý code. 4. Ứng Dụng Thực Tế InteractiveInkFeature (hoặc các cơ chế tương tự) được sử dụng rộng rãi trong các ứng dụng và website để tạo ra trải nghiệm người dùng mượt mà và trực quan: Ứng dụng Material Design (Google Apps): Tất cả các ứng dụng của Google (Gmail, Google Maps, Chrome) đều sử dụng hiệu ứng gợn sóng khi bạn chạm vào các nút, danh sách, hoặc thẻ. Mặc dù chúng dùng InkWell mặc định, nhưng nền tảng của InkWell chính là InteractiveInkFeature. Các nút bấm tùy chỉnh (Custom Buttons): Nhiều ứng dụng có các nút bấm với hiệu ứng chạm độc đáo, không chỉ là gợn sóng tròn. Ví dụ, một nút có thể phát sáng toàn bộ, hoặc một hiệu ứng hình ảnh riêng biệt xuất hiện rồi biến mất khi chạm vào. Danh sách và lưới (Lists & Grids): Khi bạn chọn một mục trong danh sách hoặc một ô trong lưới ảnh, hiệu ứng highlight hoặc gợn sóng giúp người dùng biết họ đã chọn gì. Với InteractiveInkFeature, bạn có thể tạo highlight hình dạng đặc biệt (ví dụ: highlight bo tròn ở góc). Feedback đa dạng: Ngoài việc chỉ là một gợn sóng, bạn có thể dùng nó để vẽ các biểu tượng nhỏ xuất hiện tạm thời, các vệt sáng theo hướng vuốt, hoặc bất kỳ phản hồi thị giác nào mà bạn nghĩ ra để làm UI thêm sinh động. Nhớ nhé, InteractiveInkFeature không phải là thứ các em dùng hàng ngày, nhưng khi cần "phá cách" và tạo ra những hiệu ứng tương tác "độc nhất vô nhị" thì nó chính là "vũ khí bí mật" trong kho tàng của một "phù thủy" Flutter đấy! Cứ thực hành đi, rồi các em sẽ thấy nó "lợi hại" cỡ nào! Thuộc Series: Flutter Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!

37 Đọc tiếp