قراءة حقل باستخدام Controller

جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 24 من 34.

تلتقط onChanged كل حرف. غالبًا ما تريد النص فقط عند الضغط على زر، مثل «إضافة» أو «إرسال». لهذا، أعطِ الحقل متحكمًا:

final TextEditingController _controller = TextEditingController();

TextField(controller: _controller)

يوجد المتحكم في الحالة، بجانب متغيراتك الأخرى. وهو final لأنه يظل المتحكم نفسه دائمًا؛ ولا يتغير سوى النص الموجود بداخله. يحتوي _controller.text على ما يحمله الحقل الآن، ويفرغ _controller.clear() محتواه.

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

ينبغي التخلص من المتحكم عند التخلص من شاشته. لهذا الغرض تُستخدم dispose: تستدعيها Flutter عندما تزول الحالة.

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

التحدي

متوسط

أضف final TextEditingController _controller إلى الحالة، ومرّره إلى الحقل باستخدام controller:.
اجعل _add يعرض نص الحقل على هيئة Last added: Buy milk، ثم أفرغ الحقل.
أضف الطريقة dispose الواردة في الشرح النظري.

جرّب بنفسك

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