Referência rápida de Flutter


Índice

1- Sobre o Flutter

Flutter é um kit de desenvolvimento, de código aberto, criado pelo Google, que permite a criação de aplicativos compilados nativamente para Android e IOS. Você escreve um único código e o aplicativo roda em ambas plataformas.

A linguagem de programação utilizada no Flutter é o Dart, uma linguagem de script voltada à web desenvolvida pela Google.


2- Referências

Documentação oficial: https://flutter.dev/docs


3- Instalação

A boa notícia é que você não precisa instalar nada para rodar HTML, ele já roda no seu browser, seja ele Chrome, Firefox, Edge, Safari ou similares.

Guia de instalação no windows: https://flutter.dev/docs/get-started/install/windows

1- Instalar o Android Studio

2- Baixar o zip do Flutter e descompactar Baixar o zip no site: https://flutter.dev/docs/get-started/install/windows e descompactar o pacote em uma pasta do seu computador, por exemplo: C:\flutter Não é recomendado instalar em uma pasta com privilégios elevados, como c:\Program files

3- Adicionar o caminho do flutter e do Android Studio no path

4- Instalar o Android Command Line

5- Aceitar as licenças do Android

Execute o comando:

$ flutter doctor --android-licenses

6- Executar o Flutter doctor

$ flutter doctor

Se houverem pendências de instalação, elas serão listadas. Se tudo estiver ok será exibido algo como:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.22000.348], locale pt-BR)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.62.3)
[√] Connected device (2 available)
• No issues found!

7- Configure um emulador do Android

Abra o Android Studio, e na página Welcome, clique em “More Actions” e então em “AVD Manager”

Então escolha a opção: Create Virtual Device…


4- IDEs

Uma ótima IDE para escrever aplicativos Flutter é o VSCode.

Para instalar o VSCode, faça o download aqui: https://code.visualstudio.com/download

A documentação sobre a instalação do Flutter no VSCode é a seguinte: https://flutter.dev/docs/get-started/editor?tab=vscode

Depois da instalação do VSCode, instale a extensão do Flutter:

E então a extensão do Dart:

Para dicas e mais informações sobre como utilizar o VSCode, consulte:


5- Hello World

Aplicativo Hello World

Vá no Android Studio e inicie o emulador (Menu: Tools / AVD Manager / Create Virtual Device…)

Abra um prompt de comando e navegue até a pasta onde deseja criar o seu app, por exemplo:

mkdir c:\dev
cd c:\dev

Para criar o app, execute:

$ flutter create helloapp
$ cd helloapp

NOTA: Na primeira vez que você criar um app irá demorar mais, porque os pacotes serão baixados, nos próximos apps o processo será mais rápido

Então, para abrir o VSCode na pasta atual, execute:

$ code .

Quando o editor for carregado, será perguntado se você confia na origem do código, clique no botão “Yes, I trust”

Abra o arquivo “main.dart” na pasta “lib”, então substitua o conteúdo dele por:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello App')
        ),
        body: Text('Hello World!')
      )
    );
  }
}

Inicie o emulador do Android (Android Studio > AVD)

então inicie a aplicação no VSCode utilizando o menu: Run / Start Debugging, ou pressionando F5.

É possível executar a aplicação utilizando o terminal também, assim:

Abra um terminal no VSCode, menu: Terminal > New Terminal E então execute:

$ flutter run

Depois que a aplicação for iniciada, digite “r” para iniciar o “Hot reload”, assim, a cada modificação realizada o aplicativo será automaticamente atualizado.


6- Dart

A linguagem utilizada no Flutter é o Dart.

Para informações sobre a linguagem consulte:


7- Criando um app

//TODO: Complementar


8- Packages / Libs

Adicionando um package

O jeito mais fácil de adicionar um package é executando o comando “dart pub add [package]” ele vai automaticamente adicionar no arquivo “pubspec.yaml” a referência para o pacote

Por exemplo executando:

$ dart pub add json_serializable

No arquivo “pubspec.yaml” será adicionado:

dependencies:
  json_serializable: ^6.0.0

Para fazer a inclusão de um pacote manualmente, é necessário:

1- Adicionar a dependência no arquivo “pubspec.yaml”, por exemplo:

dependencies:
  json_serializable: ^6.0.0

2- Atualizar o aplicativo com os pacotes adicionados, executando:

$ flutter pub get

Atualizando os pacotes instalados

Para atualizar todos os pacotes, execute:

$ flutter packages upgrade

Se houverem packages que não foi possível atualizar será exibido um erro como:

x package is discontinued.
x packages have newer versions incompatible with dependency constraints.

Para verificar os pacotes com problemas de atualização, execute:

$ flutter pub outdated

Serialização JSON (lib json_serializable)

Referência: https://flutter.dev/docs/development/data-and-backend/json

O Flutter não possui equivalente ao Newntonsoft do .NET para serialização e deserialização JSON porque para construir algo do tipo é necessário utilizar Reflection, que não é permitido no Flutter.

Então existem duas forma de serialização:

1- Manualmente

Na serialização manual é necessário mapear cada campo do json para um campo da classe, por exemplo:

class Album {
  final int id;
  final String title;

  Album({
    required this.id,
    required this.title,
  });

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'],
      title: json['title'],
    );
  }
}

string json = "{\"id\":1, \"title\":"Metallica Black album"}"
Map<String, dynamic> jsonMap = jsonDecode(json);
Album album = Album.fromJson(jsonMap);

Isso funciona para projetos pequenos, mas será bem difícil fazer isso manualmente para projetos grandes sem cometer erros.

2- Usando um gerador de código (recomendado)

A lib json_serializable é um exemplo de lib que faz a geração de código automaticamente

Referência oficial: https://pub.dev/packages/json_serializable

Para instalar, utilize:

$ dart pub add json_serializable

Se não tiver essas dependências, também é necessário adicionar:

$ dart pub add build_runner --dev
$ dart pub add json_annotation

A classe que será serializada (album.dart) fica assim:

import 'package:json_annotation/json_annotation.dart';

part 'album.g.dart';

class Album {
  final int id;
  final String title;

  Album({
    required this.id,
    required this.title,
  });

  factory UserApi.fromJson(Map<String, dynamic> json) => _$AlbumFromJson(json);
  Map<String, dynamic> toJson() => _$AlbumFromJson(this);
}

Para gerar os arquivos, execute:

$ flutter pub run build_runner build

Na classe (album.dart) é referenciado um arquivo parcial (part ‘album.g.dart’) esse arquivo será gerado automaticamente, quando o comando “build_runner build” for executado. Nesse arquivo estará implementado o método: _$AlbumFromJson com o mapeamento dos campos do JSON para os campos da classe.

Native Splash Screen (lib flutter_native_splash)

Documentação oficial https://pub.dev/packages/flutter_native_splash

Vídeo, como utilizar: https://www.youtube.com/watch?v=8ME8Czqc-Oc

Para instalar o pacote, execute:

$ flutter pub add flutter_native_splash

e então adicione as configurações no arquivo “pubspec.yaml”, por exemplo:

flutter_native_splash:
  color: "#ffffff"
  image: assets/meu-logo.png
  android: true
  ios: true

Depois execute:

$ flutter clean; flutter pub get; flutter pub run flutter_native_splash:create

NOTA: No Linux ou no MAC o comando é assim:

$ flutter clean && flutter pub get && flutter pub run flutter_native_splash:create

ou você pode rodar cada comando indidivualmente.

Executar chamada HTTP para uma api

Referência: https://flutter.dev/docs/cookbook/networking/fetch-data

Para instalar o pacote HTTP execute:

$ flutter pub add http

Isso irá adicionar a dependência abaixo no arquivo pubspec.yaml:

dependencies:
  http: ^0.13.4

No código adicionar o import:

import 'package:http/http.dart' as http;

Obter número da versão e do pacote

Referência https://pub.dev/packages/package_info_plus

Para instalar o pacote execute:

$ flutter pub add package_info_plus

Utilização:

import 'package:package_info_plus/package_info_plus.dart';

PackageInfo packageInfo = await PackageInfo.fromPlatform();

String appName = packageInfo.appName;
String packageName = packageInfo.packageName;
String version = packageInfo.version;
String buildNumber = packageInfo.buildNumber;

NOTA: O número da versão do app, fica na variável “version” do arquivo pubspec.yaml

Log

Referência: https://pub.dev/packages/logger

Para instalar o pacote execute:

$ flutter pub add logger

Utilização:

var logger = Logger();
logger.d("Log esta funcionando!");

Log levels:

logger.v("Verbose log");
logger.d("Debug log");
logger.i("Info log");
logger.w("Warning log");
logger.e("Error log");
logger.wtf("What a terrible failure log");

Firebase Crashlytics

Referência: https://firebase.flutter.dev/docs/crashlytics/overview/

$ flutter pub add firebase_crashlytics

9- Material Design

Utilizar uma cor customizada como Material Color

https://medium.com/@filipvk/creating-a-custom-color-swatch-in-flutter-554bcdcb27f3

@override Widget build(BuildContext context) { return MaterialApp( title: ‘Flutter Demo’, theme: ThemeData( primarySwatch: createMaterialColor(const Color(0xFF757575)), ), home: const MyHomePage(title: ‘Flutter Demo Home Page’), ); }

MaterialColor createMaterialColor(Color color) { List strengths = [.05]; final swatch = <int, Color>{}; final int r = color.red, g = color.green, b = color.blue;

for (int i = 1; i < 10; i++) {
  strengths.add(0.1 * i);
}
strengths.forEach((strength) {
  final double ds = 0.5 - strength;
  swatch[(strength * 1000).round()] = Color.fromRGBO(
    r + ((ds < 0 ? r : (255 - r)) * ds).round(),
    g + ((ds < 0 ? g : (255 - g)) * ds).round(),
    b + ((ds < 0 ? b : (255 - b)) * ds).round(),
    1,
  );
});
return MaterialColor(color.value, swatch);   }

10- Padrões de arquitetura

MVC x MVP x MVVM

Recomendo o seguinte vídeo que explica muito bem esses conceitos: https://www.youtube.com/watch?v=4KBqWANDbE4&t=1780s


11- Widgets

Abaixo alguns exemplos de Widgets e propriedades que eles aceitam

Text

Text('Seu texto aqui')

Text('Seu texto aqui', style: Theme.of(context).textTheme.headline6)

Text('Seu texto aqui', style: const TextStyle(fontWeight: FontWeight.bold))

Text('Seu texto aqui', style: TextStyle(fontSize: Theme.of(context).textTheme.bodyText2!.fontSize,color: Colors.grey.shade600))

Column

Column(
  children: [
    Text('Text 1'),
    Text('Text 2'),
    Text('Text 3'),
  ],
)

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Text 1'),
    Text('Text 2'),
    Text('Text 3'),
  ],
)

Container

Container(
  width: double.infinity,
  height: 100,
  constraints: const BoxConstraints(maxHeight: 200),
  padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
  child: [Widget]
)

//Container com borda arredondada:

Container(
    margin: const EdgeInsets.only(left: 10),
    padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 5),
    decoration: BoxDecoration(
      color: Colors.red.shade300,
      borderRadius: const BorderRadius.all(
        Radius.circular(8.0),
      ),
    ),
    child: const Text('Seu texto aqui', style: TextStyle(color: Colors.white)),
)

ListView

ListView(
  children: <Widget>[
      ListTile(
        title: Text('Valor', style: Theme.of(context).textTheme.headline6),
        subtitle: const Text('Título'),
      )
  ]
)

ListView.build(
  shrinkWrap: true,
  physics: const ScrollPhysics(),
  itemCount: myItems.length,
  itemBuilder: (context, i) {
    return ListTile(
      title: Text(
        myItems[i].title,
        style: Theme.of(context).textTheme.bodyText1,
      ),
      subtitle: Text(
        myItems[i].text,
        style: Theme.of(context).textTheme.bodyText2,
      ),
      onTap: () { /* Execute action */ },
    );
  }
)

ListView.separated(
  shrinkWrap: true,
  physics: const ScrollPhysics(),
  itemCount: myItems.length,
  itemBuilder: (context, i) {
    return ListTile(
      title: Text(
        myItems[i].title,
        style: Theme.of(context).textTheme.bodyText1,
      ),
      subtitle: Text(
        myItems[i].text,
        style: Theme.of(context).textTheme.bodyText2,
      ),
      onTap: () { /* Execute action */ },
    );
  },
  separatorBuilder: (_, index) => const SizedBox(height: 5, child: Divider())),
)

Botões

Diferentes botões do Material design: https://docs.flutter.dev/development/ui/widgets/material#Buttons

ElevatedButton

ElevatedButton - botão com elevação:

ElevatedButton(
  child: const Text('SIGN IN'),
  onPressed: () {
    controller.signInClick();
  }),

TextButton

TextButton - texto simples clicável:

TextButton(
  child: const Text('CRIAR CONTA'),
  onPressed: () { })

Outlined

Outlined Button - TextButton com borda:

OutlinedButton(
    child: const Text('Click Me'),
    onPressed: () {
      debugPrint('Received click');
    },
)

Imagens e ícones

Icon

Icon(Icons.person, size: 30.0, color: Colors.grey.shade400),

Tem a lista de ícones na página: https://api.flutter.dev/flutter/material/Icons-class.html

Asset.Image

Para exibir uma imagem adicionada no projeto:

1- Incluir a imagem na pasta assets 2- Se você criou uma subpasta, por exemplo “assets\icons” ou “assets\images” adicionar essa nova pasta no arquivo pubspec.yam, ou então especificar o nome dos arquivos:

flutter:
  uses-material-design: true
  assets:
    - assets/images/
    - assets/icons/

3- Utilizar na aplicação:

Image.asset('assets/icons/excel-icon-32x32.png')

Network image

//TODO: Complementar

Outros

Chip (lista de tags)

SizedBox(
  width: double.infinity,
  child: Wrap(
    spacing: 6.0,
    children: taskDetail.taskData.tags
        .map((e) => Chip(
                label: Text(
              e.tagTitle,
            )))
        .toList(),
  ),
)


Comentários