Finalmente, llegamos a uno de los temas más importantes, sin el cual no tiene sentido ir más lejos.
El plan es bastante simple: tenemos que familiarizarnos con la arquitectura cliente-servidor e implementar la lista de publicaciones.
Al final, organizaremos correctamente nuestros archivos de página y trasladaremos el elemento de la lista a un archivo separado.
¡Volemos!
Nuestro plan
Parte 1 - introducción al desarrollo, primer apéndice, concepto de estado;
Parte 2 : archivo pubspec.yaml y uso de flutter en la línea de comandos;
Parte 3 - BottomNavigationBar y Navigator;
Parte 4 - MVC. Usaremos este patrón en particular como uno de los más simples;
Parte 5 (artículo actual) - paquete http. Creación de la clase Repository, primeras solicitudes, listado de publicaciones;
Parte 6: trabajar con formularios, cuadros de texto y crear una publicación.
Parte 7: trabajar con imágenes, mostrar imágenes en forma de cuadrícula, recibir imágenes de la red, agregar las suyas a la aplicación;
Parte 8: creación de su propio tema, agregando fuentes y animaciones personalizadas;
Parte 9: un poco sobre las pruebas;
Cliente y servidor
El modelo Cliente / Servidor está en el corazón de toda Internet y es el más frecuente.
Cual es su esencia?
Primero, averigüemos qué son un cliente y un servidor:
Cliente: un dispositivo de usuario que envía solicitudes al servidor y recibe respuestas. Puede ser un teléfono inteligente, una computadora o una MacBook.
El servidor es una computadora especial que contiene los datos requeridos por el usuario.
Todo el modelo se reduce a un principio primitivo: el cliente envió una solicitud, el servidor la aceptó, la procesó y transmitió la respuesta al cliente.
Para organizar la interacción entre el servidor y el cliente, se utilizan protocolos especiales. Por el momento, uno de los protocolos más comunes en Internet es http / https (s significa seguro).
http / https le permite transferir casi todos los formatos de datos conocidos: imágenes, video, texto.
Trabajaremos con formato JSON .
JSON es un formato de datos simple y comprensible, y lo más importante, liviano, ya que solo se transmite texto.
Ejemplo de JSON:
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
...
]
Aquí hay una serie de publicaciones que recibiremos del servidor.
: , .
JSON :
{
"total_items" : 1
"result" : [
{
"id" : 1,
"name" : "Twillight Sparkle",
"pony_type" : "alicorn",
"friends" : [
"Starlight Glimmer", "Applejack", "Rarity", "Spike"
]
}
]
}
.
.. http / https HTTP .
HTTP :
URL - , , . URL : https://jsonplaceholder.typicode.com/posts. ( URL' )
, . GET , POST , DELETE - , PUT - .
POST, PUT DELETE . GET URL'. : https://jsonplaceholder.typicode.com/posts/1 ( id = 1)
http
.
, pubspec.yaml
:
# dependencies: flutter: sdk: flutter # pub- # # flutter_staggered_grid_view: ^0.4.0 # MVC mvc_pattern: ^7.0.0 # http # http: ^0.13.3
.
post.dart
models
:
//
class Post {
// private
//
final int _userId;
final int _id;
final String _title;
final String _body;
// getters
//
int get userId => _userId;
int get id => _id;
String get title => _title;
String get body => _body;
// Dart
// Post.fromJson(json) -
// JSON
// , dynamic
// : String, int, double ..
Post.fromJson(Map<String, dynamic> json) :
this._userId = json["userId"],
this._id = json["id"],
this._title = json["title"],
this._body = json["body"];
}
// PostList
class PostList {
final List<Post> posts = [];
PostList.fromJson(List<dynamic> jsonItems) {
for (var jsonItem in jsonItems) {
posts.add(Post.fromJson(jsonItem));
}
}
}
//
//
//
abstract class PostResult {}
//
class PostResultSuccess extends PostResult {
final PostList postList;
PostResultSuccess(this.postList);
}
//
class PostResultFailure extends PostResult {
final String error;
PostResultFailure(this.error);
}
//
class PostResultLoading extends PostResult {
PostResultLoading();
}
.
JSON :
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
, userId
id
, title
body
, Post.fromJson(json)
.
Repository
.
data
repository.dart
:
import 'dart:convert';
// http
import 'package:http/http.dart' as http;
import 'package:json_placeholder_app/models/post.dart';
//
// SERVER
const String SERVER = "https://jsonplaceholder.typicode.com";
class Repository {
//
// Future ,
// fetchPhotos
// UI
Future<PostList> fetchPosts() async {
// URL,
//
final url = Uri.parse("$SERVER/posts");
// GET
final response = await http.get(url);
//
if (response.statusCode == 200) {
//
// json.decode
return PostList.fromJson(json.decode(response.body));
} else {
//
throw Exception("failed request");
}
}
}
: , ?
.. , .
. URL .
PostController
:
import '../data/repository.dart';
import '../models/post.dart';
import 'package:mvc_pattern/mvc_pattern.dart';
class PostController extends ControllerMVC {
//
final Repository repo = new Repository();
//
PostController();
// -
PostResult currentState = PostResultLoading();
void init() async {
try {
//
final postList = await repo.fetchPosts();
//
setState(() => currentState = PostResultSuccess(postList));
} catch (error) {
//
setState(() => currentState = PostResultFailure(" "));
}
}
}
: :
import 'package:flutter/material.dart';
import '../controllers/post_controller.dart';
import '../models/post.dart';
import 'package:mvc_pattern/mvc_pattern.dart';
class PostListPage extends StatefulWidget {
@override
_PostListPageState createState() => _PostListPageState();
}
// StateMVC
class _PostListPageState extends StateMVC {
//
PostController _controller;
// StateMVC
//
_PostListPageState() : super(PostController()) {
_controller = controller as PostController;
}
//
//
@override
void initState() {
super.initState();
_controller.init();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Post List Page"),
),
body: _buildContent()
);
}
Widget _buildContent() {
//
final state = _controller.currentState;
if (state is PostResultLoading) {
//
return Center(
child: CircularProgressIndicator(),
);
} else if (state is PostResultFailure) {
//
return Center(
child: Text(
state.error,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headline4.copyWith(color: Colors.red)
),
);
} else {
//
final posts = (state as PostResultSuccess).postList.posts;
return Padding(
padding: EdgeInsets.all(10),
// ListView.builder
//
child: ListView.builder(
itemCount: posts.length,
itemBuilder: (context, index) {
return _buildPostItem(posts[index]);
},
),
);
}
}
//
Widget _buildPostItem(Post post) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
border: Border.all(color: Colors.grey.withOpacity(0.5), width: 0.3)
),
margin: EdgeInsets.only(bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15)),
color: Theme.of(context).primaryColor,
),
padding: EdgeInsets.all(10),
child: Text(
post.title,
textAlign: TextAlign.left,
style: Theme.of(context).textTheme.headline5.copyWith(color: Colors.white),),
),
Container(
child: Text(
post.body,
style: Theme.of(context).textTheme.bodyText2,
),
padding: EdgeInsets.all(10),
),
],
)
);
}
}
.
, )
:
! :
!
.
post_list_page.dart
110 , . 10 20 !
, .
.
Widget _buildItem(post)
.
:
post post_list_item.dart:
import 'package:flutter/material.dart';
import '../../models/post.dart';
//
class PostListItem extends StatelessWidget {
final Post post;
//
PostListItem(this.post);
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
border: Border.all(color: Colors.grey.withOpacity(0.5), width: 0.3)
),
margin: EdgeInsets.only(bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15)),
color: Theme.of(context).primaryColor,
),
padding: EdgeInsets.all(10),
child: Text(
post.title,
textAlign: TextAlign.left,
style: Theme.of(context).textTheme.headline5.copyWith(color: Colors.white),),
),
Container(
child: Text(
post.body,
style: Theme.of(context).textTheme.bodyText2,
),
padding: EdgeInsets.all(10),
),
],
)
);
}
}
post_list_page.dart
:
import 'package:flutter/material.dart';
import '../../controllers/post_controller.dart';
import '../../models/post.dart';
import 'post_list_item.dart';
import 'package:mvc_pattern/mvc_pattern.dart';
class PostListPage extends StatefulWidget {
@override
_PostListPageState createState() => _PostListPageState();
}
// StateMVC
class _PostListPageState extends StateMVC {
//
PostController _controller;
// StateMVC
//
_PostListPageState() : super(PostController()) {
_controller = controller as PostController;
}
//
//
@override
void initState() {
super.initState();
_controller.init();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Post List Page"),
),
body: _buildContent()
);
}
Widget _buildContent() {
//
final state = _controller.currentState;
if (state is PostResultLoading) {
//
return Center(
child: CircularProgressIndicator(),
);
} else if (state is PostResultFailure) {
//
return Center(
child: Text(
state.error,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headline4.copyWith(color: Colors.red)
),
);
} else {
//
final posts = (state as PostResultSuccess).postList.posts;
return Padding(
padding: EdgeInsets.all(10),
// ListView.builder
//
child: ListView.builder(
itemCount: posts.length,
itemBuilder: (context, index) {
//
//
return PostListItem(posts[index]);
},
),
);
}
}
}
.
Traté de contar brevemente y mostrar con un ejemplo ilustrativo cómo trabajar con la red.
Espero que mi artículo te haya sido útil)
¡Buen código para todos!