代码之家 › 专栏 › 技术社区 › Coder

颤振中的静止API

flutter api rest database

Coder · 技术社区 · 7 年前

我有一个项目,其中我有一个Python数据库,我有一个Flutter用户界面。

1 回复 | 直到 7 年前

creativecreatorormaybenot 7 年前

是的,您可以很容易地将REST API与Flutter一起使用。
offers an http package 对于简单的HTTP请求,还有其他可用的 Dart Pub

与 http 包,您甚至可以将REST API请求集成到很容易使用 FutureBuilder :

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 .

Alan John 7 年前

步骤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--),
                ],


              );

            })
    );
  }


}