Auf Eingaben reagieren

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 23 von 34.

Ein Eingabefeld kann dir jedes Mal mitteilen, wenn sich sein Text ändert. Gib ihm onChanged:, eine Funktion, die den gesamten aktuellen Text erhält:

TextField(
  onChanged: (String value) {
    print(value);
  },
)

Gib Ada ein, und dies wird dreimal ausgegeben: A, Ad, Ada. (String value) ist ein Parameter, wie die in „Funktionen mit Parametern“: Das Eingabefeld ruft deine Funktion mit seinem Text auf.

Um den Text an einer anderen Stelle auf dem Bildschirm anzuzeigen, speichere ihn im State und ändere ihn mit setState, genauso wie eine Schaltfläche einen Zähler ändert:

onChanged: (String value) {
  setState(() {
    _name = value;
  });
},

Aufgabe

Einfach

Lass die Begrüßung dem Eingabefeld folgen: Während du einen Namen eingibst, wird aus Hello, stranger! Hello, Ada!. Speichere den Text aus onChanged in _name.

Probier es selbst

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 _name = 'stranger';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Greeter')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'Your name',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 24),
            Text('Hello, $_name!', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}