简体   繁体   中英

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()),
                      ),
                    );
                  });
                },
              ))
            ],
          )),
    );
  }
}

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));
                  }
                },
              ))
            ],
          )),
    );
  }
}

PS
To Learn the basics of Futurebuilder You can see this article For more learning

I have commented the code to explain more to you.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM