Добавление строки в список в Flutter
Список дел на экране хранят в поле
List<String> внутри
State.
Чтобы пользователь мог дописывать пункты,
ставят TextField
и кнопку. По нажатию текст из контроллера
попадает в список, поле очищают, вызывают
setState.
Менять items.add(...) можно прямо
внутри setState - Flutter перестроит
ListView
с новым количеством строк. Пустую строку
обычно не добавляют: проверяют
trim().isNotEmpty:
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> {
final items = <String>['Milk', 'Bread'];
final inputController = TextEditingController();
@override
void dispose() {
inputController.dispose();
super.dispose();
}
void addItem() {
final text = inputController.text.trim();
if (text.isEmpty) return;
setState(() {
items.add(text);
inputController.clear();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: TextField(
controller: inputController,
decoration: const InputDecoration(
hintText: 'New item',
border: OutlineInputBorder(),
),
),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: addItem,
child: const Text('Add'),
),
],
),
),
Expanded( // bounded height, list can scroll
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
),
),
],
),
);
}
}
Сделайте список из двух стартовых
названий фруктов, поле и кнопку
'Add'. Новый фрукт появляется
в ListView снизу. Пустой ввод
игнорируйте.