Несколько полей ввода в Flutter
Форма регистрации или профиля редко
обходится одним полем. На одном экране
ставят несколько
TextField
в Column.
У каждого поля - свой TextEditingController:
так строки не смешиваются.
Оба контроллера создают в initState
и освобождают в dispose по очереди.
Порядок вызова super.dispose()
в конце - как в одном поле. Между
полями добавляют SizedBox
по высоте для воздуха:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: HomePage()));
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
late final TextEditingController firstController;
late final TextEditingController lastController;
@override
void initState() {
super.initState();
firstController = TextEditingController();
lastController = TextEditingController();
}
@override
void dispose() {
firstController.dispose();
lastController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextField(
controller: firstController,
decoration: const InputDecoration(
labelText: 'Name',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 12),
TextField(
controller: lastController,
decoration: const InputDecoration(
labelText: 'Last name',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
debugPrint(
'${firstController.text} '
'${lastController.text}',
);
},
child: const Text('Full name to console'),
),
],
),
),
);
}
}
Сделайте поля 'City' и 'Street'
с двумя контроллерами. Кнопка выводит
в консоль одну строку: город, запятая,
улица - из controller.text обоих
полей.