Flutter 中的 REST API

Posted 2023-02-23

【中文标题】Flutter 中的 REST API

【英文标题】：REST API in flutter

【发布时间】：2019-01-25 10:46:30

【问题描述】：

我有一个项目，其中有一个 Python 数据库和一个 Flutter ui。 无论如何我可以使用 REST API 来连接它们吗？我做后端的队友说他们的数据库将使用 REST API，所以如果我能做到这一点会很有用。

【问题讨论】：

“python 数据库”是什么意思？ Flutter 中的 HTTP 请求问题到底在哪里？

flutter.io/cookbook/networking/fetch-data

【参考方案1】：

用于调用 REST API 并在列表视图中显示的简单 cade。

第 1 步： 像这样创建一个模型类

class ItemSubCat
  final String ItemCode;
  final String ItemName;

  ItemSubCat(
      this.ItemCode, this.ItemName);

  factory ItemSubCat.fromJson(Map<String, dynamic> parsedJson)
    return ItemSubCat(
        ItemCode: parsedJson['ItemCode'],
        ItemName: parsedJson['ItemName']);
  

第 2 步：

List<ItemSubCat> parsePosts(String responseBody) 
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<ItemSubCat>((json) => ItemSubCat.fromJson(json)).toList();


Future<List<ItemSubCat>> fetchsubcat(http.Client client) async 
  var connectivityResult = await (Connectivity().checkConnectivity());
  if (connectivityResult == ConnectivityResult.mobile||connectivityResult == ConnectivityResult.wifi) 

    final response = await client.get('Your Api Url');
    //print(response.body);
    return compute(parsePosts, response.body);
   else  
    Toast.show(message: "Please check your network conenction", duration: Delay.SHORT, textColor: Colors.black);
  

第 3 步：

class ItemSubCategory extends StatelessWidget 
  final String ItemCatCode;
  ItemSubCategory(Key key, @required this.ItemCatCode) : super(key: key);


  @override
  Widget build(BuildContext context) 
    return  new Scaffold(
        appBar: AppBar(
          elevation: 0.0,
          backgroundColor: Colors.transparent,
          iconTheme: IconThemeData.fallback(),
          title: Text('Category', style: TextStyle(color: Colors.black)),
          centerTitle: true,
        ),
        body: FutureBuilder<List<ItemSubCat>>(
          future: fetchsubcat(http.Client()),
          builder: (context, snapshot) 
            if (snapshot.hasError) print(snapshot.error);
            return snapshot.hasData
                ? GridViewPosts(items: snapshot.data)
                : Center(child: CircularProgressIndicator());
          ,
        ),
      );

  

第 4 步：

class GridViewPosts extends StatelessWidget 
  final List<ItemSubCat> items;
  GridViewPosts(Key key, this.items) : super(key: key);
  @override
  Widget build(BuildContext context) 
    return Container(
        child: new GridView.builder(
            itemCount: items.length,
            shrinkWrap: true,
            gridDelegate:
            new SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3),
            itemBuilder: (BuildContext context, int position) 
              return new  Column(
                children: <Widget>[
                  Divider(height: 0.0),
                  cardDetails(--You pass your data to listitems--),
                ],


              );

            )
    );
  

在这里你为一个列表项（cardDetails）设计你的小部件

【参考方案2】：

是的，您可以轻松地将 REST API 与 Flutter 结合使用。 Dart offers an http package 用于简单的 HTTP 请求，Dart Pub 上还有其他可用的。

使用http 包，您甚至可以使用FutureBuilder 轻松地将您的REST API 请求集成到构建树：

FutureBuilder(
  future: http.get('https://your-rest-api-domain.xyz/get-images?amount=5'),
  builder: (context, snapshot) 
    // you can easily work with your request results in here and return a widget
  ,
)

正如评论中提到的cricket_007，Flutter 也是provides a cookbook entry on this topic。

【讨论】：

另外，我如何使用这种方法将数据发送到我的服务器？

@Coder First example 在我链接的 README 页面中解释了这一点（使用 http.post 而不是 http.get）。