Получить данные из веб-API в флаттер

Question

Я новичок во Flutter и хочу вставить данные, полученные API, в строковые переменные для использования в другой функции. Спасибо за вашу помощь

мой код: ------------

import 'dart:convert' as convert;
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main(){

  var infos;
  getData() async{
    String myUrl="https://api.jsonbin.io/b/5e1219328d761771cc8b9394";
    var req = await http.get(myUrl);
    infos = convert.jsonDecode(req.body);
    print(infos);
    return infos;
  }

  getData();

  // I want to Fetch data here in string variables


  runApp(new MaterialApp(
    title:'Fetch Data',
    home: new Scaffold(
      appBar:  AppBar(
        title: new Text('hello'),
        backgroundColor: Colors.amber,
      ),
      body: new Center(
        child: new Text('test'),
      ),
    ),
  ));
}

Answer 1

Это будет работать отлично, проверьте это:

class Person {
  final String name;
  final String education;
  final String skill;

  Person({this.name, this.education, this.skill});

  factory Person.fromJson(Map<String, dynamic> json) {
    return Person(
      name: json['name'],
      education: json['education'],
      skill: json['skill'],
    );
  }
}

class Fetch extends StatefulWidget {
  @override
  _FetchState createState() => _FetchState();
}

class _FetchState extends State<Fetch> {
  Future<Person> fetchPerson;

  Future<Person> getData() async {
    String myUrl = "https://api.jsonbin.io/b/5e1219328d761771cc8b9394";
    var response = await http.get(myUrl);
    Map<String, dynamic> responseJson = convert.jsonDecode(response.body);
    return Person.fromJson(responseJson);
  }

  @override
  void initState() {
    fetchPerson = getData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text('hello'),
        backgroundColor: Colors.amber,
      ),
      body: FutureBuilder(
        future: fetchPerson,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Name is: ${snapshot.data.name}',
                    textAlign: TextAlign.start,
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    'Education is: ${snapshot.data.education}',
                    textAlign: TextAlign.start,
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    'Skill is: ${snapshot.data.skill}',
                    textAlign: TextAlign.start,
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
            );
          } else if (snapshot.hasError) {
            Text(
              snapshot.error.toString(),
            );
          }
          return Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    );
  }
}

Вывод:

Answer 2

Вы должны использовать виджет с отслеживанием состояния для этого.

Следующий код может вам помочь.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() {
  runApp(
    new MaterialApp(
      title: 'Fetch Data',
      home: Home(),
    ),
  );
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    super.initState();
    getData().then((value) {
      setState(() {
        infos = value;
      });
    });
  }

  var infos;
  getData() async {
    String myUrl = "https://api.jsonbin.io/b/5e1219328d761771cc8b9394";
    var req = await http.get(myUrl);
    infos = json.decode(req.body);
    print(infos['name']);
    return infos['name'];
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: new Text('hello'),
        backgroundColor: Colors.amber,
      ),
      body: new Center(
        child: infos == null ? new Text('test') : Text(infos),
      ),
    );
  }
}