Can someone enlighten me? When I click icon add circle, it will add another list below. Currently, my code is unable to add new list when I tap on it. Hoping someone can enlighten and help me on this. I am using stateful widget for my UploadDoc function.

class _UploadDocState extends State<UploadDoc> {

  final List<dynamic> listSelection = [
    { 
      'id': 0, 
      'header':'Muat Naik Surat Rasmi Permohonan', 
      'icon': Icon(Icons.add_circle_outlined), 
      'title': 'Muat Naik Surat Rasmi',
    },
     { 
      'id': 1, 
      'header':'Surat Lantikan Peguam', 
      'icon': Icon(Icons.add_circle_outlined), 
      'title': 'test',
    },
     { 
      'id': 2, 
      'header':'Surat hubungan peguam dan pemilik daftar', 
      'icon': Icon(Icons.add_circle_outlined), 
      'title': 'test',
    },
  ];

  dynamic _selected = 0;
  int index = 0;
  int _count =1;

  @override
  Widget build(BuildContext context) {
    List<Widget> _upload = new List.generate(_count, (int i) => new UploadDoc());

    return Column(
        children:  [ 
          Container(
            width: double.infinity,
            height: 30,
            color: Colors.grey,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SizedBox(width: 10),
                Text(listSelection[index]['header'], style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
              ],
            )),
          ListTile( 
            leading: listSelection[index]['icon'],
            title: Text(listSelection[index]['header']),
            onTap: _addNewUploadDoc,
          ), 
          const Divider(thickness: 1)
        ],
    );
  }

  void _addNewUploadDoc() {  
    setState(() {
      _count = _count   1;
    });
  }
}

CodePudding user response：

Don't declare anything inside build method. Theses variable will reinitialize on state change. Better approach is using ListView.builder. while you like to have separator, use ListView.separated.

Next important things to control the index range on count increment,

class _UploadDocState extends State<UploadDoc> {
  final List<dynamic> listSelection = [
    {
      'id': 0,
      'header': 'Muat Naik Surat Rasmi Permohonan',
      'icon': Icon(Icons.add_circle_outlined),
      'title': 'Muat Naik Surat Rasmi',
    },
    {
      'id': 1,
      'header': 'Surat Lantikan Peguam',
      'icon': Icon(Icons.add_circle_outlined),
      'title': 'test',
    },
    {
      'id': 2,
      'header': 'Surat hubungan peguam dan pemilik daftar',
      'icon': Icon(Icons.add_circle_outlined),
      'title': 'test',
    },
  ];

  int _selected = 0;
  int index = 0;
  int _count = 1;
  late List<Widget> _upload = List.generate(_count, (int i) => UploadDoc());

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: _count,
      itemBuilder: (context, index) {
        return Column(
          children: [
            Container(
                width: double.infinity,
                height: 30,
                color: Colors.grey,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    SizedBox(width: 10),
                    Text(listSelection[index]['header'],
                        style: TextStyle(
                            color: Colors.black, fontWeight: FontWeight.bold)),
                  ],
                )),
            ListTile(
              leading: listSelection[index]['icon'],
              title: Text(listSelection[index]['header']),
              onTap: _addNewUploadDoc,
            ),
          ],
        );
      },
      separatorBuilder: (context, index) => const Divider(thickness: 1),
    );
  }

  void _addNewUploadDoc() {
    setState(() {
      if (_count < listSelection.length) {
        _count = _count   1;
      }
    });
  }
}

CodePudding user response：

I don't recommed to declare Icon inside of Map<String, dynamic> since all icons are identical. Instead use icon directly inside ListTile. The below code adds 1 item for each. If you want to add all items at once, you can change _addNewUploadDoc to

void _addNewUploadDoc() {
  if(listSelection.length != selected.length){
    for (int i = 0; i < listSelection.length-1; i  ) {
      selected.add(listSelection[i]);
    }
    setState(() {});
  }
}

Code:

import 'package:flutter/material.dart';

class UploadDoc extends StatefulWidget {
  const UploadDoc({Key? key}) : super(key: key);

  @override
  State<UploadDoc> createState() => _UploadDocState();
}

class _UploadDocState extends State<UploadDoc> {
  final List<Map<String, dynamic>> listSelection = [
    {
      'id': 0,
      'header': 'Muat Naik Surat Rasmi Permohonan',
      'title': 'Muat Naik Surat Rasmi',
    },
    {
      'id': 1,
      'header': 'Surat Lantikan Peguam',
      'title': 'test',
    },
    {
      'id': 2,
      'header': 'Surat hubungan peguam dan pemilik daftar',
      'title': 'test',
    },
  ];
  final List<Map<String, dynamic>> selected = [];

  // 'icon': const Icon(Icons.add_circle_outlined),
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    if (selected.isEmpty) {
    selected.add(listSelection[0]);
    }
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        itemCount: selected.length,
        itemBuilder: (ctx, index) {
          return Column(
            children: [
              Container(
                  width: double.infinity,
                  height: 30,
                  color: Colors.grey,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      const SizedBox(width: 10),
                      Text(listSelection[index]['header'],
                          style: const TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.bold)),
                    ],
                  )),
              ListTile(
                leading: const Icon(Icons.add_circle_outlined),
                title: Text(listSelection[index]['header']),
                onTap: () => _addNewUploadDoc(),
              ),
              const Divider(thickness: 1)
            ],
          );
        },
      ),
    );
  }

  void _addNewUploadDoc() {
    setState(() {
      print('_addNewUploadDzzoc');
      print(selected.length);
      print(listSelection.length);
      if (listSelection.length > selected.length) {
        selected.add(listSelection[selected.length]);

      }
    });
  }
}