如何通过添加 Flutter 制作类似的小部件列表

Question

how can i make a similar list of checkboxes(buttons), with the ability to add a new element Here are design examples

Main screen

Add screen

Answer 1

This may help you understand the implementation of what you are looking to do in your app:

class HomeScreen extends StatefulWidget {

  const HomeScreen({Key? key, this.familyName = 'No Name Provided'})
      : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}


class _HomeScreenState extends State<HomeScreen> {
  final List items =
      List.generate(5, (index) => {'label': 'item', 'selected': false});
  late String _new;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Wrap(
          children: List<Widget>.generate(
            items.length,
            (int index) {
              String _label = items[index]['label'];
              bool _selected = items[index]['selected'];
              return ChoiceChip(
                label: Text(_label),
                selected: _selected,
                onSelected: (bool selected) {
                  setState(() {
                    items[index]['selected'] = selected;
                  });
                },
              );
            },
          ).toList(),
        ),
        TextField(onChanged: (String value) => _new = value),
        ElevatedButton.icon(
          onPressed: () =>
              setState(() => items.add({'label': _new, 'selected': true})),
          icon: const Icon(Icons.add),
          label: const Text('Add New'),
        ),
      ],
    );
  }
}

Hope this helps, let you know you want me to clarify anything.