如何从 flutter 中的另一个小部件刷新列表视图？

Question

I am new to flutter, and I am trying to refresh my list of files after adding a file in my PDF app. Listview and add button I am using are in different widgets. Refresh function I have used is working for the delete button which is in the same widget as listview and gives error for the add button which is in a different widget from the List view. In both instances,I am trying to update the List view.

`

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

  @override
  State<ListFiles> createState() => _ListFilesState();
}

class _ListFilesState extends State<ListFiles> {
  final storage = FirebaseStorage.instance;
  late Future<ListResult> futureFiles;

  String pathPDF = "";

  final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    futureFiles = FirebaseStorage.instance.ref('files').listAll();
  }

  @override
  Widget build(BuildContext context) => SizedBox(
        height: 450,
        child: RefreshIndicator(
          onRefresh: onRefresh,
          child: FutureBuilder<ListResult>(
            future: futureFiles,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                final files = snapshot.data!.items;

                return  ListView.builder(
                    itemCount: files.length,
                    itemBuilder: (context, index) {
                      final file = files[index];

                      return ListTile(
                        title: Text(file.name),
                        onTap: ()  async {
                          String url = await getFirebaseDownUrl(file);
                          Navigator.push(context,
                              MaterialPageRoute(builder: (BuildContext context) =>
                                  Scaffold(
                                      appBar: AppBar(
                                          title: Text(file.name),
                                        backgroundColor: Colors.red,
                                      ),
                                      body: SfPdfViewer.network(
                                        url,
                                        key: _pdfViewerKey,
                                      )
                                  ),
                              ),
                          );
                        },
                        trailing: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            IconButton(
                              onPressed: () {
                                _dialogBuilder(context, file);
                              },
                              icon: const Icon(
                                Icons.delete,
                                color: Colors.red,
                              ),
                            ),
                          ],
                        ),
                      );
                    }
                );
              } else if (snapshot.hasError) {
                return Column(
                  children: [
                    ListTile(
                      leading: const Icon(
                        Icons.error,
                        color: Colors.redAccent,
                      ),
                      title: const Text('Error occurred'),
                      trailing: IconButton(
                        onPressed: () {
                          setState(() {
                            onRefresh();
                          });
                        },
                        icon: const Icon(
                          Icons.refresh,
                          color: Colors.blue,
                        ),
                      ),
                    ),
                  ],
                );
              } else {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
            },
          ),
        ),
      );

  Future<String> getFirebaseDownUrl(Reference ref) async {
    print(await ref.getDownloadURL());
    return ref.getDownloadURL();
  }

  Future downloadFile(Reference ref) async {
    List<int> textBytes = utf8.encode('{$ref}');
    Uint8List data = Uint8List.fromList(textBytes);
    String mimeType = "application/pdf";

    DocumentFileSavePlus.saveFile(data, ref.name, mimeType);

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Downloaded ${ref.name} successfully')),
    );
  }

  Future deleteFile(Reference ref) async {
    // Create a reference to the file to delete
    final storageRef = FirebaseStorage.instance.ref();
    final deleteRef = storageRef.child(ref.fullPath);

    // Delete the file
    await deleteRef.delete();

    // setState(() {
    //   futureFiles = FirebaseStorage.instance.ref('files').listAll();
    // });
    // build(context);

    onRefresh();

    //  WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));

    ScaffoldMessenger.of(context).showSnackBar(
      // SnackBar(content: Text('Deleted file ${ref.name}')),
      SnackBar(
        content: Row(
          children: [
            Text('${ref.name} deleted successfully'),
            const Spacer(
              flex: 2,
            ),
            TextButton(
              onPressed: () {
                onRefresh();
              },
              child: const Text(
                'Refresh',
                style: TextStyle(color: Colors.blue),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _dialogBuilder(BuildContext context, Reference file) {
    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Warning'),
          content: const Text('Are you sure you want to delete the file?'),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('NO', style: TextStyle(color: Colors.green)),
            ),
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
                deleteFile(file);
              },
              child:
                  const Text('YES', style: TextStyle(color: Colors.redAccent)),
            ),
          ],
        );
      },
    );
  }

  Future onRefresh() async {
    print('Page refreshing...');

    setState(() {
      futureFiles = FirebaseStorage.instance.ref('files').listAll();
      print('Status updated...');
    });

    build(context);
    // ListFiles();
    print('Page refreshed...');
  }
}

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

  @override
  State<AddButton> createState() => _AddButtonState();
}

class _AddButtonState extends State<AddButton> {
  PlatformFile? pickedFile;
  UploadTask? uploadTask;

  late Future<ListResult> futureFiles;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(20.0),
          child: FloatingActionButton(
            backgroundColor: const Color(0xFFFF1D1D),
            foregroundColor: Colors.white,
            onPressed: () async {
              addFile();
            },
            child: const Icon(Icons.add),
          ),
        ),
      ],
    );
  }

  Future addFile() async {
    final result = await FilePicker.platform.pickFiles();
    if (result == null) return;

    setState(() {
      pickedFile = result.files.first;
    });

    uploadFile();
  }

  Future uploadFile() async {
    final path = 'files/${pickedFile!.name}';
    final file = File(pickedFile!.path!);
    final ref = FirebaseStorage.instance.ref().child(path);
    final _ListFilesState Listfile = new _ListFilesState();

    setState(() {
      uploadTask = ref.putFile(file);
    });

    setState(() {
      uploadTask = null;
    });

    if (pickedFile != null) {
      addtoFirestore();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Row(
            children: [
              const Text('File uploaded successfully!'),
              const Spacer(
                flex: 2,
              ),
              TextButton(
                onPressed: () => Listfile.onRefresh(),
                child: const Text(
                  'Refresh',
                  style: TextStyle(color: Colors.blue),
                ),
              ),
            ],
          ),
        ),
      );
    }
  }

`

This is the response msg I get when refresh button of the snackbar is clicked.

enter image description here Is this implementation correct? Thank you for your time.

Answer 1

add a callback function to your ListFiles class:

    setStateAddedNewClient(  item ) {
    setState(() {
      futureFiles.add(item);
      
    });
  }

then add function parameter to your AddButton class:

final  Function(dynamic) callback;
const AddButton({Key? key ,required this.callback }) : super(key: key);

and send file to callback function in your addFile function.

  Future addFile() async {
    final result = await FilePicker.platform.pickFiles();
    if (result == null) return;

    setState(() {
      pickedFile = result.files.first;
      callback(result.files.first);
    });

    uploadFile();
  }

Answer 2

you can use a HookWidget

useEffect((() {
//request that you fetch data to listview
      context.read<Cubit>().getListRequest();
      return null;
    }), [dependenciesFromAnotherWidgetToRefreshList]);