在将Flutter与后端集成之前,在Flutter中构建 UI 是没有用的。 GET 请求用于从您的后端提取有用的数据以在您的应用程序中使用它。要在Flutter执行 GET 请求,我们需要遵循 3 个步骤 –
- 获取最新的dart Http 包。
- 在依赖项部分的 pubspec.yaml 文件中输入包。
- 在您的 main.js 文件中导入包。dart文件。
在 URL 部分,您可以输入后端 Rest API 链接。
笔记 :
- 也可以分主线。 dart文件在各个部分,但为简单起见,它仅在一个文件中执行。
- 这里使用了一个来自互联网的随机 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),
),
);
}
},
),
),
),
);
}
}