设置自己的 Rest API JSON 文件

Question

我正在尝试找出设置我自己的 JSON 文件并加载它的最佳和最简单的方法，以便每个使用我的 flutter 应用程序的人都可以访问它。我对 flutter 和编程还比较陌生。

最好的方法是什么？我看过一些教程，人们已经从第三方获得了 URL，这样他们就可以轻松地在他们的应用程序上显示数据。对于我想做的事情，没有这样的API，所以我必须自己设置它并用我自己的数据填充它。

Answer 1

1) Setting up the Project:
//Install the HTTP dependency and add it in pubspec.yaml file in order to use API in the application.

dependencies:
  http:
2) Creating a Request:
//This basic request uses the get method to fetch the data from the specified URL in JSON format. Each request returns a Future<Response>. A Future<> is used to represent a potential value or error that will be available at some time in the future. For example, you made a request to a server now the response will take less than a few seconds. This time is represented from Future<>. Here, we use the async & await feature which ensures that the response is asynchronous. It means that until & unless we get the response, it will not move further.

Future<List<Fruit>> fetchFruit() async {
final response = await http.get(url);
}
String url = "Your_URL";

3) Creating the Classes:
//Create a Fruit class & save it as fruit.dart as shown below:

class Fruit {
final int id;
final String title;
final String imgUrl;
final int quantity;

Fruit(
this.id,
this.title,
this.imgUrl,
this.quantity,
);
factory Fruit.fromMap(Map<String, dynamic> json) {
return Fruit(json['id'], json['title'], json['imgUrl'], json['quantity']);
}
factory Fruit.fromJson(Map<String, dynamic> json) {
return Fruit(json['id'], json['title'], json['imgUrl'], json['quantity']);
}
}

4) Create Class objects:
//Create the FruitItem in fruitItem.dart

import 'package:flutter/material.dart';
import 'fruit.dart';

class FruitItem extends StatelessWidget {
FruitItem({this.item});

final Fruit item;

Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(2),
height: 140,
child: Card(
elevation: 5,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.network(
this.item.imgUrl,
width: 200,
),
Expanded(
child: Container(
padding: EdgeInsets.all(5),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(this.item.title,
style: TextStyle(fontWeight: FontWeight.bold)),
Text("id:${this.item.id}"),
Text("quantity:${this.item.quantity}"),
],
)))
]),
));
}
}

5) Create a List of fruits:
//Create a FruitList class in fruitList.dart as shown below:

import 'package:flutter/material.dart';
import 'fruit.dart';
import 'fruitItem.dart';

class FruitList extends StatelessWidget {
final List<Fruit> items;

FruitList({Key key, this.items});
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return FruitItem(item: items[index]);
},
);
}
}
6) Displaying the Responses:
Display the response on the screen from main.dart file as shown below:

import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:flutter/material.dart';
import 'fruit.dart';
import 'fruitItem.dart';
import 'fruitList.dart';

class MyHomePage extends StatelessWidget {
final String title;
final Future<List<Fruit>> products;

MyHomePage({Key key, this.title, this.products}) : super(key: key);

@override
Widget build(BuildContext context) 
{
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF4CAF50),
title: Text("GeeksForGeeks"),
),
body: Center(
child: FutureBuilder<List<Fruit>>(
future: products,
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? FruitList(items: snapshot.data)
: Center(child: CircularProgressIndicator());
},
),
));
}
}