Introdução
Olá a todos que desejam conhecer o Flutter!
Tive o desejo ardente de compartilhar com vocês meu conhecimento que acumulei ao longo de vários meses.
Talvez minha experiência seja muito pequena em comparação com os programadores guru, ainda tentarei fazer algo útil para você.
O resultado do nosso trabalho será um pequeno aplicativo Flutter que pegará dados do JSONPlaceholder .
Nosso plano
Parte 1 (artigo atual) - Introdução ao desenvolvimento, primeiro apêndice, conceito de estado;
Parte 2 - arquivo pubspec.yaml e usando flutter na linha de comando;
Parte 3 - BottomNavigationBar e Navigator;
Parte 4 - MVC. Usaremos esse padrão particular como um dos mais simples;
Parte 5 - pacote http. Criação da classe Repositório, primeiras solicitações, listagem de postagens;
Parte 6 - Trabalhar com imagens, exibir imagens em forma de grade, receber imagens da rede, adicionar as suas ao aplicativo;
Parte 7 - Criando seu próprio tema, adicionando fontes personalizadas e animações;
Parte 8 - Um pouco sobre testes;
Primeira etapa - configurando e instalando componentes
Bem, vamos começar.
Vá para a página de instalação: Instalar - Flutter e baixe o Flutter para sua plataforma
Em seguida, instale o editor ou IDE usando as instruções para configurar um editor
Usarei o Android Studio IDE do Google.
Para desenvolvimento no Android Studio, você precisa instalar o plug-in Flutter (nas instruções de Configurar um editor , é descrito como fazer isso).
Segunda etapa - criação do projeto
Escolhendo o aplicativo Flutter
Em seguida, indicamos o nome do aplicativo (o nome do aplicativo Flutter deve ser minúsculo, palavras individuais podem ser separadas por um sublinhado).
Em seguida, especificamos o nome do pacote (usado para identificar nosso aplicativo entre outros no Google Play ou Apple Store, ele pode ser alterado posteriormente, com mais detalhes sobre o Android Application ID ou Apple App ID ):
Clique em Concluir.
A terceira etapa é criar a estrutura inicial do aplicativo
Limpamos o arquivo main.dart do código desnecessário:
import 'package:flutter/material.dart';
// main()
//
//
void main() => runApp(MyApp());
// Flutter (,, ..)
// - ,
// ( Android )
// StatelessWidget
//
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
// MaterialApp - ,
//
// Material Design .
return MaterialApp(
//
// ,
title: 'Json Placeholder App',
// ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
// ,
home: HomePage(),
);
}
}
Em seguida, criamos um pacote (o código deve sempre ser organizado para torná-lo mais claro):
pages:
home_page.dart:
:
import 'package:flutter/material.dart';
// StatefulWidget ,
//
// setState(VoidCallback fn);
// setState
class HomePage extends StatefulWidget {
// StatefulWidget ,
// State
@override
_HomePageState createState() => _HomePageState();
}
// StatefulWidget
//
// _ ,
// _HomePageState
// private Java / Kotlin
class _HomePageState extends State<HomePage> {
// buil, ,
//
@override
Widget build(BuildContext context) {
// Scaffold ,
//
// Scaffold AppBar, BottomNavigationBar,
// Drawer, FloatingActionButton
// ().
return Scaffold(
// AppBar "Home Page"
appBar: AppBar(title: Text("Home page")),
// Scaffold
// Center ,
//
body: Center(
child: Text(
"Hello, JSON Placeholder!!!",
// Text
textAlign: TextAlign.center,
// Theme.of(context)
// ThemeData, MaterialApp
// ThemeData
// ( headline3, )
style: Theme.of(context).textTheme.headline3,
)
)
);
}
}
Flutter - ,
-
, .
HomePage main :
import 'pages/home_page.dart';
: , , :
import 'package:json_placeholder_app/pages/home_page.dart';
, pubspec.yaml (pubspec.yaml ):
, , iOS Android.
, ( , Honor 30i), Run:
!
DEBUG , :
import 'package:flutter/material.dart';
// main()
//
//
void main() => runApp(MyApp());
// Flutter (,, ..)
// - ,
// ( Android )
// StatelessWidget
//
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
// MaterialApp - ,
//
// Material Design .
return MaterialApp(
//
// ,
title: 'Json Placeholder App',
//
debugShowCheckedModeBanner: false,
// ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
// ,
home: HomePage(),
);
}
}
, , hot reload:
Hot Reload 2-5 , .
, .
Hot Reload build . ( )
: Hot Reload , .
: Flutter , :
, .. release Flutter .
, Hot Reload.
-
, .
:
import 'package:flutter/material.dart';
// StatefulWidget ,
//
// setState(VoidCallback fn);
// setState
class HomePage extends StatefulWidget {
// StatefulWidget ,
// State
@override
_HomePageState createState() => _HomePageState();
}
// StatefulWidget
//
// ,
// _HomePageState
// - private Java / Kotlin
class _HomePageState extends State<HomePage> {
// ,
// .. _counter
// ,
// _counter
var _counter = 0;
// build ,
//
@override
Widget build(BuildContext context) {
// Scaffold
//
// Scaffold AppBar, BottomNavigationBar,
// Drawer, FloatingActionButton
// ().
return Scaffold(
// AppBar "Home page"
appBar: AppBar(title: Text("Home page")),
// Scaffold
// Center ,
//
body: Center(
// AnimatedSwitcher,
//
child: AnimatedSwitcher(
// : const
// , Duration
//
// Duration
// (, ..)
duration: const Duration(milliseconds: 900),
// AnimatedSwitcher reverse ,
//
// , ,
// reverseDuration 0
//
reverseDuration: const Duration(milliseconds: 0),
child: Text(
//
// _counter
//
"$_counter",
//
// _counter
// setState,
// AnimatedSwitcher
// key ,
// ,
key: ValueKey<int>(_counter),
// Text
textAlign: TextAlign.center,
// Theme.of(context)
// ThemeData, MaterialApp
// ThemeData
// ( headline3, )
style: Theme.of(context).textTheme.headline3,
),
)
),
//
// FloatingActionButton -
floatingActionButton: FloatingActionButton(
//
// Flutter
child: Icon(Icons.animation),
onPressed: () {
// setState
// ,
// .
//
setState(() {
_counter++;
});
},
),
);
}
}
:
! !
.
, ))
)
!