Flutter中的 HTTP GET 响应

在将 Flutter 与后端集成之前，在Flutter中构建 UI 是没有用的。 GET 请求用于从后端提取有用数据以在应用程序中使用。要在Flutter中执行 GET 请求，我们需要遵循 3 个步骤 -

1. 获取最新的dart Http 包。
2. 在依赖项部分的 pubspec.yaml 文件中输入包。
3. 在 main.js 中导入包。dart文件。

在 URL 部分，您可以输入您的后端 Rest API 链接。

笔记：

• 也可以分主线。 dart文件中的各个部分，但为简单起见，它仅在一个文件中执行。
• 这里使用了一个来自 Internet 的随机 JSON GET 请求 URL，可以替换为任何后端 Restful API。

Dart

import 'dart:convert';
  
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
  
//Creating a class user to store the data;
class User {
  final int id;
  final int userId;
  final String title;
  final String body;
  
  User({
    this.id,
    this.userId,
    this.title,
    this.body,
  });
}
  
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State {
//Applying get request.
  
  Future> getRequest() async {
    //replace your restFull API here.
    String url = "https://jsonplaceholder.typicode.com/posts";
    final response = await http.get(url);
  
    var responseData = json.decode(response.body);
  
    //Creating a list to store input data;
    List users = [];
    for (var singleUser in responseData) {
      User user = User(
          id: singleUser["id"],
          userId: singleUser["userId"],
          title: singleUser["title"],
          body: singleUser["body"]);
  
      //Adding user to the list.
      users.add(user);
    }
    return users;
  }
  
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Http Get Request."),
          leading: Icon(
            Icons.get_app,
          ),
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: FutureBuilder(
            future: getRequest(),
            builder: (BuildContext ctx, AsyncSnapshot snapshot) {
              if (snapshot.data == null) {
                return Container(
                  child: Center(
                    child: CircularProgressIndicator(),
                  ),
                );
              } else {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (ctx, index) => ListTile(
                    title: Text(snapshot.data[index].title),
                    subtitle: Text(snapshot.data[index].body),
                    contentPadding: EdgeInsets.only(bottom: 20.0),
                  ),
                );
              }
            },
          ),
        ),
      ),
    );
  }
}