flutter调用api_如何在Flutter（REST API）中进行API调用

心已赠人 2023-02-25 07:01 36阅读 0赞

flutter调用api

在本文中，我们将看一下如何快速进行API调用并使用简单的REST API。

在这里查看我在Flutter上的其他一些帖子：

*  [Flutter vs React Native][]
 *  [了解Flutter中的BLoC架构][Flutter_BLoC] （强烈建议）
 *  [在Flutter中构建ListView（RecyclerView）][Flutter_ListView_RecyclerView] （推荐）

我们将创建一个简单的应用程序，在其中我将对以下[网址][Link 1]进行API调用： [https][Link 1] : [//jsonplaceholder.typicode.com/posts][Link 1]并在列表中打印出标题。

这将演示如何在flutter中进行API调用以及如何使用**convert**包解码**json** 。 所以，让我们开始吧。

##  ##

首先，在Android Studio中创建一个新的flutter项目，并根据需要命名。

我将其命名为： **flutter\_api\_calls** 。

![format_png][]

接下来，清除您获得的所有样板代码。 我们将从头开始编写所有内容。

##  ##

接下来，我将设置项目的框架。 这意味着添加一个AppBar，一个脚手架并编写主要功能。

看起来像这样

import 'package:flutter/material.dart' ;  void main() => runApp(MyApp());  MyApp class extends StatelessWidget { 
       // This widget is the root of your application. 
       @override 
       Widget build(BuildContext context) { 
         return MaterialApp( 
           title: 'Flutter Demo' , 
           theme: ThemeData( 
             primarySwatch: Colors.blue, 
           ), 
           home: MyHomePage(title: 'Flutter Api Call' ), 
         ); 
       }  }  class MyHomePage extends StatefulWidget { 
       MyHomePage({Key key, this .title}) : super (key: key); 
       final String title; 
       @override 
       _MyHomePageState createState() => _MyHomePageState();  }  class _MyHomePageState extends State<MyHomePage> {   
       @override 
       Widget build(BuildContext context) { 
         return null ; 
       }    }

##  ##

首先，我们需要在**pubspec.yaml**文件中包含http包。 在依赖项下添加此行，该行将显示**fld sdk。** 这是您的pubspec.yaml的样子：

name: flutter_api_calls  description: Flutter application to demonstrate api calls.  # The following defines the version and build number for your application.  # A version number is three numbers separated by dots, like 1.2 . 43  # followed by an optional build number separated by a +.  # Both the version and the builder number may be overridden in flutter  # build by specifying --build-name and --build-number, respectively.  # In Android, build-name is used as versionName while build-number used as versionCode.  # Read more about Android versioning at https: //developer.android.com/studio/publish/versioning  # In iOS, build-name is used as CFBundleShortVersionString build-number used as CFBundleVersion. # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.  # Read more about iOS versioning at  # https: //developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html  version: 1.0 . 0 + 1  environment: 
       sdk: ">=2.1.0 <3.0.0"  dependencies: 
       flutter: 
         sdk: flutter 
       http: ^ 0.12 . 0 
       # The following adds the Cupertino Icons font to your application. 
       # Use with the CupertinoIcons class for iOS style icons. 
       cupertino_icons: ^ 0.1 . 2  dev_dependencies: 
       flutter_test: 
         sdk: flutter

现在，将**http**包导入到您的main.dart文件中：

import 'package:http/http.dart' as http;

让我们创建一个函数**getData（），**该函数将从API中获取数据。

Future<String> getData() {  }

###  ###

我们将进行API调用，这可能需要一些时间才能返回响应。 这种情况需要异步编程。

基本上，我们需要等到api调用完成并返回结果。 一旦完成，我们将显示列表。

所以，这就是我们要做的。 我们将使用http对象进行api调用，并等待其完成。

Future<String> getData() async { 
       var response = await http.get( 
           Uri.encodeFull( " https://jsonplaceholder.typicode.com/posts " ), 
           headers: { "Accept" : "application/json" }); 
       setState(() { 
         data = json.decode(response.body); 
       }); 
       return "Success" ;  }

要在函数中使用await关键字，我们需要将函数标记为异步。 并且任何**异步**函数都具有**Future <T>**的返回类型，其中T可以为void，int，string等。

**为了解码数据，我们使用：**

import 'dart:convert' ;

它为我们提供了json.decode（）方法，该方法可用于**反序列化JSON** 。 解码数据后，我们将通知视图层次结构该数据可用，并且可以将其填充到listview中。

这是代码的真正内容。 现在，我们需要向flutter应用程序添加一个**列表视图** 。

##  ##

接下来，我们将在flutter应用程序中添加一个listview。 如果您不知道如何在flutter中创建列表视图，请快速阅读我的另一篇文章：

*  阅读： [在Flutter中构建ListView（RecyclerView）][Flutter_ListView_RecyclerView]

让我们创建一个函数getList（）， **如果获取数据** ，它将返回List； **如果**响应尚未到达， **则**返回“ please wait”消息。

Widget getList() { 
       if (data == null || data.length < 1 ) { 
         return Container( 
           child: Center( 
             child: Text( "Please wait..." ), 
           ), 
         ); 
       } 
       return ListView.separated( 
         itemCount: data?.length, 
         itemBuilder: (BuildContext context, int index) { 
           return getListItem(index); 
         }, 
         separatorBuilder: (context, index) { 
           return Divider(); 
         }, 
       );  }

请注意，我们使用的是**ListView.separated**而不是普通的**ListView.builder** 。 原因是此列表视图已内置对分隔项的支持。 我们不需要显式检查索引。

为此构建列表项非常简单。 只需创建一个文本小部件并为其添加一些样式即可。

Widget getListItem( int i) { 
       if (data == null || data.length < 1 ) return null ; 
       if (i == 0 ) { 
         return Container( 
           margin: EdgeInsets.all( 4 ), 
           child: Center( 
             child: Text( 
               "Titles" , 
               style: TextStyle( 
                 fontSize: 22 , 
                 fontWeight: FontWeight.bold, 
               ), 
             ), 
           ), 
         ); 
       } 
       return Container( 
         child: Container( 
           margin: EdgeInsets.all( 4.0 ), 
           child: Padding( 
             padding: EdgeInsets.all( 4 ), 
             child: Text( 
               data[i][ 'title' ].toString(), 
               style: TextStyle(fontSize: 18 ), 
             ), 
           ), 
         ), 
       );  }

您可以在github上找到完整的代码：https://github.com/Ayusch/flutter-api-calls

##  ##

这是一个非常简单快捷的示例，说明如何开始在flutter中进行API调用。 尽管我建议为您的应用程序遵循适当的体系结构，但不要将所有代码都写在一个地方。

BLoC抖动架构非常强大。 在此处查看： [Flutter中的BLoC体系结构][Flutter_BLoC] 。 这将使您深入了解如何为**Flutter**应用程序编写健壮的**BLoC架构** 。

**\*重要\*** ：加入面向移动开发人员的**AndroidVille** [**SLACK**][SLACK]工作区，人们可以在这里分享对最新技术的了解，尤其是在**Android开发，RxJava，Kotlin，Flutter和一般的移动开发方面** 。

> 翻译自: [https://www.javacodegeeks.com/2019/09/how-to-make-an-api-call-in-flutter-rest-api.html][https_www.javacodegeeks.com_2019_09_how-to-make-an-api-call-in-flutter-rest-api.html]

flutter调用api

[Flutter vs React Native]: https://ayusch.com/flutter-vs-react-native/
[Flutter_BLoC]: https://ayusch.com/understanding-bloc-architecture-in-flutter/
[Flutter_ListView_RecyclerView]: https://ayusch.com/building-a-listview-in-flutter/
[Link 1]: https://jsonplaceholder.typicode.com/posts
[format_png]: /images/20230209/71184b0e636347908c36c16fac8eaac4.png
[SLACK]: https://rebrand.ly/73lbl3
[https_www.javacodegeeks.com_2019_09_how-to-make-an-api-call-in-flutter-rest-api.html]: https://www.javacodegeeks.com/2019/09/how-to-make-an-api-call-in-flutter-rest-api.html