Đọc trường bằng bộ điều khiển

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 24 trên 34.

onChanged nhận mọi ký tự. Thường thì bạn chỉ muốn lấy văn bản khi nhấn nút, như Thêm hoặc Gửi. Để làm vậy, hãy gán cho trường nhập liệu một bộ điều khiển (controller):

final TextEditingController _controller = TextEditingController();

TextField(controller: _controller)

Bộ điều khiển nằm trong State, cùng với các biến khác. Nó là final vì bộ điều khiển luôn giữ nguyên, chỉ có văn bản bên trong thay đổi. _controller.text là nội dung hiện tại của trường nhập liệu, còn _controller.clear() xóa nội dung đó.

void _send() {
  print(_controller.text);
  _controller.clear();
}

Bạn nên hủy bộ điều khiển khi màn hình bị hủy. Đó là công dụng của dispose: Flutter gọi phương thức này khi State không còn tồn tại.

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

Thử thách

Trung bình

Thêm final TextEditingController _controller vào State và truyền nó cho trường bằng controller:.
Cho _add hiển thị văn bản trong trường theo dạng Last added: Buy milk, sau đó xóa nội dung trường.
Thêm phương thức dispose như trong phần lý thuyết.

Tự làm thử

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(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _last = 'nothing';

  void _add() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tasks')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'New task',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 12),
            ElevatedButton(onPressed: _add, child: const Text('Add')),
            const SizedBox(height: 24),
            Text('Last added: $_last', style: const TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}