FLUTTER REST API
在本文中，我们将学习如何在Flutter应用中集成REST API。众所周知，如今几乎所有应用都使用API通过远程数据。对于任何希望在Flutter领域发展的开发者来说，本文都至关重要。因此，让我们一步一步地了解如何在Flutter中集成REST API。
我们使用http插件从应用程序调用REST API。http提供了get、post、put、read等方法，用于从远程位置发送和接收数据。
本文使用了REST API的虚拟示例。您可以改为使用您项目的API。
输出
所需插件：http: ^0.12.0+2
编程步骤
-
第一步也是最基本的一步是在Flutter中创建一个新应用程序。如果您是Flutter初学者，可以查看我的博客“在Flutter中创建第一个应用程序”。我创建了一个名为“flutter_rest_api”的应用。
-
打开项目中的pubspec.yaml文件，并在其中添加以下依赖项。
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
http: ^0.12.0+2
- 创建一个名为“rest_api.dart”的新文件，用于配置REST API URL以及用于发送和接收数据的函数。以下是应用程序中REST API的编程实现。
import 'dart:convert';
import 'package:http/http.dart' as http;
class URLS {
static const String BASE_URL = 'http://dummy.restapiexample.com/api/v1';
}
class ApiService {
static Future<List<dynamic>> getEmployees() async {
// RESPONSE JSON :
// [{
// "id": "1",
// "employee_name": "",
// "employee_salary": "0",
// "employee_age": "0",
// "profile_image": ""
// }]
final response = await http.get('${URLS.BASE_URL}/employees');
if (response.statusCode == 200) {
return json.decode(response.body);
} else {
return null;
}
}
static Future<bool> addEmployee(body) async {
// BODY
// {
// "name": "test",
// "age": "23"
// }
final response = await http.post('${URLS.BASE_URL}/create', body: body);
if (response.statusCode == 200) {
return true;
} else {
return false;
}
}
}
- 现在，我们将在应用程序中消耗REST API方法。我们已经创建了一个小部件来显示所有员工列表。打开main.dart并实现以下代码。
import 'package:flutter/material.dart';
import 'package:flutter_rest_api/rest_api.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple,
),
home: EmployeePage(),
);
}
}
class EmployeePage extends StatefulWidget {
@override
_EmployeePageState createState() => _EmployeePageState();
}
class _EmployeePageState extends State<EmployeePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter REST API'),
),
body: FutureBuilder(
future: ApiService.getEmployees(),
builder: (context, snapshot) {
final employees = snapshot.data;
if (snapshot.connectionState == ConnectionState.done) {
return ListView.separated(
separatorBuilder: (context, index) {
return Divider(
height: 2,
color: Colors.black,
);
},
itemBuilder: (context, index) {
return ListTile(
title: Text(employees[index]['employee_name']),
subtitle: Text('Age: ${employees[index]['employee_age']}'),
);
},
itemCount: employees.length,
);
}
return Center(
child: CircularProgressIndicator(),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AddNewEmployeePage(),
),
);
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
- 为了添加新员工，我们创建了另一个名为AddNewEmployeePage的页面。
该页面将新员工添加到列表中。以下是实现该功能的代码，我在main.dart文件中创建了相关小部件。
class AddNewEmployeePage extends StatefulWidget {
AddNewEmployeePage({Key key}) : super(key: key);
_AddNewEmployeePageState createState() => _AddNewEmployeePageState();
}
class _AddNewEmployeePageState extends State<AddNewEmployeePage> {
final _employeeNameController = TextEditingController();
final _employeeAge = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('New Employee'),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
TextField(
controller: _employeeNameController,
decoration: InputDecoration(hintText: 'Employee Name'),
),
TextField(
controller: _employeeAge,
decoration: InputDecoration(hintText: 'Employee Age'),
keyboardType: TextInputType.number,
),
RaisedButton(
child: Text(
'SAVE',
style: TextStyle(
color: Colors.white,
),
),
color: Colors.purple,
onPressed: () {
final body = {
"name": _employeeNameController.text,
"age": _employeeAge.text,
};
ApiService.addEmployee(body).then((success) {
if (success) {
showDialog(
builder: (context) => AlertDialog(
title: Text('Employee has been added!!!'),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.pop(context);
_employeeNameController.text = '';
_employeeAge.text = '';
},
child: Text('OK'),
)
],
),
context: context,
);
return;
}else{
showDialog(
builder: (context) => AlertDialog(
title: Text('Error Adding Employee!!!'),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('OK'),
)
],
),
context: context,
);
return;
}
});
},
)
],
),
),
),
);
}
}
- 太棒了，您已经完成了Flutter REST API集成。在设备或模拟器上运行此项目并查看输出。
结论
在本文中，我们学习了如何在Flutter中实现REST API。我们使用了http插件的get和post方法。
Git: https://github.com/myvsparth/flutter_rest_api
