Flutter, как записать значение, которое ввел пользователь в текстовое поле, в список?

Question

Какая задача:

Есть список идей и поле ввода с кнопкой. Нужно сделать так, чтобы идея, которую я ввожу в поле ввода, записывалась в этом список и выводилась на экран. То есть, условно, должно быть так (картинка 1)

У меня пока получилось так (картинка 2).

Код в Дартпаде: https://dartpad.dev/f2fb729c2f0af98d9771bacc2d4d5e26

Список выводится криво, но главное — то, что я ввожу в поле не записывается в список. Что я упустила? В чем проблема?

Answer 1

Проблема была в использовании глобальных переменных и не обновления ui при добавления элемента в список.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Список новых идей',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late final TextEditingController _textEditingController =
      TextEditingController();

  final List ideas = [
    "Пить воду в течение дня",
    "Делать разминку каждый день",
    "Есть сладкое только в первой половине дня"
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
        ),
        body: Center(
          child: SizedBox(
            width: 300,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                TextField(
                  controller: _textEditingController,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Новая идея',
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    ideas.add(_textEditingController.text);
                    _textEditingController.clear();
                    setState(
                        () {}); // для обновления ui, так как ideas меняется. Также можно использовать ValueNotifier + ValueListenableBuilder
                  },
                  child: const Text('Добавить идею'),
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.all(20),
                  ),
                ),
                for (var i in ideas) // так же можно использовать List.generate или ListView.builder
                  Padding(
                    padding: const EdgeInsets.all(40),
                    child: Text("$i"),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

БЛОГ НА HUSL

Flutter, как записать значение, которое ввел пользователь в текстовое поле, в список?

Ответы (1 шт):