Flutter - Acessando API REST
Flutter fornece pacote http para consumir recursos HTTP. http é uma biblioteca baseada no futuro e usa os recursos de espera e assíncrono. Ele fornece muitos métodos de alto nível e simplifica o desenvolvimento de aplicativos móveis baseados em REST.
Conceitos Básicos
O pacote http fornece uma classe de alto nível e http para fazer solicitações da web.
A classe http fornece funcionalidade para realizar todos os tipos de solicitações HTTP.
Os métodos http aceitam um url e informações adicionais por meio do Dart Map (dados de postagem, cabeçalhos adicionais, etc.). Ele solicita o servidor e coleta a resposta de volta no padrão assíncrono / espera. Por exemplo, o código a seguir lê os dados do url especificado e os imprime no console.
print(await http.read('https://flutter.dev/'));Alguns dos métodos principais são os seguintes -
read - Solicite o url especificado por meio do método GET e retorne a resposta como Future <String>
get- Solicita o url especificado por meio do método GET e retorna a resposta como <Response> Futuro. A resposta é uma classe que contém as informações da resposta.
post - Solicite o url especificado por meio do método POST postando os dados fornecidos e retorne a resposta como <Response> futura
put - Solicite o url especificado por meio do método PUT e retorne a resposta como Future <Response>
head - Solicite o url especificado por meio do método HEAD e retorne a resposta como Future <Response>
delete - Solicite o url especificado por meio do método DELETE e retorne a resposta como Future <Response>
http também fornece uma classe de cliente HTTP mais padrão, cliente. cliente suporta conexão persistente. Será útil quando houver muitas solicitações a serem feitas a um determinado servidor. Ele precisa ser fechado corretamente usando o método de fechamento. Caso contrário, é semelhante à classe http. O código de amostra é o seguinte -
var client = new http.Client();
try {
print(await client.get('https://flutter.dev/'));
}
finally {
client.close();
}Acessando API de serviço do produto
Vamos criar um aplicativo simples para obter dados do produto de um servidor da web e, em seguida, mostrar os produtos usando ListView .
Crie um novo aplicativo Flutter no Android Studio, product_rest_app .
Substitua o código de inicialização padrão (main.dart) por nosso código product_nav_app .
Copie a pasta de ativos de product_nav_app para product_rest_app e inclua ativos dentro do arquivo pubspec.yaml.
flutter:
assets:
- assets/appimages/floppy.png
- assets/appimages/iphone.png
- assets/appimages/laptop.png
- assets/appimages/pendrive.png
- assets/appimages/pixel.png
- assets/appimages/tablet.pngConfigure o pacote http no arquivo pubspec.yaml conforme mostrado abaixo -
dependencies:
http: ^0.12.0+2Aqui, usaremos a versão mais recente do pacote http. O Android Studio enviará um alerta de pacote informando que o pubspec.yaml está atualizado.
Clique na opção Obter dependências. O Android Studio obterá o pacote da Internet e o configurará corretamente para o aplicativo.
Importe o pacote http no arquivo main.dart -
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;Crie um novo arquivo JSON, products.json com as informações do produto conforme mostrado abaixo -
[
{
"name": "iPhone",
"description": "iPhone is the stylist phone ever",
"price": 1000,
"image": "iphone.png"
},
{
"name": "Pixel",
"description": "Pixel is the most feature phone ever",
"price": 800,
"image": "pixel.png"
},
{
"name": "Laptop",
"description": "Laptop is most productive development tool",
"price": 2000,
"image": "laptop.png"
},
{
"name": "Tablet",
"description": "Tablet is the most useful device ever for meeting",
"price": 1500,
"image": "tablet.png"
},
{
"name": "Pendrive",
"description": "Pendrive is useful storage medium",
"price": 100,
"image": "pendrive.png"
},
{
"name": "Floppy Drive",
"description": "Floppy drive is useful rescue storage medium",
"price": 20,
"image": "floppy.png"
}
]Crie uma nova pasta, JSONWebServer e coloque o arquivo JSON, products.json.
Execute qualquer servidor da web com JSONWebServer como seu diretório raiz e obtenha seu caminho da web. Por exemplo, http://192.168.184.1:8000/products.json. Podemos usar qualquer servidor web como apache, nginx etc.,
A maneira mais fácil é instalar um aplicativo de servidor http baseado em nó. Siga as etapas fornecidas abaixo para instalar e executar o aplicativo de servidor http
Instale o aplicativo Nodejs ( nodejs.org )
Vá para a pasta JSONWebServer.
cd /path/to/JSONWebServerInstale o pacote do servidor http usando npm.
npm install -g http-serverAgora, execute o servidor.
http-server . -p 8000
Starting up http-server, serving .
Available on:
http://192.168.99.1:8000
http://127.0.0.1:8000
Hit CTRL-C to stop the serverCrie um novo arquivo, Product.dart na pasta lib e mova a classe Product para ele.
Escreva um construtor de fábrica na classe Product, Product.fromMap, para converter os dados mapeados Map no objeto Product. Normalmente, o arquivo JSON será convertido em objeto Dart Map e então convertido em objeto relevante (Produto).
factory Product.fromJson(Map<String, dynamic> data) {
return Product(
data['name'],
data['description'],
data['price'],
data['image'],
);
}O código completo do Product.dart é o seguinte -
class Product {
final String name;
final String description;
final int price;
final String image;
Product(this.name, this.description, this.price, this.image);
factory Product.fromMap(Map<String, dynamic> json) {
return Product(
json['name'],
json['description'],
json['price'],
json['image'],
);
}
}Escreva dois métodos - parseProducts e fetchProducts - na classe principal para buscar e carregar as informações do produto do servidor da web no objeto List <Product>.
List<Product> parseProducts(String responseBody) {
final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Product>((json) =>Product.fromJson(json)).toList();
}
Future<List<Product>> fetchProducts() async {
final response = await http.get('http://192.168.1.2:8000/products.json');
if (response.statusCode == 200) {
return parseProducts(response.body);
} else {
throw Exception('Unable to fetch products from the REST API');
}
}Observe os seguintes pontos aqui -
Futuro é usado para carregar lentamente as informações do produto. O carregamento lento é um conceito para adiar a execução do código até que seja necessário.
http.get é usado para buscar os dados da Internet.
json.decode é usado para decodificar os dados JSON no objeto Dart Map. Assim que os dados JSON forem decodificados, eles serão convertidos em List <Product> usando fromMap da classe Product.
Na classe MyApp, adicione uma nova variável de membro, produtos do tipo Future <Product> e inclua-a no construtor.
class MyApp extends StatelessWidget {
final Future<List<Product>> products;
MyApp({Key key, this.products}) : super(key: key);
...Na classe MyHomePage, adicione novos produtos de variável de membro do tipo Future <Product> e inclua-o no construtor. Além disso, remova a variável de itens e seu método relevante, chamada de método getProducts. Colocando a variável produtos no construtor. Isso permitirá buscar os produtos da Internet apenas uma vez, quando o aplicativo for iniciado pela primeira vez.
class MyHomePage extends StatelessWidget {
final String title;
final Future<ListList<Product>> products;
MyHomePage({Key key, this.title, this.products}) : super(key: key);
...Altere a opção inicial (MyHomePage) no método de construção do widget MyApp para acomodar as alterações acima -
home: MyHomePage(title: 'Product Navigation demo home page', products: products),Altere a função principal para incluir argumentos <Produto> Futuros -
void main() => runApp(MyApp(fetchProduct()));Crie um novo widget, ProductBoxList, para construir a lista de produtos na página inicial.
class ProductBoxList extends StatelessWidget {
final List<Product> items;
ProductBoxList({Key key, this.items});
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return GestureDetector(
child: ProductBox(item: items[index]),
onTap: () {
Navigator.push(
context, MaterialPageRoute(
builder: (context) =gt; ProductPage(item: items[index]),
),
);
},
);
},
);
}
}Observe que usamos o mesmo conceito usado no aplicativo de navegação para listar o produto, exceto que ele foi projetado como um widget separado, passando produtos (objeto) do tipo Lista <Produto>.
Finalmente, modifique o método de construção do widget MyHomePage para obter as informações do produto usando a opção Future em vez da chamada de método normal.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Product Navigation")),
body: Center(
child: FutureBuilder<List<Product>>(
future: products, builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData ? ProductBoxList(items: snapshot.data)
// return the ListView widget :
Center(child: CircularProgressIndicator());
},
),
)
);
}Aqui, observe que usamos o widget FutureBuilder para renderizar o widget. FutureBuilder tentará buscar os dados de sua propriedade futura (do tipo Future <List <Product>>). Se a propriedade futura retornar dados, ela renderizará o widget usando ProductBoxList, caso contrário, gerará um erro.
O código completo do main.dart é o seguinte -
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'Product.dart';
void main() => runApp(MyApp(products: fetchProducts()));
List<Product> parseProducts(String responseBody) {
final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Product>((json) => Product.fromMap(json)).toList();
}
Future<List<Product>> fetchProducts() async {
final response = await http.get('http://192.168.1.2:8000/products.json');
if (response.statusCode == 200) {
return parseProducts(response.body);
} else {
throw Exception('Unable to fetch products from the REST API');
}
}
class MyApp extends StatelessWidget {
final Future<List<Product>> products;
MyApp({Key key, this.products}) : super(key: key);
// 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: 'Product Navigation demo home page', products: products),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
final Future<List<Product>> products;
MyHomePage({Key key, this.title, this.products}) : super(key: key);
// final items = Product.getProducts();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Product Navigation")),
body: Center(
child: FutureBuilder<List<Product>>(
future: products, builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData ? ProductBoxList(items: snapshot.data)
// return the ListView widget :
Center(child: CircularProgressIndicator());
},
),
)
);
}
}
class ProductBoxList extends StatelessWidget {
final List<Product> items;
ProductBoxList({Key key, this.items});
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return GestureDetector(
child: ProductBox(item: items[index]),
onTap: () {
Navigator.push(
context, MaterialPageRoute(
builder: (context) => ProductPage(item: items[index]),
),
);
},
);
},
);
}
}
class ProductPage extends StatelessWidget {
ProductPage({Key key, this.item}) : super(key: key);
final Product item;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(this.item.name),),
body: Center(
child: Container(
padding: EdgeInsets.all(0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.asset("assets/appimages/" + this.item.image),
Expanded(
child: Container(
padding: EdgeInsets.all(5),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(this.item.name, style:
TextStyle(fontWeight: FontWeight.bold)),
Text(this.item.description),
Text("Price: " + this.item.price.toString()),
RatingBox(),
],
)
)
)
]
),
),
),
);
}
}
class RatingBox extends StatefulWidget {
@override
_RatingBoxState createState() =>_RatingBoxState();
}
class _RatingBoxState extends State<RatingBox> {
int _rating = 0;
void _setRatingAsOne() {
setState(() {
_rating = 1;
});
}
void _setRatingAsTwo() {
setState(() {
_rating = 2;
});
}
void _setRatingAsThree() {
setState(() {
_rating = 3;
});
}
Widget build(BuildContext context) {
double _size = 20;
print(_rating);
return Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
padding: EdgeInsets.all(0),
child: IconButton(
icon: (
_rating >= 1
? Icon(Icons.star, ize: _size,)
: Icon(Icons.star_border, size: _size,)
),
color: Colors.red[500], onPressed: _setRatingAsOne, iconSize: _size,
),
),
Container(
padding: EdgeInsets.all(0),
child: IconButton(
icon: (
_rating >= 2
? Icon(Icons.star, size: _size,)
: Icon(Icons.star_border, size: _size, )
),
color: Colors.red[500],
onPressed: _setRatingAsTwo,
iconSize: _size,
),
),
Container(
padding: EdgeInsets.all(0),
child: IconButton(
icon: (
_rating >= 3 ?
Icon(Icons.star, size: _size,)
: Icon(Icons.star_border, size: _size,)
),
color: Colors.red[500],
onPressed: _setRatingAsThree,
iconSize: _size,
),
),
],
);
}
}
class ProductBox extends StatelessWidget {
ProductBox({Key key, this.item}) : super(key: key);
final Product item;
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(2), height: 140,
child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset("assets/appimages/" + this.item.image),
Expanded(
child: Container(
padding: EdgeInsets.all(5),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(this.item.name, style:TextStyle(fontWeight: FontWeight.bold)),
Text(this.item.description),
Text("Price: " + this.item.price.toString()),
RatingBox(),
],
)
)
)
]
),
)
);
}
}Por fim, execute o aplicativo para ver o resultado. Será o mesmo que nosso exemplo de navegação, exceto que os dados são da Internet em vez de dados locais estáticos inseridos durante a codificação do aplicativo.