Search code examples
androidflutterlistviewflutter-listviewflutter-futurebuilder

Information from api doesn't show - Flutter


I have a problem with Future builder in Flutter. It gets the info from api successfully but doesn't show it. When I put print and print the info from api, it is ok and it shows the movies name without any problems. here is my code:

class Search extends StatefulWidget {
  final String value;
  Search({Key key, String this.value}) : super(key: key);
  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  var title;

  Future getSearch({index}) async {
    http.Response response = await http.get(
        'https://api.themoviedb.org/3/search/company?api_key=6d6f3a650f56fd6b3347428018a20a73&query=' +
            widget.value);
    var results = json.decode(response.body);
    setState(() {
      this.title = results['results'];
    });
    return title[index]['name'];
  }

  getName(index) {
    return title[index]['name'];
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          backgroundColor: Color(0xff1d1d27),
          body: Column(
            children: [
              Expanded(
                  child: FutureBuilder(
                initialData: [],
                future: getSearch(),
                builder: (context, snapshot) {
                  return ListView.builder(itemBuilder: (context, index) {
                    Padding(
                      padding:
                          EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                      child: Container(
                        color: Colors.white,
                        child: Text(getName(index).toString()),
                      ),
                    );
                  });
                },
              ))
            ],
          )),
    );
  }
}

Solution

  • Please Use this code, It works fine to fetch the names and show them on the list,

    import 'dart:convert';
    
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    
    class Search extends StatefulWidget {
      final String value;
      Search({Key key, String this.value}) : super(key: key);
      @override
      _SearchState createState() => _SearchState();
    }
    
    class _SearchState extends State<Search> {
      var title;
      var results;
    
      getSearch() async {
        http.Response response = await http.get(
            'https://api.themoviedb.org/3/search/company?api_key=6d6f3a650f56fd6b3347428018a20a73&query=' +
                widget.value);
        results = json.decode(
            response.body); //make it global variable to fetch it everywhere we need
        return results['results'][0]['name'];
      }
    
      getName(index) {
        return results['results'][index]['name'];
      }
    
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
              backgroundColor: Color(0xff1d1d27),
              body: Column(
                children: [
                  Expanded(
                      child: FutureBuilder(
                    // initialData: [],
                    future: getSearch(),
                    builder: (context, snapshot) {
                      String name =
                          snapshot.data; // to get the data from the getSearch
                      print(name);
                      if (snapshot.hasData) {
                        // if there is data then show the list
                        return ListView.builder(
                            itemCount: results['results']
                                ?.length, // to get the list length of results
                            itemBuilder: (context, index) {
                              return Padding(
                                padding: EdgeInsets.symmetric(
                                    horizontal: 30, vertical: 20),
                                child: Container(
                                  color: Colors.white,
                                  child: Text(getName(index)
                                      .toString()), // pass the index in the getName to get the name
                                ),
                              );
                            });
                      } else {
                        // if there is no data or data is not loaded then show the text loading...
                        return new Text("Loading...",
                            style: TextStyle(fontSize: 42, color: Colors.white));
                      }
                    },
                  ))
                ],
              )),
        );
      }
    }
    

    P.S
    To Learn the basics of Futurebuilder You can see this article For more learning

    I have commented the code to explain more to you.