Widget function does not work in Column widget?

Question

I am building an MusicPlayer app So I need to view list of musicTiles so user can select song from internal storage and play it. So I used File_Picker in appbar through add button from which user can pick up music from their local storage. So I used async and await keyword in my file_picking function. and i store the file_path and file_names in the List type of variables. After that I used my _buidMusicTile() function in my column widget but it flutter gives following Error :

=> type 'Future' is not a subtype of type 'Widget'

Code :

class _MusicPageState extends State<MusicPage> {
  
  FileType _pickingType = FileType.any;
  TextEditingController _controller = TextEditingController();
  List<String> listofAudioFilesPath;
  List<String> listofAudioNames;

  @override
  void initState() {
    super.initState();
    _controller.addListener(() => _extension = _controller.text);
  }
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    //const Key centerKey = ValueKey('bottom-sliver-list');
    return Scaffold(
      backgroundColor: Colors.brown[300],
      appBar: AppBar(
        actions: [
          Container(
            width: size.width,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  IconButton(
                    icon: Icon(Icons.sort),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.add_circle),
                    onPressed: () async {
                      // _openFileExplorer();
                      FilePickerResult result = await FilePicker.platform
                          .pickFiles(allowMultiple: true);
                      if (result != null) {
                        listofAudioFilesPath = result.paths.toList();

                        listofAudioNames = result.names.toList();

                        print(listofAudioNames);
                        print(listofAudioFilesPath);
                      }
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
      body: Column(
        children: [
          Text('Music Library'),
          SizedBox(height: 10),
          Stack(
            children: [
              _buildMusicTile(listofAudioFilesPath, listofAudioNames),
            ],
          ),
        ],
      ),
    );
  }
}

_buildMusicTile(
    List<String> listofAudioFilesPath, List<String> listofAudioNames) async {
  List<String> listOfPath = await listofAudioFilesPath;
  List<String> listOfFiles = await listofAudioFilesPath;
  if (listofAudioFilesPath != null && listofAudioNames != null) {
    return ListView.separated(
      itemCount: listofAudioNames.length,
      separatorBuilder: (BuildContext context, int index) {
        return Container(
          height: 10,
          color: Colors.white,
        );
      },
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          leading: Icon(Icons.play_circle_filled),
          title: Text(
            '$listofAudioNames[$index]',
            style: TextStyle(color: Colors.black, fontSize: 25),
          ),
        );
      },
    );
  } else {
    return Center(
      child: Column(
        children: [
          Text(
            '$listofAudioNames',
            style: TextStyle(color: Colors.black, fontSize: 25),
          ),
          CircularProgressIndicator(),
        ],
      ),
    );
  }
}

Solution

You can't use await inside the body or method which called from the body because that need to render on the screen, UI cannot wait for any data, we need to update that.

Solution:

Just remove await and async from method _buildMusicTile like

  List<String> listOfPath = listofAudioFilesPath;
  List<String> listOfFiles = listofAudioFilesPath;

And add setState() inside onPressed()

setState(() {
        print(listofAudioNames);
        print(listofAudioFilesPath);
  });

Comments

[Sajith]

try use FutureBuilder

[user11908262]

Brother It gives same error still : The following _TypeError was thrown building MudicPage(dirty, dependencies: [MediaQuery], state: _MusicPageState#1cfac): type 'Future<dynamic>' is not a subtype of type 'Widget'

[Jitesh Mohite]

Also, remove the async keyword from _buildMusicTile()

[user11908262]

Thanks brother for help.