Type 'Future<dynamic>' is not subtype of type 'Widget'

Issue

I am showing markers from API on google maps. Here is my build method. When the program reaches the _widgetbuilder() method, it throws the specific error of type Future is not a subtype of the widget. If someone could please help to solve the problem and also tell me that what exactly this error means.....

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  body: FutureBuilder<List<MarkersOnMap>>(
    future: future,
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (!snapshot.hasData)
        return Container(
          child: Center(
            child: CircularProgressIndicator(),
          ),
        );
      if (snapshot.hasData && snapshot.data.isEmpty) {
        return Center(
          child: Container(
            child: Column(
              children: [
                Text(
                  'No Properties Added Yet\nPlease Add Some!',
                  style:
                      TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                ElevatedButton.icon(
                  onPressed: () {
                    Navigator.push(
                      context,
                      PageTransition(
                        duration: Duration(microseconds: 500),
                        type: PageTransitionType.fade,
                        child: AddNewEproperty(
                            createEproperty: widget.createEproperty),
                      ),
                    );
                  },
                  label: Text('Add'),
                  icon: Icon(Icons.add),
                ),
              ],
            ),
          ),
        );
      } else
        _widgetbuilder();

      if (snapshot.hasData) {
        return ListView.builder(
          itemCount: allWidgets.length + 1,
          shrinkWrap: true,
          padding: EdgeInsets.only(top: 16),
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (context, i) {
            return Stack(
              children: <Widget>[
                Container(),],);},);},},),);}

This is the _widgetbuilder() method. When it reaches this return _widgetbuilder, throws _typeerror.

    _widgetbuilder() async {
    allWidgets = [];
    widget.markersonmap = await future;
    
    widget.markersonmap.forEach(
      (element) {
        print(element);
        allWidgets.add(
          Container(
            height: 25,
            width: 50,
            child: new DecoratedBox(
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.black),
                  borderRadius: BorderRadius.circular(5.0),
                  color: Colors.black54),
              child: Text(
                element.ePropertiesCardsList.price.toString(),
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
            ),
          ),
        );
      },
    );
  }

Solution

You are getting this error because your function _widgetbuilder returns Future<dynamic> because the function is async.

Widget _widgetbuilder(){
// code here
}

The function should be in this structure to return of type Widget. The code that needs to be async should either be taken out of build function or use .then pattern for async code instead of async await if you really need to. This short 9 min video will help you understand async better in flutter.

Answered By - Binabh Devkota