重新启动flutter应用程序后，添加到列表中的元素也会从UI中删除

Question

问题是用户在文本字段中输入的列表元素能够正确呈现。应用程序重新启动后，元素也会从列表和 UI 中删除。 这是代码： 我创建了一个带有变量的模型类

class CardData {
CardData(this.name, this.university, this.department, this.rollNumber,
  this.emailId);
final String name;
final String university;
final String department;
final String rollNumber;
final String emailId;
}

这是我用来从用户获取数据的表格

import 'package:flutter/material.dart';
import 'package:student_card/models/card_data.dart';

class MyForm extends StatefulWidget {
  const MyForm({super.key, required this.onAddNewData});
  final void Function(CardData newData) onAddNewData;

  @override
  State<MyForm> createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final nameController = TextEditingController();
  final universityController = TextEditingController();
  final departmentController = TextEditingController();
  final rollController = TextEditingController();
  final emailIdController = TextEditingController();

  @override
  void dispose() {
    nameController.dispose();
    universityController.dispose();
    departmentController.dispose();
    rollController.dispose();
    emailIdController.dispose();
    super.dispose();
  }

  OutlineInputBorder myfocusborder() {
    return const OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(20)),
    borderSide: BorderSide(
      color: Colors.greenAccent,
      width: 3,
    ));
  }

  OutlineInputBorder myinputborder() {
    //return type is OutlineInputBorder
    return const OutlineInputBorder(
    //Outline border type for TextFeild
    borderRadius: BorderRadius.all(Radius.circular(20)),
    borderSide: BorderSide(
      color: Colors.redAccent,
      width: 3,
    ));
  }

  showUserData() {
    widget.onAddNewData(CardData(
    nameController.text,
    universityController.text,
    departmentController.text,
    rollController.text,
    emailIdController.text));
  }

  @override
  Widget build(BuildContext context) {

    return Column(
      children: [
        const SizedBox(
      height: 30,
    ),
    TextField(
      // cursorColor: Theme.of(context).colorScheme.onPrimary,
      controller: nameController,
      decoration: InputDecoration(
          label: const Text('Your Name'),
          hintText: 'Name',
          border: myinputborder(),
          focusedBorder: myfocusborder(),
          enabledBorder: myinputborder()),
    ),
    const SizedBox(
      height: 20,
    ),
    TextField(
      controller: universityController,
      decoration: InputDecoration(
          label: const Text('University Name'),
          hintText: 'University',
          border: myinputborder(),
          focusedBorder: myfocusborder(),
          enabledBorder: myinputborder()),
    ),
    const SizedBox(
      height: 20,
    ),
    TextField(
      controller: departmentController,
      decoration: InputDecoration(
          label: const Text('Your Department'),
          hintText: 'Department',
          border: myinputborder(),
          focusedBorder: myfocusborder(),
          enabledBorder: myinputborder()),
    ),
    const SizedBox(
      height: 20,
    ),
    TextField(
      controller: rollController,
      decoration: InputDecoration(
          label: const Text('Your Registration Id.'),
          hintText: 'Roll Numver',
          border: myinputborder(),
          focusedBorder: myfocusborder(),
          enabledBorder: myinputborder()),
    ),
    const SizedBox(
      height: 20,
    ),
    TextField(
      controller: emailIdController,
      decoration: InputDecoration(
          label: const Text('Your Email Id.'),
          hintText: 'Email',
          border: myinputborder(),
          focusedBorder: myfocusborder(),
          enabledBorder: myinputborder()),
    ),
    const SizedBox(
      height: 20,
    ),
    ElevatedButton(
        onPressed: () {
          showUserData();
        },
        child: const Text('Submit'))
      ],
    );
  }
}

包含虚拟数据的列表并向其中添加元素

import 'package:flutter/material.dart';
import 'package:student_card/Widgets/data_list.dart';
import 'package:student_card/models/card_data.dart';
import 'package:student_card/Widgets/form.dart';

class StudentCard extends StatefulWidget {
  const StudentCard({super.key});

  @override
  State<StudentCard> createState() {
    return _StudentCardState();
  }
}

class _StudentCardState extends State<StudentCard> {

  List<CardData> listData = [
    CardData('Moiz', 'UMT', 'Software', 'FA21-BEE-106', '[email protected]'),
  ];

  void addNewData(CardData newData) {
    setState(() {
      listData.add(newData);
    });
  }

  showFormSheet(BuildContext context) {
    showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    builder: (context) {
      return Container(
        padding: const EdgeInsets.symmetric(
          horizontal: 20,
          vertical: 15,
        ),
        child: Column(
          children: [
            MyForm(
              onAddNewData: addNewData,
            )
          ],
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
    title: const Text('Student Card Maker'),
    backgroundColor: const Color(0xFFC539B4),
    actions: [
      IconButton(
          onPressed: () {
            showFormSheet(context);
          },
          icon: const Icon(Icons.add))
    ],
  ),
  body: Container(
    padding: const EdgeInsets.all(10),
    child: Column(
      children: [
        const Text('The data below'),
        const SizedBox(
          height: 10,
        ),
        Expanded(
          child: DataList(data: listData),
        )
      ],
    ),
  ),
    );
  }
} 

使用ListView.Builder渲染它

import 'package:flutter/material.dart';
import 'package:student_card/models/card_data.dart';

class CardItem extends StatelessWidget {
  const CardItem({super.key, required this.studentData});
  final CardData studentData;
  @override
  Widget build(BuildContext context) {
    // Full screen width and height
    double Width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

// Height (without SafeArea)
    var padding = MediaQuery.of(context).viewPadding;
    double height1 = height - padding.top - padding.bottom;
double realHeight = 0.75 * height1;
double realWidth = 0.90 * Width;

// Height (without status bar)
// double height2 = height - padding.top;

return Container(
  height: realHeight,
  width: realWidth,
  padding: const EdgeInsets.all(5),
  child: Card(
    child: Column(
      children: [
        Text(studentData.name),
        Text(studentData.university),
        Text(studentData.department),
        Text(studentData.rollNumber),
        Text(studentData.emailId),
      ],
    ),
     ),
  ),
);
  }
}

Answer 1

重新启动后，您的所有小部件都是从头开始构建的，因此您的

listData

将仅包含虚拟数据。如果您想在重启后保留添加的元素，您需要将它们存储在某个数据库中。