Baca Kolom dengan Controller

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 24 dari 34.

onChanged menerima setiap huruf. Sering kali kamu hanya ingin mengambil teks saat tombol ditekan, seperti Add atau Send. Untuk itu, berikan field sebuah controller:

final TextEditingController _controller = TextEditingController();

TextField(controller: _controller)

Controller berada di State, bersama variabel-variabelmu yang lain. Controller ini final karena selalu sama, hanya teks di dalamnya yang berubah. _controller.text adalah isi field saat ini, dan _controller.clear() mengosongkannya.

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

Controller sebaiknya dibuang saat layarnya ditutup. Itulah fungsi dispose: Flutter memanggilnya saat State tidak lagi digunakan.

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

Tantangan

Sedang

Tambahkan final TextEditingController _controller ke State dan berikan ke field dengan controller:.
Buat _add menampilkan teks field sebagai Last added: Buy milk, lalu kosongkan field.
Tambahkan method dispose dari teori.

Coba sendiri

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)),
          ],
        ),
      ),
    );
  }
}