Guia Iniciante FLUTTER v1

Prévia do material em texto

Guia inicial para desenvolvimento de 
Aplicativos Móveis com Flutter 
 
1. Configuração do ambiente 
https://docs.flutter.dev/get-started/install 
https://docs.flutter.dev/get-started/editor 
 
 
2. Comandos flutter de linha de comandos (CLI) 
https://docs.flutter.dev/reference/flutter-cli 
 
> where flutter dart 
> flutter (...) 
> flutter --version 
> flutter upgrade 
> flutter config (...) 
> flutter pub (...) 
> flutter doctor 
> flutter doctor --android-licenses 
> flutter emulators (...) 
> flutter create 
> flutter run 
 
 
3. Teste do ambiente de desenvolvimento 
a. Abra o IDE e selecione New Flutter Project. 
b. Selecione Flutter, verifique o caminho do SDK do Flutter com a localização do 
SDK. Em seguida, clique em Avançar. 
c. Insira um nome de projeto (por exemplo, app_de_teste). 
d. Selecione Aplicativo como o tipo de projeto. Em seguida, clique em Avançar. 
e. Clique em Concluir. 
f. Aguarde o Android Studio criar o projeto. 
g. Crie um emulador clicando na barra de tarefas em AVD/Device Manager. 
h. Selecione o dispositivo destino na barra de tarefas e clique no botão Run. 
Observação: também é possível conectar um dispositivo Android via USB/Wi-Fi. 
 
https://docs.flutter.dev/get-started/install
https://docs.flutter.dev/get-started/editor
https://docs.flutter.dev/reference/flutter-cli
4. Desenvolvimento do zero (Sem componentes Material) 
1ª versão: widget Text(...) + propriedade textDirection: TextDirection.ltr 
'package:flutter/material.dart'; 
void main() { 
 runApp(const Text( 
 'App sem material', 
 textDirection: TextDirection.ltr, 
 )); 
} 
2ª versão: widgets Container(...), BoxDecoration(...) e TextStyle(...) 
import 'package:flutter/material.dart'; 
void main() { 
 runApp(Container( 
 decoration: const BoxDecoration( 
 color: Colors.white, 
 ), 
 child: const Center( 
 child: Text( 
 'App sem material', 
 textDirection: TextDirection.ltr, 
 style: TextStyle( 
 color: Colors.black, 
 fontSize: 32, 
 fontWeight: FontWeight.w500, 
 ), 
 ), 
 ), 
 )); 
} 
 
 
3ª versão: widgets Column(...), Row(...), Icon(...), Image(...) e Expanded(...) 
 
import 'package:flutter/material.dart'; 
 
void main() { 
 runApp(Container( 
 padding: const EdgeInsets.only(top: 62), 
 decoration: const BoxDecoration( 
 color: Colors.white, 
 ), 
 child: Column( 
 children: [ 
 Container( 
 height: 50, 
 decoration: const BoxDecoration( 
 color: Colors.blue, 
 ), 
 child: Row( 
 textDirection: TextDirection.ltr, 
 children: const [ 
 Icon( 
 Icons.menu, 
 textDirection: TextDirection.ltr, 
 ), 
 Text( 
 'Primeiro App', 
 textDirection: TextDirection.ltr, 
 ), 
 ], 
 ), 
 ), 
 Image.asset('imagens/minha_imagem.jpg'), 
 const Expanded( 
 child: Center( 
 child: Text( 
 'App sem material', 
 textDirection: TextDirection.ltr, 
 style: TextStyle( 
 color: Colors.black, 
 fontSize: 16, 
 fontWeight: FontWeight.w500, 
 ), 
 ), 
 ), 
 ), 
 ], 
 ), 
 )); 
} 
4ª versão: refatoração StatelessWidget 
import 'package:flutter/material.dart'; 
 
void main() { 
 runApp(const AppDoZero()); 
} 
 
class AppDoZero extends StatelessWidget { 
 const AppDoZero({Key? key}) : super(key: key); 
 
 @override 
 Widget build(BuildContext context) { 
 return (...); 
 } 
} 
 
class TitleBar extends StatelessWidget { 
 const TitleBar({Key? key}) : super(key: key); 
 
 @override 
 Widget build(BuildContext context) { 
 return (...); 
 } 
} 
 
 
 
 
 
class HomePage extends StatelessWidget { 
 const HomePage({Key? key}) : super(key: key); 
 
 @override 
 Widget build(BuildContext context) { 
 return (...); 
 } 
}