Criar app do zero com Flutter
Como é bom ter um aplicativo que possa facilitar o nosso dia a dia, melhorar algo que ainda é feito de forma burocrática ou até mesmo algo que nos ajude a passar o tempo!!
Podemos vivenciar a evolução nos dias de hoje com jogos que tem gráficos espetaculares, aplicativos que simplesmente te ajuda em “tudo”.
Vou demonstrar como podemos fazer um aplicativo simples e funcional, O Flutter Framework do Google que está ganhando espaço.
Vamos lá primeiro de tudo baixe o Flutter siga o setup de acordo o seu sistema operacional.
https://flutter.dev/docs/get-started/install
Após o setup inicial e download do flutter você precisa fazer o download do android studio nesse link abaixo, vou demonstrar como configurar o Android Studio para desenvolver
Após feita a instalação do Android Studio e feito o Download do Flutter vamos iniciar, agora vamos instalar o plugin flutter
Em preferences pesquise por plugin e depois por flutter como estou exibindo na imagem abaixo.
Feito o passo anterior precisamos reiniciar o Android Studio e criar um novo projeto em File -> New Flutter Project -> Flutter Application
O Próximo passo é selecionar o SDK do Flutter que você fez download, Você precisa extrair o pacote zip do flutter e guardar em seus documentos, feito isso veja a imagem abaixo.
Depois de criar o projeto, vamos criar o nosso aplicativo simples de lista
Vamos importar as dependências temos o arquivo pubspec.yaml abra o arquivo em dependencies adicione abaixo
date_format: "^1.0.4"
http: ^0.12.0+4
Essas duas dependências são para fazer a request a api e converter a data mais abaixo vou explicar como usamos .
Vamos criar a nossa classe de conexão a api, basicamente importamos a lib que acabamos de adicionar anteriormente e criamos a request.
const urlApi = "https://mobile.int.granito.xyz/api/feed/getposts";
import 'package:http/http.dart' as http;
class Rest {
static Future getData() async {
var url = urlApi;
return await http.get(url);
}
}Vamos agora criar uma nova classe de constants
class Constants {
static final String IMAGE_ASSET_URL = 'assets/notfound.png';
}Criamos a classe do retorno da api o nosso Response
class Response {
int postId;
int personId;
String created;
String photoUri;
int likes;
Person person;
List<Comments> comments;
Response(
{this.postId,
this.personId,
this.created,
this.photoUri,
this.likes,
this.person,
this.comments});
Response.fromJson(Map<String, dynamic> json) {
postId = json['postId'];
personId = json['personId'];
created = json['created'];
photoUri = json['photoUri'];
likes = json['likes'];
person =
json['person'] != null ? new Person.fromJson(json['person']) : null;
if (json['comments'] != null) {
comments = new List<Comments>();
json['comments'].forEach((v) {
comments.add(new Comments.fromJson(v));
});
}
}
}
class Person {
int personId;
String name;
String profilePhotoUri;
Person({this.personId, this.name, this.profilePhotoUri});
Person.fromJson(Map<String, dynamic> json) {
personId = json['personId'];
name = json['name'];
profilePhotoUri = json['profilePhotoUri'];
}
}
class Comments {
int commentId;
int postId;
int personId;
Person person;
String text;
Comments(
{this.commentId, this.postId, this.personId, this.person, this.text});
Comments.fromJson(Map<String, dynamic> json) {
commentId = json['commentId'];
postId = json['postId'];
personId = json['personId'];
person =
json['person'] != null ? new Person.fromJson(json['person']) : null;
text = json['text'];
}
}Por fim temos a nossa main.dart aqui nos importamos a nossa chamada a api e montamos o listview
import 'dart:convert';
import 'package:date_format/date_format.dart';
import 'package:flutter/material.dart';
import 'package:flutterapp2/response/response.dart';
import 'package:flutterapp2/utils/constants.dart';
import 'package:flutterapp2/webservice/rest.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Feed',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Minha Página'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var response = new List<Response>();
_getData() {
Rest.getData().then((data) {
setState(() {
Iterable list = json.decode(data.body);
response = list.map((model) => Response.fromJson(model)).toList();
});
});
}
_MyHomePageState() {
_getData();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.builder(
itemCount: response.length,
itemBuilder: listTile,
));
}
String convertDateFromString(String strDate) {
DateTime todayDate = DateTime.parse(strDate);
return (formatDate(
todayDate, [dd, '/', mm, '/', yyyy, ' ', hh, ':', nn, ':', ss]));
}
Column listTile(BuildContext context, int index) {
return Column(
children: <Widget>[
Card(
child: Column(
children: <Widget>[
ListTile(
leading: CircleAvatar(
radius: 20,
backgroundImage:
NetworkImage(response[index].person.profilePhotoUri)),
title: Text(response[index].person.name,
style: TextStyle(fontSize: 18)),
trailing:
Text(this.convertDateFromString(response[index].created)),
),
],
)),
Column(
children: <Widget>[
response[index].photoUri == null
? Image.asset(Constants.IMAGE_ASSET_URL)
: Image.network(response[index].photoUri)
],
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
),
new SizedBox(
width: 16.0,
),
new Icon(
Icons.comment,
color: Colors.grey,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
),
new SizedBox(
width: 16.0,
),
new Icon(
Icons.send,
color: Colors.grey,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
)
],
),
new Icon(
Icons.turned_in,
color: Colors.grey,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
)
],
),
),
Padding(
child: Row(
children: <Widget>[
Text(response[index].likes.toString() + " Likes")
],
),
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
),
Padding(
child: Row(
children: <Widget>[
Text(response[index].comments.length != 0
? response[index].comments[0].person.name.toString() +
" " +
response[index].comments[0].text
: "")
],
),
padding: EdgeInsets.fromLTRB(20, 0, 0, 10),
),
],
);
}
}Eu sei ficou bem grande a classe main mais foi apenas para uma versão inicial, feito isso agora temos o nosso aplicativo funcionando.
Fique a vontade para baixar o código completo do aplicativo em meu github
