Làm quen với TextField – Xử lý nhập liệu và quản lý Controller

Giới thiệu

Ở bài trước, chúng ta đã học về Navigation trong Flutter, cách chuyển màn hình và truyền dữ liệu cơ bản giữa các màn hình.

Trong bài hôm nay, chúng ta sẽ tiếp tục với một khái niệm rất hay dùng trong ứng dụng thực tế: TextField – nơi để người dùng nhập liệu, ví dụ như tên, email, nội dung tìm kiếm v.v...

🎯 Mục tiêu

• Hiểu cách sử dụng TextField trong Flutter.
• Quản lý dữ liệu nhập vào bằng TextEditingController.
• Hiển thị lại dữ liệu người dùng vừa nhập

TextField là gì?

TextField là widget dùng để tạo ô nhập liệu văn bản. Nó tương tự như <input> trong HTML.

Ví dụ cơ bản:

TextField( decoration: InputDecoration( labelText: 'Nhập tên của bạn', border: OutlineInputBorder(), ),
)

Quản lý dữ liệu với TextEditingController

Khi chúng ta cần lấy giá trị từ ô nhập (TextField), chúng ta cần sử dụng một đối tượng TextEditingController.

Ví dụ:

final TextEditingController _nameController = TextEditingController();

Sau đó, gán controller vào TextField:

TextField( controller: _nameController, decoration: InputDecoration( labelText: 'Tên của bạn', ),
)

Và lấy giá trị khi cần dùng:

print(_nameController.text);

Ví dụ hoàn chỉnh

Ở trên chúng ta đã tìm hiểu cách sử dụng TextField và quản lý dữ liệu với controller. Sau đây chúng ta sẽ cùng làm một ví dụ cụ thể

import 'package:flutter/material.dart'; class TextFieldExample extends StatefulWidget { @override _TextFieldExampleState createState() => _TextFieldExampleState();
} class _TextFieldExampleState extends State<TextFieldExample> { final TextEditingController _nameController = TextEditingController(); String _result = ''; @override void dispose() { _nameController.dispose(); super.dispose(); } void _showName() { setState(() { _result = _nameController.text; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('TextField cơ bản')), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [ TextField( controller: _nameController, decoration: InputDecoration( labelText: 'Nhập tên của bạn', border: OutlineInputBorder(), ), ), SizedBox(height: 16), ElevatedButton( onPressed: _showName, child: Text('Hiển thị tên'), ), SizedBox(height: 16), Text('Tên vừa nhập: $_result'), ], ), ), ); }
}

Ở ví dụ trên chúng ta đã cùng làm một màn hình cho phép người dùng nhập tên của mình và sau đó hiển thị ra giá trị đã nhập khi người dùng click vào button Hiển thị tên

Một vài lưu ý nhỏ

• Luôn nhớ dispose controller khi không dùng nữa để tránh rò rỉ bộ nhớ.
• Có thể dùng thêm các tính năng nâng cao như onChanged, keyboardType, obscureText (cho mật khẩu)... sau này trong các form thực tế.

Kết luận

Bài viết có thể sẽ có nhiều thiếu sót rất mong nhận được góp ý của mọi người để mình cải thiện thêm.

Ngày mai, mình sẽ tiếp tục tìm hiểu về form – có thể là kết hợp nhiều TextField lại và kiểm tra dữ liệu nhập (validation) chẳng hạn.

Lời cuối bài xin cảm ơn mọi người đã đọc đến đây! Hẹn gặp lại mọi người ở bài viết ngày mai nhé.