dart

Criando um drawer navigator com Flutter

Um dos principais widgets de navegação em aplicativos mobile é o Drawer Navigator. Basicamente, o DrawerNavigator é um componente lateral utilizado para exibir links para páginas do aplicativo e, em alguns casos, exibir informações do usuário. No Flutter, este componente é muito utilizado para esta navegação. Sendo assim, neste artigo veremos como criar um drawer navigator em aplicativos Flutter.

Criando estrutura da tela

Um dos widgets mais utilizados para a construção da estrutura de telas em um aplicativo Flutter é o Scaffold . Basicamente, este widget provê uma estrutura padrão para os aplicativos, suportando o uso de componentes do Material Design, como AppBars, SnacBars, BottomNavigationBar e, claro, o DrawerNavigation. Sendo assim, a primeira coisa que temos que fazer é definir que nosso aplicativo irá retornar um widget do tipo Scaffold:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}
Flutter - Fundamentos
Curso de Flutter - Fundamentos
CONHEÇA O CURSO

Este widget retornará uma página similar à imagem abaixo:

Estrutura da página do Widget Scaffold

Adicionando Drawer

Agora que já temos a estrutura da página que iremos utilizar, já podemos adicionar o Drawer em nosso aplicativo. Para isso, precisamos definir a propriedade drawer no widget Scaffold:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
      ),
    );
  }
}

Este código criará um ícone localizado no canto superior esquerdo do aplicativo que, ao ser clicado, abrirá uma barra lateral. É esta barra que vamos utilizar para adicionar os links de navegação:

Navegação do Drawer no Flutter

Adicionando informações do usuário

Como dito anteriormente, além dos links de navegação do aplicativo, podemos adicionar informações sobre a conta do usuário no Drawer. Para isso, basta adicionarmos, dentro de uma ListView, o widget UserAccountsDrawerHeader com as informações de email, nome e imagem do usuário:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountEmail: Text("user@mail.com"),
              accountName: Text("Seu zé"),
              currentAccountPicture: CircleAvatar(
                child: Text("SZ"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Flutter - Widgets
Curso de Flutter - Widgets
CONHEÇA O CURSO

O código acima adicionará as informações do usuário no topo do Drawer do aplicativo, como podemos ver na imagem abaixo:

Informações dos usuários no DrawerNavigation

Adicionando links de navegação

Vimos que a principal utilidade de um DrawerNavigation é exibir links para navegação entre as páginas do aplicativo. Para isso, cada link pode ser adicionado em um ListTile. Este widget permite que adicionemos um ícone, o nome da página e um método que será executado quando o link for clicado.

Para isso, depois de definirmos os dados do usuário, adicionamos um ListTile para cada ícone que quisermos adicionar ao Drawer:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountEmail: Text("user@mail.com"),
              accountName: Text("Seu zé"),
              currentAccountPicture: CircleAvatar(
                child: Text("SZ"),
              ),

            ),
            ListTile(
              leading: Icon(Icons.person),
              title: Text("Minha conta"),
              onTap: () {
                Navigator.pop(context);
                //Navegar para outra página
              },
            ),
            ListTile(
              leading: Icon(Icons.shopping_basket),
              title: Text("Meus pedidos"),
              onTap: () {
                Navigator.pop(context);
                //Navegar para outra página

              },
            ),
            ListTile(
              leading: Icon(Icons.favorite),
              title: Text("Favoritos"),
              onTap: () {
                Navigator.pop(context);
                //Navegar para outra página
              },
            ),
          ],
        ),
      ),
    );
  }
}

É recomendado que cada ícone, ao ser clicado, primeiro execute o método pop do Navigator para que o drawer feche e, posteriormente, navegue para a página de destino. Com isso, o resultado final do nosso Drawer pode ser visto na imagem abaixo:

Links de navegação no drawer

O que são mixins e qual sua importância no Dart

Quando estamos desenvolvendo aplicações, é comum o uso de herança para evitar a reescrita de código. Basicamente, a herança é uma forma de uma classe obter atributos e métodos de outra classe, evitando a duplicidade e melhorando o reaproveitamento de código.

Porém, a herança por si só, não resolve todos os problemas. Imagine a seguinte situação:

Possuímos em nosso software, uma classe Pessoa , com seus atributos e métodos e três classes que herdam de Pessoa, as classes Funcionario, Cliente e Fornecedor. Estas três classes são filhas de Pessoa e, por isso, herdam seus atributos e métodos:

Diagrama exemplificando uma herança

Porém, imagine que queremos adicionar um método que é comum a diversas classes que herdam de Pessoa, mas nem todas. A primeira opção seria desenvolver estes métodos apenas nas classes que iriam utilizá-las, porém, desta forma, há a duplicidade de código, já que mais de uma classe irá utilizar o mesmo método.

A segunda opção seria utilizar um recurso presente no Dart chamado de Mixins, como veremos abaixo.

O que são Mixins e como eles funcionam?

Basicamente, os Mixins são recursos presentes no Dart que nos permitem adicionar um conjunto de “características” a uma classe sem a necessidade de utilizar uma herança.

Voltando ao exemplo anterior, imagine as classes abaixo:

abstract class Pessoa {
  String _nome;
  int _idade;
  String _sexo;
  String _email;

  Pessoa(String nome, int idade, String sexo, String email) {
    this._nome = nome;
    this._idade = idade;
    this._sexo = sexo;
    this._email = email;
  }

// getters e setters
// métodos
}
class Funcionario extends Pessoa {
  String _cargo;

  Funcionario(String nome, int idade, String sexo, String email, String cargo)
      : this._cargo = cargo,
        super(nome, idade, sexo, email);

// getters e setters
// métodos
}
class Cliente extends Pessoa {
  bool _ativo;

  Cliente(String nome, int idade, String sexo, String email, bool ativo)
      : this._ativo = ativo,
        super(nome, idade, sexo, email);

// getters e setters
// métodos
}
class Fornecedor extends Pessoa {
  String _empresa;

  Fornecedor(String nome, int idade, String sexo, String email, String empresa)
      : this._empresa = empresa,
        super(nome, idade, sexo, email);

// getters e setters
// métodos
}
Dart - Fundamentos
Curso de Dart - Fundamentos
CONHEÇA O CURSO

Agora precisamos implementar o método abastecer() que servirá para um funcionário ou fornecedor abastecer a prateleira de um supermercado. Onde seria o melhor local para isso? Se implementarmos na classe Pessoa, o Cliente também conseguirá acesso a este método, o que não é correto para o que queremos. E é aí que entram os Mixins \o

Com o uso dos Mixins, podemos desenvolver o método abastecer() de forma “isolada” e apenas permitir que determinadas classes possuam acesso a ele. Para isso, criamos o Mixin da seguinte forma:

mixin Abastecer {
  void abastecer() {
    print("Prateleira abstecida");
  }
}

Por ser uma classe especial, os mixins não precisam de construtores.

Agora, para definirmos as classes que poderão utilizar o método abastecer(), utilizamos a palavra with, como podemos ver abaixo:

class Funcionario extends Pessoa with Abastecer{
  String _cargo;

  Funcionario(String nome, int idade, String sexo, String email, String cargo)
      : this._cargo = cargo,
        super(nome, idade, sexo, email);

// getters e setters
// métodos
}
class Fornecedor extends Pessoa with Abastecer{
  String _empresa;

  Fornecedor(String nome, int idade, String sexo, String email, String empresa)
      : this._empresa = empresa,
        super(nome, idade, sexo, email);

// getters e setters
// métodos
}

Com isso, as classes Fornecedor e Funcionario poderão utilizar o método abastecer(), sem que a classe Cliente o faça:

main() {
cliente.abastecer(); //The method 'abastecer' isn't defined for the class 'Cliente'.
funcionario.abastecer(); //Prateleira abstecida
fornecedor.abastecer(); //Prateleira abstecida
}

Isso faz com que o reaproveitamento do nosso código seja ainda mais eficiente, já que o método abastecer() só será implementado uma vez, mas poderá ser utilizado quantas vezes forem necessárias. Outras linguagens possuem recursos parecidos com os mixins no Dart, como o PHP e as Traits.

Manipulando listas no Dart

Uma lista é a estrutura de dados mais básica do Dart. Sua estrutura permite armazenar dados em sequência, onde cada elemento possui sua posição de origem, sendo o primeiro elemento armazenado no índice zero e, a cada elemento novo, o índice é incrementado. Com o Dart, há diversos métodos para manipulação de listas, como veremos neste artigo.

Declarando Listas no Dart

As listas no Dart podem ser declaradas de duas formas. A primeira é especificando o seu tamanho total, como podemos ver abaixo:

void main() { 
   var lista = new List(3); 
   lista[0] = 1; 
   lista[1] = 2; 
   lista[2] = 3; 
   print(lista); 
}

O código acima irá criar uma lista com 3 posições disponíveis para armazenar novos elementos.

Já a segunda forma é quando não especificamos o tamanho total da lista e, assim, podemos armazenar quantos elementos forem necessários:

void main() { 
   var lista = new List(); 
   lista.add(1); 
   lista.add(2); 
   print(lista); 
}
Flutter - Fundamentos
Curso de Flutter - Fundamentos
CONHEÇA O CURSO

Imprimindo listas

A impressão de listas no Dart é bem simples, basta utilizarmos o método print() e adicionarmos o nome da lista como parâmetro:

void main() {
   var lista = new List(); 
   lista.add(1); 
   lista.add(2); 
   var lista2 = new List(3); 
   lista2[0] = 1; 
   lista2[1] = 2; 
   lista2[2] = 3; 
   print(lista); 
   print(lista2); 
}

O código acima irá retornar o seguinte resultado:

Imprimindo Listas

Inserindo elementos na lista

A inserção de elementos em uma lista pode ser feito de duas formas, utilizando o método add() ou atribuindo um valor a uma determinada posição, como podemos ver abaixo:

void main() {
   var lista = new List(); 
   lista.add(1); 
   var lista2 = new List(3); 
   lista2[0] = 1; 
   print(lista); 
   print(lista2); 
}

Retornando tamanho da lista

Para retornar o tamanho de uma lista no Dart, podemos utilizar a propriedade length:

void main() {
   var lista = new List(); 
   lista.add(1); 
   lista.add(2);
   lista.add(3);
   lista.add(4);
     print("O tamanho da lista é: ${lista.length}");
}

O código acima irá imprimir o tamanho total da lista:

Retornando tamanho da lista

Removendo elementos da lista

Existem diversas formas de remover elementos de uma lista no Dart, a primeira é utilizando o método remove() , passando o valor a ser removido como parâmetro:

void main() {
   var lista = new List(); 
   lista.add(1); 
   lista.add(2);
   lista.add(3);
   lista.add(4);
   lista.remove(2);
   print(lista);
}

Removendo elementos da lista

A segunda forma de remover elementos de uma lista no Dart é utilizando o método removeAt() e passando a posição do elemento a ser removido:

void main() {
   var lista = new List(); 
   lista.add(1); 
   lista.add(2);
   lista.add(3);
   lista.add(4);
   lista.removeAt(2);
   print(lista);
}

Removendo posição da lista

A terceira forma é utilizando o método removeLast() , que removerá o último elemento da lista:

void main() {
   var lista = new List(); 
   lista.add(1); 
   lista.add(2);
   lista.add(3);
   lista.add(4);
   lista.removeLast();
   print(lista);
}

Removendo ultimo elemento

A última forma é utilizando o método removeRange() , que vai remover os elementos de um intervalo específico:

void main() {
   var lista = new List(); 
   lista.add(1); 
   lista.add(2);
   lista.add(3);
   lista.add(4);
   lista.removeRange(0, 2);
   print(lista);
}

Removendo elementos em um intervalo

Flutter: Widgets Stateful e Stateless

Vimos aqui no blog a importância dos widgets para a criação de aplicativos com o Flutter, além de suas duas categorias (widgets de interface e widgets de layout). Essa categoria de widgets fornece meios para a construção de interfaces, porém, para que o app consiga “conversar” com o usuário, ele precisa ter seu estado alterado. Por isso, há dois tipos de widgets no Flutter, os widgets stateful e stateless . Neste artigo veremos cada um deles e qual a sua finalidade.

O que são estados?

Como vimos anteriormente, para que um app consiga “conversar” com o usuário, ele precisa ter seu estado alterado… Mas o que é este “estado”?

Basicamente, um estado é uma informação que é alterada em tempo de execução. Imagine que você está no app do Youtube e clica sobre o botão “like” de um vídeo. Neste momento, este botão altera a cor e incrementa em uma unidade o contador de likes, certo? Esta alteração das informações em tempo de execução é chamado de estado:

Botão de like sendo alterado a partir do clique
Em um app, esta alteração de estado ocorre sempre que uma informação tenha que ser alterada, seja por uma interação do usuário ou uma nova informação vinda de um servidor. Para este tipo de tela, o Flutter utiliza widgets do tipo Stateful.

Porém, nem toda tela deverá ter sua informação alterada em tempo de execução. Imagine uma tela para exibir um texto de boas vindas para o usuário. Esta tela apenas exibirá uma mensagem, não tendo seu estado alterado. Para este tipo de tela, o Flutter utiliza widgets do tipo Stateless.

Flutter - Fundamentos
Curso de Flutter - Fundamentos
CONHEÇA O CURSO

Widgets Stateful

Como dito anteriormente, os widgets stateful são responsáveis por alterar o estado de um componente durante a execução de um aplicativo sem a necessidade do redirecionamento para outra tela.

Para isso, os widgets stateful possuem a seguinte estrutura:

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container(color: const Color(0xFFFFE306));
  }
}

A classe MyApp irá retornar uma nova instância da classe MyAppState sempre que um estado for alterado na aplicação. Este comportamento permite que um aplicativo em Flutter possa atualizar suas informações em tempo de execução sem a necessidade de um reload.

Para esta atualização de estado, o Flutter possui um método especial chamado setState(), como veremos abaixo.

Método setState()

Sempre que precisamos alterar um determinado valor em um aplicativo Flutter, devemos adicionar esta instrução no método setState(). É ele quem vai alterar o estado desta informação e atualizar a página para que o novo valor seja exibido.

Basicamente, o método setState() irá alterar o estado de uma variável e chamar o método build() para que a interface do aplicativo seja renderizada novamente:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Primeira App"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Você pressionou o botão:',
            ),
            Text(
              '$_counter vezes',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Sempre que o floatActionButtonfor pressionado, o método _incrementCounter será invocado. Nele, o método setState() irá incrementar o valor da variável _counter e executar o método build() para que a interface seja renderizada novamente com o novo valor a ser exibido.

Contador sendo alterado em execução

Widgets Stateless

Há casos em que precisamos criar uma página apenas para exibir uma informação estática, seja uma mensagem de boas vindas, um formulário de cadastro, uma imagem, etc. Nestes casos, não há a necessidade de criar um widget Stateful, já que o estado da tela possuirá o mesmo valor em todo o seu ciclo de vida.

Nestes casos, o Flutter possibilita a criação de widgets Stateless :

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Primeira App"),
      ),
      body: Container(
        child: Text("Olá, mundo!"),
      ),
    );
  }
}

Este tipo de widget criará uma página estática apenas com o texto “Olá, mundo!”:
Aplicativo exibindo o texto "ola mundo"

Widgets Stateful e Stateless

Como vimos neste artigo, é muito importante entendermos o funcionamento e o objetivo de cada tipo de widget no Flutter. Sempre que precisarmos de uma página que terá algum tipo de alteração em tempo de execução, precisamos utilizar um widget do tipo stateful. Caso precisemos de uma página que não terá seu estado alterado, o correto é utilizar um widget stateless.

Esta escolha deve ser feita com muito cuidado, já que um widget do tipo stateful consome muito mais memória que um widget do tipo stateless.

Configurando ambiente de desenvolvimento Flutter

Como vimos aqui no blog, o Flutter é um framework multiplataforma para desenvolvimento de aplicativos Android e iOS utilizando uma mesma base de código. Por ser multiplataforma, o Flutter permite desenvolvermos apps em qualquer sistema operacional (Windows, Linux ou macOS), porém, para isso, precisamos configurar seu ambiente de desenvolvimento, como veremos neste artigo.

Configurando o ambiente

Para desenvolvermos com o Flutter, precisaremos dos seguintes itens instalados em nossa máquina:

  • Flutter SDK;
  • Android Studio e/ou um editor de texto com plug-ins de suporte ao Flutter (vamos utilizar o Android Studio como exemplo);
  • Um emulador ou dispositivo para testarmos a aplicação.
  • Configurar o plugin do Flutter no Android Studio (ou outro editor de textos com suporte ao Flutter).

Instalação do Flutter SDK

A instalação do Flutter varia em cada sistema operacional, como veremos abaixo:

Instalação no Windows:

A instalação no Windows é bem simples, necessitando apenas do Git e o próprio SDK do Flutter. Os passos para realizar esta instalação podem ser vistos abaixo:

1 – O Flutter é dependente do Git para funcionar. Por isso, é necessário que o Git esteja instalado na máquina. Para isso, basta baixar o cliente do Git para Windows em sua página oficial. A instalação é no estilo Next > Next > Finish. Após o download do instalador do Git para Windows for concluído, basta clicar no instalador para que o processo de instalação seja iniciado;

2 – Certifique-se de que você esteja executando o Windows 7 SP1 64 bits ou superior;

3 – Baixe o arquivo ZIP da última versão do Flutter. O arquivo mais recente pode ser encontrado na página oficial do Flutter, dentro da seção “Get the Flutter SDK”;

4 – Extraia o arquivo ZIP com o Flutter SDK para uma pasta onde não seja necessária a elevação de privilégios. A documentação do Flutter recomenda que o SDK seja extraído para C:\src\Flutter;

5 – Dentro da pasta onde o Flutter SDK foi instalado, localize o arquivo flutter_console.bat e dê um duplo clique sob ele. Dessa maneira, o console do Flutter será inicializado e nós já poderemos rodar comandos para o Flutter;

Além disso, se quisermos colocar o Flutter CLI diretamente em nosso PATH (evitando termos que sempre abrir o Flutter Console de maneira manual), os seguintes passos são necessários:

  • Vá em Painel de Controle > Contas de usuário > Contas de usuário > Variáveis de ambiente;
  • Na seção de variáveis de ambiente de usuário, procure a variável chamada “Path”;
  • Adicione à variável “Path” o caminho para a pasta flutter/bin. Não se esqueça de separar a nova entrada das entradas pré-existentes com um ponto-e-vírgula;
  • Reinicie o Windows;
  • Abra uma instância do PowerShell e digite o comando flutter. O help do Flutter deve ser exibido.

Com isso, o SDK do Flutter estará instalado e funcionando normalmente 🙂

Flutter - Fundamentos
Curso de Flutter - Fundamentos
CONHEÇA O CURSO

Instalação no Linux:

A instalação no Linux também é relativamente simples, como podemos ver nos passos abaixo:

1 – O Flutter é dependente do Git para funcionar. Para isso, instale o Git através de seu gerenciador de pacotes (se você utiliza o Synaptics – especialmente Ubuntu ou Debian, você pode rodar o comando apt-get install git-all);

2 – Verifique se sua distribuição Linux é 64 bits. O Flutter só funciona em sistemas operacionais 64 bits;

3 – Baixe a última versão do Flutter SDK para Linux. O SDK pode ser baixado em sua página oficial na seção “Get the Flutter SDK”;

4 – Extraia o Flutter para uma pasta que não exija elevação de privilégios. A documentação recomenda que o Flutter SDK seja extraído para uma pasta chamada “development” na raiz do seu usuário;

5 – Adicione o Flutter às variáveis de ambiente com o comando export PATH=pwd/flutter/bin:$PATH em uma instância do Terminal;

6 – Rode o comando flutter no terminal. O help do Flutter CLI deve ser exibido:
Comando Flutter executado no terminal do macOS

Os passos acima adicionam o Flutter ao PATH de maneira temporária. Se quiser adicionar o Flutter permanentemente, siga os passos da própria documentação.

Seguido todos esses passos, nosso ambiente linux também já está funcional :D.

Instalação no macOS

O processo no macOS é bem similar ao do Linux, como podemos ver abaixo:

1 – O Flutter é dependente do Git para funcionar. Para instalar o Git no MacOS, você pode realizar a instalação através do Homebrew (com o comando brew install git) ou através de um instalador tradicional do GIT que pode ser obtido na página da sourceforge;

2 – Baixe a última versão do Flutter SDK para o MacOS. O arquivo compactado com a última versão pode ser obtido em sua página oficial, na seção “Get the Flutter SDK”;

3 – Extraia o Flutter para uma pasta que não exija elevação de privilégios. A documentação recomenda que o Flutter SDK seja extraído para uma pasta chamada “development” na raíz do seu usuário;

4 – Atualize o PATH da máquina para que este aponte para o Flutter SDK. Para isso, basta rodar o comando export PATH=pwd/flutter/bin:$PATH em uma instância do Terminal;

5 – Em uma instância do Terminal, rode o comando flutter. O help do Flutter CLI deve ser exibido em seguida:

Comando Flutter executado no terminal do macOS

Os passos acima adicionam o Flutter ao PATH de maneira temporária. Se quiser adicionar o Flutter permanentemente, siga os passos da própria documentação.

Instalação do Android Studio

Além do SDK do Flutter, precisamos de uma IDE (ou editor de textos) para escrevermos nossos códigos e, com isso, desenvolvermos nossas aplicações. O Android Studio possui um suporte incrível para construir aplicações Flutter, desde criar um projeto até a compilação.

Dito isso, é essa ferramenta que utilizaremos como exemplo. Porém, ela não é a única existente, o Visual Studio Code também possui um excelente suporte ao Flutter, porém veremos sua configuração em um outro artigo 🙂

Para instalação do Android Studio, é necessário baixar o instalador da página oficial, independente da plataforma que esteja utilizando. Você pode baixar a última versão do Android Studio em sua página oficial. Após acessar este link, basta clicar no botão “Download Android Studio” e aceitar os termos de licenciamento para que o download seja iniciado.

Após a conclusão do Download, o processo de instalação dependerá de sua plataforma.

Instalação do Android Studio no Windows

O processo de instalação do Android Studio no Windows é bem simples e segue o padrão Next > Next > Finish. Ao final deste processo, ele será instalado normalmente e estará funcional.

Instalação do Android Studio no Linux

A instalação no Linux é um pouco mais complexa, como podemos ver nos passos abaixo:

1 – Você deverá extrair o arquivo baixado para uma pasta própria para aplicativos em seu sistema operacional. Estas pastas geralmente estão em /usr/local/ (se você quiser disponibilizar o Android Studio somente para seu usuário) ou em /opt/ (para usuários compartilhados);

2 – Abra uma instância do Terminal para navegar até a pasta onde o Android Studio foi descompactado;

3 – Ao chegar na pasta onde o Android Studio foi descompactado, navegue até a pasta /bin e execute o arquivo studio.sh. O Android Studio deve ser inicializado.

Opcionalmente, você também pode adicionar a pasta /android-studio/bin à variável PATH. Dessa maneira, você não precisará navegar sempre até a pasta onde o Android Studio foi descompactado.

Instalação do Android Studio no macOS

Para instalar o Android Studio no macOS, assim como a maioria dos softwares, o processo é o seguinte:

1 – Abra o arquivo DMG que foi baixado;

2 – Arraste o Android Studio para dentro da pasta Applications;

3 – Execute o Android Studio.

Ao final destes processos, o Android Studio estará instalado e pronto para ser utilizado. O último passo, então, é configurar o emulador no Android Studio para que possamos testar nossas aplicações.

Criando emulador no Android Studio

Como dito acima, um emulador facilita (e muito) no desenvolvimento de nossos aplicativos, já que é com ele que conseguiremos testar nosso app e verificar se tudo está funcionando como deveria. Para isso, o Android Studio permite a criação e gerenciamento de emuladores dentro da IDE.

Para criar um emulador no Android Studio, devemos seguir os seguintes passos:

1 – Ao iniciar o Android Studio, clicamos em Configure e selecionamos a opção AVD Mananger, como mostrado na imagem abaixo:

Abrindo o AVD Manager no Android Studio
2 – Ao fazer isso, a seguinte tela será aberta:

Exibindo emuladores existentes no Android Studio
3 – O próximo passo é clicar na opção CREATE VIRTUAL DEVICE, selecionar o dispositivo que queira utilizar como emulador

Selecionando dispositivo para emular no Android Studio
Selecionar a versão do Android a ser utilizada (no meu computador, estou utilizando a versão do Android Q):

Selecionando versão do Android a ser utilizado no emulador
E, por fim, nomear o emulador para finalizar a criação:

Emulador criado no Android Studio

Configurando plugin do Flutter no Android Studio

Agora que já possuímos todo nosso ambiente configurado e funcional, precisamos instalar o plugin do Flutter ao Android Studio, é com ele que a IDE permitirá criar, gerenciar e executar apps Flutter. Sendo assim, no Android Studio é feito através de um plugin. Para instalar e configurar este plugin, siga os seguintes passos:

1 – Abra o Android Studio;

2 – Abra o Gerenciador de Plugins em File > Settings > Plugins (no caso do Windows ou Linux) ou Preferences > Plugins (no caso do MacOS);

3 – Clique em “Browse Repositories…”, selecione o plugin do Flutter e clique em “Install”;

4 – O Android Studio irá pedir a instalação do plugin do Dart também. Confirme a instalação deste plugin adicional;

5 – Aceite a reinicialização do Android Studio após a instalação do plugin.

Com isso, seu ambiente de desenvolvimento Flutter já está configurado e estamos aptos a desenvolvermos nosso primeiro projeto, como veremos no próximo artigo desta trilha. Até lá.

Configurando fontes em projetos Flutter

Ao desenvolver um app, precisamos nos preocupar com os mínimos detalhes, desde sua paleta de cores até as fontes a serem utilizadas. No Flutter, o uso de fontes externas é relativamente simples, necessitando apenas de algumas configurações. Sendo assim, neste artigo veremos como configurar fontes em projetos Flutter.

Como adicionar e configurar fontes no projeto flutter

A configuração de fontes externas no Flutter possui dois passos, basicamente. Primeiro, precisamos criar o diretório e armazenar os arquivos de fontes nesta pasta. Depois, é necessário configurar este diretório no arquivo pubspec.yaml do projeto, como veremos nos tópicos abaixo.

Onde armazenando fontes personalizadas no projeto Flutter

O primeiro passo para utilizar fontes em um app Flutter é inserí-las no projeto. Para isso, na raiz do diretório do app, precisamos criar uma pasta chamada assets. É ela quem vai armazenar os arquivos estáticos do nosso projeto, sejam fontes, imagens, áudios, etc.

Pasta para adicionar fontes externas no projeto flutter
Lembre-se que esta pasta deve estar na raiz do projeto 🙂

Depois disso, criamos um outro diretório (agora, dentro da pasta assets) chamado fonts. É ele quem vai armazenar as fontes do nosso projeto. Para este exemplo, vamos utilizar a fonte Montserrat, que pode ser baixada no site do Google Fonts.

No site, há diversas variações da fonte, mas utilizaremos apenas as versões Montserrat-Light, Montserrat-Regular, Montserrat-Medium e Montserrat-Bold. Para isso, copiamos os respectivos arquivos de fontes que baixamos e colamos no diretório fonts do projeto:

Lista de fontes externas adicionadas ao projeto flutter
Com isso, as fontes já estão no projeto. O próximo passo, então, é configurá-las no app.

Configurando fontes externas no projeto Flutter

Com as fontes presentes no projeto, agora precisamos configurá-las. Para isso, no arquivo pubspec.yaml, adicionamos a pasta assets/fonts para que o projeto reconheça o diretório que está armazenando os arquivos estáticos:

flutter:

    # The following line ensures that the Material Icons font is
    # included with your application, so that you can use the icons in
    # the material Icons class.
    uses-material-design: true

    assets:
    - assets/images/
    - assets/fonts/

Depois disso, é só especificar as fontes que serão utilizadas (também no arquivo pubspec.yaml). É nessa configuração que definimos a largura de cada tipo de fonte:

fonts:
    - family: Montserrat
        fonts:
        - asset: assets/fonts/Montserrat-Light.ttf
            weight: 300
        - asset: assets/fonts/Montserrat-Regular.ttf
            weight: 400
        - asset: assets/fonts/Montserrat-Medium.ttf
            weight: 500
        - asset: assets/fonts/Montserrat-Bold.ttf
            weight: 700

Agora, ao final dessa configuração, é só atualizar o pubspec.yaml para que o projeto reconheça as fontes:

  • Execute o comando flutter pub get, caso você esteja utilizando o terminal;
  • Se estiver utilizando o Android Studio, clique no botão Packages get;
  • Caso esteja utilizando o VS Code, clique no botão Get Packages.

Ao final deste processo, a fonte já está pronta para ser utilizada no aplicativo, conforme o código de exemplo abaixo:

Text(
    "Teste",
    style: TextStyle(
        fontFamily: 'Montserrat',
        fontSize: 24,
        fontWeight: FontWeight.bold
    ),
)

O código acima irá renderizar um widget Text(), conforme a imagem abaixo, já com a fonte Montserrat.

Widget text com fonte personalizada

O que é o Fuchsia?

Apesar das recentes melhorias feitas pela Google para o Android, a maioria de nós sabemos que este ainda não é o sistema operacional mais estável e leve do mundo. Diversos são os exemplos de smartphones com um grande poder de processamento o executando, porém sofrendo com diversos travamentos. Pensando nisso, a Google resolveu “chutar o barco” e, desde meados de 2016, começar a desenvolver um novo sistema operacional para smartphones do zero, o Fuchsia.

Porquê desenvolver um novo SO?

Como dito anteriormente, não é novidade que o Android sempre sofreu com travamentos, apesar da melhoria expressiva de poder de processamento dos novos smartphones. A Google até que melhorou (e muito) o SO nos últimos anos, porém, ao que parece, é hora de uma nova era.

Como o Fuchsia funciona?

Diferente do Android, baseado no Linux, o Fuchsia é construído sobre um microkernel chamado Zircon. Segundo a própria Google, o Zircon é composto por um microkernel e um pequeno conjunto de serviços, drivers e bibliotecas para que o hardware possa conversar diretamente com o software. Ao migrar para um microkernel, a Google espera um grande melhoria de desempenho, já que o kernel do Linux possui mais de 15 milhões de linhas de código, o que necessita de um grande poder de processamento para executá-lo.

Além disso, o Fuchsia não deve continuar com o Java ou C++ como linguagens de desenvolvimento oficiais. A ideia inicial da Google é que os apps desenvolvidos para o SO sejam feitos em Flutter, framework para desenvolvimento de aplicativos móveis criado pela Google e que usa o Dart como linguagem de desenvolvimento. Desta decisão podemos obter diversas vantagens, dentre elas:

Flutter - Fundamentos
Curso de Flutter - Fundamentos
CONHEÇA O CURSO
  • O Dart é mais leve que o Java, tornando os aplicativos capazes de serem executados com um hardware menos potente;

  • Com o Flutter conseguimos desenvolver aplicações multiplataforma, podendo ser executadas tanto no Android quanto no iOS utilizando a mesma base de código. Isso fará com que os desenvolvedores não se preocupem em desenvolver uma mesma aplicação em duas linguagens nativas diferentes para serem executadas nos principais SOs mobile do mercado.

Fuchsia e IoT

Apesar de construído com o foco principal para substituir o Android em dispositivos móveis, o Fuchsia, por ser muito mais enxuto, deverá ser compatível com hardwares mais simples, apontando para uma futura integração com dispositivos de IoT (Internet das Coisas). Isso deverá tornar o sistema ainda mais completo, já que esta é uma área em crescimento linear nos últimos anos e tende a se manter assim.

Com isso, a integração entre aplicativos desenvolvidos para o Fuchsia e os diversos equipamentos conectados pela IoT tende a ser mais simples e completa, facilitando a vida de diversos desenvolvedores e, consequentemente, o número de aplicativos para esta finalidade.

O que se sabe até agora

Recentemente, a Google lançou o site do Fuchsia Project, um portal contendo diversas informações sobre o novo sistema operacional da empresa. No site é possível acessar a documentação do projeto, seu código-fonte e diversos tutoriais da plataforma, além de um completo documento explicando os conceitos arquiteturais do Fuchsia.

Além disso, oficialmente, a Google ainda não determinou a data para o lançamento do Fuchsia e nem quando ele será utilizado como sistema operacional oficial da empresa, porém, com o grande crescimento do Flutter nos últimos anos, não será nenhuma novidade se este processo esteja mais próximo do que nunca.

Podemos concluir que…

Apesar de tudo ainda ser um grande mistério e cercado de dúvidas, o projeto Fuchsia tem tudo para dar certo. Mais leve e enxuto, o SO poderá ser executado em hardwares mais simples, permitindo a integração de diversos tipos de dispositivos. Além disso, com o Flutter, o desenvolvedor poderá utilizar a mesma base de código para o desenvolvimento de um app para o Fuchsia e o iOS, economizando tempo (e dinheiro) das empresas.

O que é Flutter?

Criado pelo Google, o Flutter é um Framework para o desenvolvimento de aplicativos mobile para Android e iOS muito utilizado atualmente no mercado.

Caso você não saiba o que é um Framework:

O framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base, onde as aplicações são construídas, um otimizador de recursos.

Possui como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

De volta ao Flutter…

De código aberto sobre a BSD License e multiplataforma, o Flutter possui como linguagem base o Dart para criação de aplicativos.

Grandes empresas vêm apostando no Flutter, como: Google, Alibaba, Groupon, Nubank, Google entre outras. Um dos grandes motivos para esta aposta é justamente a forma com que o Flutter funciona para criação de aplicações.

Ao criar um aplicativo com o Flutter, seu código é compilado para a linguagem base do dispositivo, ou seja, as aplicações são realmente nativas e por isso conseguem acessar recursos do dispositivo sem a “ajuda” de terceiros e com o desempenho maior. A figura abaixo ilustra as diferanças destes acessos entre o React Native e o Flutter:

comparativo de arquitetura entre flutter e react native

Características do Flutter

Diversas são as características do Flutter. Dentre elas podemos citar:

  • Multiplataforma – Podemos desenvolver aplicações com Flutter em qualquer sistema operacional (Windows, Linux e MacOS);
  • Criação de aplicações nativas a partir de um único código base – Com o Flutter é possível desenvolvermos aplicações nativas para Android e iOS;
  • Acesso direto aos recursos nativos do sistema – Uma aplicação criada com Flutter possui acesso nativo aos recursos do dispositivo (câmera, wifi, memória, etc);
  • Maior desempenho – As aplicações criadas com Flutter possuem um maior desempenho quando comparadas ao React Native, por exemplo, pois todo seu código-fonte é transformado em código nativo.
Flutter - Fundamentos
Curso de Flutter - Fundamentos
CONHEÇA O CURSO

Sintaxe

Como vimos anteriormente, o Flutter utiliza o Dart para criação de aplicações e toda sua interface é criada por meio de widgets. O trecho de código abaixo demonstra uma simples aplicação:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    // Title
      title: "TreinaWeb",
      // Home
      home: Scaffold(
        // Appbar
        appBar: AppBar(
          // Title
          title: Text("TreinaWeb"),
          backgroundColor: Colors.pink,
        ),
        // Body
        body: Container(
          // Center the content
          child: Center(
            // Add Text
            child: Text("Olá, Mundo! :)"),
          ),
        ),
      )));
}

O código acima resultará no seguinte app:

Tela de um aplicativo em flutter

Caso tenha interesse em estudar Flutter, veja nosso artigo de como configurar o ambiente de desenvolvimento flutter.

Podemos concluir que…

O Flutter é atualmente um dos principais frameworks para o desenvolvimento de aplicações mobile. Criado pela Google, com o Flutter conseguimos desenvolver aplicações nativas para Android e iOS a partir de um único código base.

Diversas empresas têm investido no Flutter para desenvolvimento de suas soluções, desta forma, o Framework tem tudo para se transformar em uma excelente opção de estudo para desenvolvedores que buscam uma alternativa para suas aplicações.

Flutter - Widgets
Curso de Flutter - Widgets
CONHEÇA O CURSO

O que é Dart?

Se você começou a estudar um pouco sobre o Flutter, provavelmente deve ter trabalhado um pouco com o Dart… Se você ainda não mexeu com Flutter, deve ter ouvido falar um pouco sobre o Dart, já que várias grandes empresas, como o Nubank, estão começando a migrar suas aplicações para esta linguagem. Porém, o que afinal de contas é o Dart?

O que vem a ser o Dart?

O Dart é uma linguagem de programação fortemente tipada inicialmente criada pela Google em 2011. A missão inicial do Dart era substituir o JavaScript para desenvolvimento de scripts em páginas web. Porém, com a evolução da linguagem e com o passar dos anos, ela hoje pode ser considerada uma linguagem multi-paradigma, embora a linguagem apresente fortes estruturas típicas de linguagens orientadas a objeto.

Hoje, sabemos que o Dart não obteve muito sucesso em sua missão inicial em substituir o JavaScript nos navegadores. Porém, o desenvolvimento e posterior sucesso do Flutter, que é fundamentado no Dart, fez com que a linguagem voltasse à tona, atraindo a atenção de muitos desenvolvedores.

O Dart possui algumas variantes no que diz respeito a seu ambiente de execução. O código Dart pode ser executado em uma máquina virtual (chamada DartVM, máquina virtual esta inserida em um conjunto de ferramentas chamado Dart Native). Esta máquina virtual ainda pode ser executada em dois modos diferentes: JIT (Just-in-Time Compiler) e AOT (Ahead-of-Time Compiler). De maneira mais simplista, a compilação JIT ocorre no momento da execução de um trecho de código, onde o código Dart é convertido para código de máquina à medida em que ele é executado.

Já na execução AOT, o código é convertido para código de máquina previamente. A outra maneira na qual podemos executar o código Dart é através de um processo de transpilação para JavaScript através da ferramenta dart2js, ferramenta esta também integrante do Dart SDK. Todos estes modos de execução tornam o Dart uma linguagem muito flexível e que pode ser executada tanto em ambientes nativos (como em aplicações mobile e desktop) como em ambientes web (como em uma aplicação web que utilize o Angular, por exemplo).

Flutter - Fundamentos
Curso de Flutter - Fundamentos
CONHEÇA O CURSO

A sintaxe do Dart

O Dart possui uma sintaxe com estilo baseado no C. Isso faz com que sua sintaxe seja muito similar à linguagens atualmente populares, como Java e C#. Porém, o Dart tenta reduzir um pouco os ruídos característicos de linguagens baseadas no C.

Um simples “Hello World” em Dart poderia ser escrito da seguinte forma:

main() {
  print('Hello World!');
}

Dart também possui algumas características de linguagens funcionais. Isso fica claro no exemplo abaixo, onde uma sequência de Fibonacci é gerada.

int fib(int n) => (n > 2) ? (fib(n - 1) + fib(n - 2)) : 1;

void main() {
  print('fib(20) = ${fib(20)}');
}

Críticas ao Dart

Um dos pontos que dificultaram a adoção do Dart no início foi o fato de que a Google foi acusada de fomentar a fragmentação das plataformas web. Para a maioria dos desenvolvedores e empresas, não fazia sentido trocar uma linguagem consolidada para a web como o JavaScript por uma linguagem nova como o Dart, por mais que a Google tivesse planos de incluir a DartVM de maneira nativa ao Google Chrome na época, já um dos browsers mais utilizados.

A fama que a Google tem por abandonar alguns produtores de maneira abrupta também fizeram com que os desenvolvedores olhassem com uma certa desconfiança para o Dart.

Porém, o sucesso do Flutter serviu para que desenvolvedores em geral começassem a pensar em dar uma chance para o Dart. Suas features desenvolvidas para lidar com uma maneira muito simples com aspectos complicados como concorrência e transições em interfaces serviram para mostrar os valores da linguagem.

Além disso, a Google já não tem mais os planos de fazer com que o Dart venha a substituir o JavaScript, já que este objetivo não foi alcançado no passado. Isso fez com que a Google adotasse o caminho de interoperabilidade entre o JavaScript e o Dart, fazendo com que o transpilador Dart para JavaScript fosse desenvolvido.

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200