Forem: Flutter

Um estudo sobre Flutter Expanded

Beatriz Herculano — Tue, 04 Feb 2020 14:09:41 +0000

Esse artigo faz parte de uma série chamada "Widgets da Semana", para saber mais sobre essa ela leia nossa introdução.

Expaned

O video do Widget da semana postado no dia 21 de agosto de 2018, fala sobre Expanded.

Esse widget é usado para organizar o espaço ocupado por itens em Rows, Columns e Flex. Ele faz com que esse item ocupe o espaço vago dentro do seu pai.

Quando a renderização acontece, primeiro é construido os filhos que não são flexiveis e depois os que são flexíveis vão ser calculados com o espaço restante.

Você pode pensar como se fosse um display flex no CSS, onde essa caixa vai se expandir ocupando o todo espaço restate ou então em uma proporção indicada.

Como um exemplo de uso temos o código:

 Column(
    children: <Widget>[
       Container(
           color: Colors.black,
               height: 100,
           ),
       Expanded(
           child: Container(color: Colors.indigo),
       ),
       Expanded(
           child: Container(color: Colors.pinkAccent),
       )
    ],
),

Que produz o segunte resultado:

Você pode ver que sem indicar o tamanho ocupado pelos retangulos azul e rosa eles se organizaram baseado nas regras de expanded.
Mas e se eu quiser que um seja de um tamanho diferente do outro?

É so usar o atributo de flex e indicar a proporção de espaço a ser ocupado:

Column(
    children: <Widget>[
       Container(
           color: Colors.black,
               height: 100,
           ),
       Expanded(
           child: Container(color: Colors.indigo),
           flex: 2,
       ),
       Expanded(
           child: Container(color: Colors.pinkAccent),
       )
    ],
),

Assim obtemos o seginte resultado

O retângulo azul com o flex de 2 esta tomando o dobro de espaço que o rosa (o valor default/padrão do flex é 1).

Sobre Nós

Eu e o pessoal da Flutter Nation estamos em uma página e um grupo no Facebook.
Também estamos no Meetup e no GitHub!

Um estudo sobre o Flutter FutureBuilder

WellsSA — Fri, 13 Dec 2019 16:03:04 +0000

Esse artigo faz parte de uma série chamada "Widgets da Semana", para saber mais sobre essa ela leia nossa introdução.

FutureBuilder

O video do Widget da semana postado no dia 18 de setembro de 2018 fala sobre o FutureBuilder.

Quando falamos de arquitetura Web, requisições e etc é normal pensar em um cliente chamando um servidor. E nesse caminho mágico ocorrem uma série de coisas, mas o que importa para falarmos do FutureBuilder é: sua requisição leva tempo!
Ela pode levar de alguns milissegundos a vários segundos pra te retornar algo importante - e esse retorno ainda por cima pode ser um erro! :D

Pensando nisso, o FutureBuilder te permite lidar com esses percalços do mundo assíncrono e dizer qual Widget deve ser renderizado de acordo com cada situação durante uma requisição. :O

Assim, você pode fazer o seguinte fluxo:

Flutter, faça uma requisição pra https://minha-poke-api.com
Enquanto você espera, mostre pro usuário uma barra de loading
Se der bom, mostre uma lista de pokemons
Se der ruim, mostre um widget dizendo "não foi dessa vez, meu consagrado"

E pra isso acontecer, você só precisa usar o FutureBuilder! Ele recebe, adivinha? Um future e um builder.

FutureBuilder(
  future: http.get('https://minha-poke-api.com'),
  builder: (context, snapshot) {
    return ...
  }
)

O future recebe um processo assíncrono (não somente requisições)
e o builder recebe uma função que diz qual Widget deve ser construído.

Na função passada ao builder temos um:

context que recebe um BuildContext (Que merece um artigo próprio e não precisaremos ver por hora).
snapshot do tipo AsyncSnapshot (Esse sim nos ajuda e muito na hora de tratar essas requisições!!)

O AsyncSnapshot possui propriedades que nos ajudam - E MUITO - a entender o que está acontecendo durante a requisição e tratar isso, por exemplo:

Saber se ocorreu algum erro (hasError) ou se o retorno contém dados de fato (hasData)
Saber o estado atual do processo assíncrono, se ele foi concluído (done), se ainda estamos aguardando um retorno (waiting), se temos de fato um processo (active) ou não (none). E por aí vai.

Sendo assim, podemos usar o snapshot para tratar o fluxo que pretendemos fazer, por exemplo:

Quando a requisição for concluída, verificar se ela teve algum erro

  if (snapshot.hasError) {
    // Deu ruim :/ - Podemos pegar o snapshot.error
  } else {
    // Deu bom! :D - Podemos pegar o snapshot.data
  }

Acompanhar o fluxo completo da requisição!!

    switch (snapshot.connectionState) {
      case ConnectionState.none: 
        return Text('Aperte o botão para iniciar a requisição.');
      case ConnectionState.active: 
      case ConnectionState.waiting:
        return Text('Esperando requisição...');
      case ConnectionState.done:
        return Text('Uhul, acabou!');
    }

Agora sim, chega de enrolação! Prontos?

Mãos à obra

FutureBuilder à postos

FutureBuilder(
  future: ...,
  builder: (context, snapshot) {
    return ...
  }
)

Enquanto a requisição não for concluída, mostramos nossa barra de loading

FutureBuilder(
  future: http.get('https://minha-poke-api.com'),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return ...
    } else {
      return CircularProgressIndicator();
    }
  }
)

Assim que ela for concluída, vamos verificar se não ocorreu nenhum erro, claro!

FutureBuilder(
  future: http.get('https://minha-poke-api.com'),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if(snapshot.hasError) { 
        return OurErrorIndicator(snapshot.error);
      }     
      return ...
    } else {
      return CircularProgressIndicator();
    }
  }
)

E, finalmente: vamos montar nossos pokemons!

FutureBuilder(
  future: http.get('https://minha-poke-api.com'),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if(snapshot.hasError) { 
        return OurErrorIndicator(snapshot.error);
      }     
      return PokeListGenegator(snapshot.data);
    } else {
      return CircularProgressIndicator();
    }
  }
)

Simples, prático e rápido. Esse é o FutureBuilder!

Alguns projetos e palestras estão prestes a sair do forno e agora você já deu um passo pra acompanhar isso com muito mais facilidade!

Se interessou? Cola com a Flutter Nation:

Sobre Nós

Eu e o pessoal da Flutter Nation estamos em uma página e um grupo no Facebook.
Também estamos no Meetup e no GitHub!

Um estudo sobre Flutter SafeArea

Beatriz Herculano — Mon, 09 Dec 2019 17:59:03 +0000

Esse artigo faz parte de uma série chamada "Widgets da Semana", para saber mais sobre essa ela leia nossa introdução.

SafeArea

O video do Widget da semana postado no dia 14 de agosto de 2018, fala sobre a SafeArea. Esse widget inspeciona o modelo da tela do celular e ajusta a conteúdo para que ele fique formatado dentro dos limites.

Não so o modelo/formato da tela é importante, mas como hoje aparecem varias notificações e também existem os recortes de tela, seu aplicativo pode ficar assim:

Para resolver esse tipo de incompatibilidade nós podemos usar o SafeArea.

SafeArea(
    child: //Seus Widgets
);

Para entender a diferença entre usar ou não usar o SafeArea veja o exemplo a baixo:

Esse aplicativo tem o seguinte código:

Container(
      color: Colors.white,
      child: Text(
        'Esse texto invade a barra de notificação',
        style: TextStyle(color: Colors.black),
      ),
    );

Sem usar a SafeArea o texto invade a barra de notificação e, ao olhar no celular, o texto é cortado pelo formato das pontas da tela que é arredondado.

Se você apenas adicionar a SafeArea:

SafeArea(
        child: Container(
      color: Colors.white,
      child: Text(
        'Esse texto nao invade a barra de notificação',
        style: TextStyle(color: Colors.black),
      ),
    ));

O resultado é bem melhor:

Sobre Nós

Eu e o pessoal da Flutter Nation estamos em uma página e um grupo no Facebook.
Também estamos no Meetup e no GitHub!

Flutter - Um estudo semanal sobre Widgets

Beatriz Herculano — Wed, 27 Nov 2019 16:36:22 +0000

Widget Of The Week - Videos legendados em português, mas a documentação esta em inglês

O canal oficial do flutter no youtube posta semanalmente um vídeo falando de diferentes Widgets e como eles são usados no desenvolvimento de apps com flutter.

Os videos são curtos e super interessantes, porém no seu formato não passam tantas informações e referenciam a documentação oficial do flutter como uma fonte mais aprofundada nos widgets e códigos.

Com legendas em Português e varias outras línguas, esses videos são bem acessíveis, mas a documentação está apenas em inglês. Barrando varias pessoas a procurarem a fundo sobre esses widgets e sobre o Flutter.

O que nos vamos fazer? Um Artigo por semana sobre um dos Widgets!

Então nós, pessoas apaixonadas por flutter e com tempo sobrando, decidimos aumentar o alcance de informações sobre o flutter e seus Widgets da semana.

Nós vamos criar um artigo para cada widget da semana lançado e pros que vão lançar. Sabemos que será um desafio, já que até o dia atual já foram lançados 60 videos nesse formato, mas nossa força de vontade nos cega e nos guia.

Sobre quais Widgets nos vamos escrever?

Segue a lista de Widgets da semana, essa lista será atualizada conforme mais videos e artigos forem lançados:

SafeArea
Expanded
Wrap
AnimatedContainer
Opacity
FutureBuilder
FadeTransition
FloatingActionButton
PageView
Table
SliverAppBar
SliverList e SliverGrid
FadeInImage
StreamBuilder
InheritedModel
ClipRRect
Hero
CustomPaint
Tooltip
FittedBox
LayoutBuilder
AbsorbPointer
Transform
BackdropFilter
Align
Positioned
AnimatedBuilder
Dismissible
SizedBox
ValueListenableBuilder
Draggable
Flexible
MediaQuery
Spacer
InheritedWidget
AnimatedIcon
AspectRatio
LimitedBox
Placeholder
RichText
ReorderableListView
AnimatedSwitcher
AnimatedPositioned
AnimatedPadding
IndexedStack
Semantics
ConstrainedBox
Stack
AnimatedOpacity
FractionallySizedBox
ListView
ListTile
Container
SelectableText
DataTable
Slider, RangeSlider e CupertinoSlider
AlertDialog
AnimatedCrossFade
DraggableScrollableSheet
ColorFiltered

Sobre Nós

Eu e o pessoal da Flutter Nation estamos em uma página e um grupo no Facebook.
Também estamos no Meetup e no GitHub!

Instalando Flutter no Windows

Jonatas Santos — Thu, 19 Sep 2019 16:49:09 +0000

Olá meus queridos, sejam todos bem vindos a está saga sobre Flutter,onde iremos abordar desde á instalação até o desenvolvimento de Apps.

Então vamos nessa
Primeiro vamos conheçer um pouco sobre o Flutter e em seguida iremos iniciar a instalação do SDK no anbiemte Windows.

O Flutter é um SDK open-source da Google para o desenvolvimento de aplicativos nativos para iOS e Android, também é o principal método de criação de apps para o Google Fuchsia (novo sistema operacional em desenvolvimento que pretende substituir o Android).
Neste artigo, veremos o passo a passo da instalação do Flutter no Windows, para que possamos começar a brincar e construir nossos primeiros apps.

Pré-requisitos
Para instalar o flutter no Windows, você precisar ter uma maquina com os seguintes requisitos:
Sistema operacional Windows 7 SP1 ou mais atual na versão 64bits.
400 MB de espaço em disco para a instalação do SDK.
Windows PowerShell 5.0 ou mais recente.
Git for Windows versão 2.0 ou superior.

Instalando o SDK
1º passo: Baixe o SDK do Flutter e extraia-o.
Download

2º passo: Extraia o arquivo baixado e coloque a pasta “flutter” no diretório de sua preferencia, ex.: C:\src\flutter. A documentação não aconselha instalar o Flutter em um diretório como C:\Program Files\ para evitar problemas com falta de permissão.
Após esse passo, já é possível acessar o comando flutter e todos os comandos disponíveis executando o arquivo “flutter_console.bat”. Você também pode acessar o Flutter à partir de qualquer terminal ou prompt de comando.

3º passo: Adicione o Flutter à variável PATH do sistema. Para tal, copie o caminho até o diretório \bin, existente na pasta “flutter”. No Windows Explorer, clique com o botão direito em “Este computador” e acesse a opção “Propriedades”. Em seguida vá em “Configurações avançadas do sistema” → “Variáveis de ambiente”. No text field “Variáveis de usuário”, clique na variável PATH → “Novo”, e cole o caminho para o diretório \bin.

Instalando dependências
Agora que o SDK está instalado e o Flutter foi adicionado à variável de ambiente PATH, podemos utilizar o comando flutter doctor em qualquer terminal.

O flutter doctor é o comando responsável por verificar se existem dependências do Flutter a serem instaladas. Além disso, ele retorna um relatório (Doctor Summary) sobre o status da instalação contendo as dependências que faltam, como instalá-las, problemas encontrados e como resolvê-los.

Instalando o Android Studio
Para instalar o Android Studio acesse esse link, baixe e instale a versão mais recente. A instalação é bem simples e direta, do tipo “Next-Next-Finish”.

Ao concluir o processo de instalação e utilizar o comando novamente, o Doctor Summary trará outra mensagem, informando que há licenças do Android que não foram aceitas. Para resolver isso, utilize o comando: flutter doctor --android-licenses e aceite todas as licenças digitando “y” no console para todas as opções.

Testando a instalação
Agora chegou a parte onde iremos começar os testes, vamos criar um projeto, compilá-lo e executá-lo. Para tanto, assegure que há um dispositivo conectado ao computador, e que as opções de desenvolvedor foram ativadas nele . Em seguida, digite o comando flutter create , para criar um novo projeto, e entre na pasta criada.

Agora execute o comando:flutter run dentro pasta onde foi criado o projeto, e aceite a instalação no seu dispositivo para que seja possível compilar e executar o projeto da imagem abaixo.

Agora só alegria pois o Flutter está instalado e configurado corretamente.
Agora já podemos começar a brincar.

Alguns comando essenciais:
flutter create = cria um novo projeto com toda a estrutura padrão de pastas, código boilerplate e testes.
flutter run = compila e dá build no projeto.
flutter run -d = compila e dá build em um dispositivo específico.
flutter install = instala o projeto Flutter no dispositivo conectado.
flutter packages get = adiciona dependências ao projeto.
flutter test = executa teste unitário.
flutter doctor = mostra informações do processo de instalação do Flutter.
flutter devices = lista todos os dispositivos conectados, com informações como: nome do dispositivo, id do dispositivo e versão do Android .
s = realiza uma captura de tela do aplicativo em execução e a armazena na pasta do projeto.
r = realiza hot reload do projeto.
shift + r = realiza hot restart do projeto.
q = encerra o projeto.
flutter help = lista estes e todos os outros comandos disponíveis para serem executados com Flutter.

Iniciando com Flutter: Widgets

Beatriz Herculano — Thu, 12 Sep 2019 18:31:15 +0000

Introdução

O que é flutter?

Flutter é um SDK para desenvolvimento de aplicativos multiplataforma e aplicações web criada pela Google.

Eu comecei estudando flutter sem nunca ter programado com componentes, então vários conceitos eram estranhos para mim, o principal foi o conceito e uso de Widgets.

Ao ler a documentação do flutter, me deparei com a seguinte definição de widget:

Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.

Em uma tradução livre:

Widgets são estruturas que descrevem como a sua visualização deve ser, conforme o sua configuração e estado atual. Quando o estado de um widget muda, o ele reconstrói sua descrição, a qual o framework compara com a diferença da descrição anterior, para determinar as mudanças mínimas na árvore de renderização ao transitar de um estado para outro.

O trecho traz o conceito de widget, porém não traz a informação de como ele é usado para a construção do app em flutter.

O objetivo desse artigo é trazer de forma clara o conceito de widgets, sejam eles imutáveis ou mutáveis. E passar uma visão do que é construir um aplicativo em flutter usando eles.

Árvore de Renderização

A primeira coisa para se entender é que todo item visual em um app em flutter é um widget dentro do outro:
Se eu quiser um texto centralizado eu coloco um widget Text dentro de um Center. Inclusive, seu app em si vai ser um Widget com outros dentro dele.

Quando o Widget exterior tem seu estado modificado, ele reconstrói os Widgets interiores a ele, ou seja, sua árvore de renderização.

Imutáveis

Chamados de “StatelessWidgets” é um objeto que se constrói uma vez e não tem informações de como se reconstruir. Então ele não vai afetar a sua árvore de renderização.

Um exemplo de um widget imutável ou Stateless é o Text. Ele é um widget que recebe um parâmetro string/texto e monta um objeto visual onde esse valor é transformado em uma label e exibido na tela.

Text( 'Esse é um texto imutável',);

Ele, por si só nunca muda seu texto sozinho, se ele foi construído uma vez, ele não tem capacidade de se reconstruir com um valor de texto novo.

Mutáveis

O chamado de “StatefulWidget” é um objeto que tem objeto de State. Esse objeto representa situação atual do widget, que pode ser modificada conforme o tempo ou conforme coisas acontecem no seu app. Esse estado sabe se reconstruir, afetando todos os Widgets dentro dele, ou seja, sua árvore de renderização.

Se eu tenho um aplicativo onde um botão é clicado para mudar o valor do Widget, deve ser indicado que o estado dele mudou, usando o método setState. Assim nos forçamos o objeto a se reconstruir e, também, a todos os Widgets que tem dentro dele, inclusive os imutáveis. Se você quiser saber mais em como o setState afeta o desempenho do app veja a documentação.

Você pode entender melhor com o exemplo:

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            )
          ],
        ),
      ),
      color: Colors.white,
    );
  }
}

Nos temos um StatefulWidget que tem tem uma variável int, um objeto Text e um botão. Quando eu clico no botão a eu somo 1 ao meu número, e sinalizo que o estado do meu widget foi modificado, usando o setState. Assim ele força e reconstrução do meu objeto Text dentro dele com o novo valor do meu número.

Conclusão

No final, construir um app em flutter é usar StatefulWidgets que forçam a reconstrução de StatelessWidgets.

Meus agradecimento a Filipe Pereira, um grande amigo.

O que é o Flutter e Dart

Telles (@UnicornCoder) — Sun, 01 Sep 2019 11:58:38 +0000

Mas afinal o que é o Flutter?
Flutter é um SDK para desenvolvimento de aplicativos multiplataforma e aplicações web, criada pela Google, a ferramenta tem o seguinte princípio:

Desempenho: o app desenvolvido tem performance de app nativo;
UI rica e nativa, com experiência do usuário natural de cada plataforma;
Desenvolvimento rápido por meio do uso de widgets e do hot reload (aquele lance de atualizar a aplicação quando você salva seu código no editor e já poder testar as alterações).

A primeira versão do Flutter foi lançada em maio de 2017 e atualmente (2019), está na versão 1.7 com recursos para desenvolvimento Web.

O Flutter é dividido em duas camadas principais:

Engine, escrita em C/C++ e responsável pela estrutura de execução. Ela é composta pela Skia, uma biblioteca de renderização 2D e de texto, e pelo Dart, que é a linguagem utilizada no desenvolvimento;

Framework, utilizando a linguagem Dart, é onde criamos a implementação das Widgets da nossa aplicação.
Ele é responsável pelos componentes visuais, incluindo aqueles específicos para Android e para iOS, além da renderização de layouts responsivos.

Mas afinal porquê o Dart?

Dart é uma linguagem de programação apresentada pelo Google, em 2011, com o objetivo de substituir o JavaScript como principal linguagem embutida nos navegadores.

É possível citar como algumas de suas características o fato de ser orientada a objetos, declarativa, mantida majoritariamente pelo Google e por ser tipada. Além disso, o que foi o mais importante e decisivo na escolha dessa linguagem para Flutter é que ela pode ser compilada em ahead-of-time e just-in-time.

O Dart é AOT (Ahead Of Time) compilado em código nativo rápido, previsível, que permite que quase todo o Flutter seja escrito no Dart. Isso não apenas torna o Flutter rápido, praticamente tudo (incluindo todos os widgets) pode ser personalizado.
O Dart também pode ser compilado com JIT (Just In Time) para ciclos de desenvolvimento excepcionalmente rápidos e fluxo de trabalho que muda o estado (incluindo a popular sub-second stateful hot reload do Flutter).

Se você ja é familiarizado com o TypeScript ou até mesmo Java e/ou .net você vai lidar facilmente com o Dart, porque ele é uma linguagem tipada como disse aqui em cima além de trabalhamos com Classes, Async/await.

E tipar seus dados pode te ajudar muito na hora do desenvolvimento porque você sabe realmente o dado que entra e que sai para cada método que vai criar.

Vamos falar mais das particularidades do Dart nos próximos artigos, não se preocupe.

Agora que você já sabe o que é o Flutter e o Dart já podemos ir mais a fundo com nossos artigos e entender mais do que essa linguagem/framework pode nos oferecer.

Nos vemos nos próximos artigos!