O Flutter é uma tendência em tecnologia. Este artigo vai sugerir algumas formas gratuitas e pagas de como aprender a desenvolver aplicações do iOS e do Android com Flutter.

Você tem interesse em desenvolvimento de aplicações para dispositivos móveis?

Se a sua resposta é sim, você está lendo o artigo correto! Talvez você não conheça sobre Flutter ainda, mas não se preocupe – eu escrevi um artigo sobre o que o Flutter é e por que você deveria aprender sobre ele.

O Flutter é um framework de interface gratuito e de código aberto criado pelo Google e lançado em maio de 2017. Em poucas palavras, ele permite que você crie aplicações móveis nativas com um único código. Isso significa que você pode usar uma linguagem de programação e uma base de código para criar duas aplicações diferentes (para iOS e para Android). – What is Flutter and Why You Should Learn It in 2020 (em inglês)

Neste texto, eu compartilho com você dois tipos de conteúdo, gratuito e pago. Eu tentei achar recursos excelentes para apoiar cada tipo de aluno (vídeos, cursos, livros, tutoriais e assim por diante).

Antes de começarmos, eu também escrevi um artigo sobre como e por que aprender a programar com conteúdo pago ou gratuito (em inglês). Se você não sabe que tipo de conteúdo é melhor para você, eu recomendo que você leia esse artigo antes de ler este.

Então, vamos começar. Eu tentei explicar cada recurso com um pequeno parágrafo. Todas as informações vieram da descrição do site associado. Como você pode imaginar, eu não tentei todos esses métodos. Se precisar de mais detalhes, eu convido você a visitar o site vinculado.

Conteúdo gratuito

Vídeos/cursos

• Dart Programming Tutorial - Full Course (em inglês)

Um curso completo do freeCodeCamp sobre Dart.

Aprenda a linguagem de programação Dart neste tutorial completo para iniciantes. O Dart é uma linguagem de programação fortemente tipada que é usada no framework Flutter para desenvolvimento de aplicações para dispositivos móveis multiplataforma.

• Flutter Course - Full Tutorial for Beginners (Build iOS and Android Apps) (em inglês)

Um tutorial completo do freeCodeCamp para iniciantes. Este tutorial foi uma das minhas referências quando comecei com Flutter. É uma excelente introdução e ajuda você a entender os conceitos básicos que serão úteis para você.

Aprenda Flutter, o framework de desenvolvimento multiplataforma para dispositivos móveis inovador do Google, para criar aplicações para Android e iOS. Neste curso, Nick Manning do FlutterCrashCourse ensina como começar a usar o Flutter de maneira rápida e eficaz. Nick é engenheiro do Flutter desde 2017 e resumiu esse conhecimento do mundo real em um curso intensivo direto, realista e passo a passo.

• Flutter Crash Course (em inglês)

Curso intensivo de Flutter, da Traversy Media.

Neste curso intensivo, vamos ver Flutter para a construção de aplicações para dispositivos móveis nativas. Veremos o que é o Flutter, como configurá-lo, construir widgets, widgets stateless e stateful, roteamento e mais.

• Flutter Tutorial for Beginners (em inglês)

Uma lista de vídeos do YouTube sobre Flutter para iniciantes criada por The Net Ninja.

Você vai descobrir como usar o Flutter (e o Dart) para criar aplicações para Android e iOS do zero. Você vai aprender tudo sobre widgets, pacotes, assets e código assíncrono para criar a aplicação de Horário Mundial (World Time), assim como outras duas miniaplicações para colocar suas habilidades de Flutter em bom uso!

• Flutter & Firebase App Build (em inglês)

Uma lista de vídeos do YouTube sobre Flutter e Firebase criada por The Net Ninja. Quando eu quis usar Firebase na minha primeira aplicação, eu fiz este curso pela primeira vez. Ele era amplo e me deu um bom entendimento sobre como integrar essa ferramenta com o Flutter.

Você vai aprender como criar uma aplicação em Flutter do zero, usando o Firebase Firestore (um banco de dados sincronizado em tempo real) e a Firebase Authentication. Essa lista é para pessoas que já sabem Flutter.

• Reso Coder (em inglês)

Um canal no YouTube dedicado ao Flutter. Reso Coder criou diversos tutoriais explicando como o framework funciona. Diversas ferramentas que você pode usar com Flutter são explicadas para que você possa integrá-las ao seu projeto. Existem inclusive lições sobre arquitetura de código para Flutter.

O Flutter está mudando a cena do desenvolvimento de aplicações. Não fique para trás! Aprenda como desenvolver para multiplataformas móveis e para a web. Aprenda através de lições orientadas a projetos cuidadosamente elaboradas e aplique imediatamente o que aprender nas suas próprias aplicações.

• FilledStacks (em inglês)

Um canal do YouTube dedicado ao Flutter. Você descobrirá diversos tutoriais sobre Flutter, como por exemplo Firebase, interfaces (UI), arquitetura e outros. Também existem aulas de Flutter para celular e para a web.

Aprenda a criar aplicações para dispositivos móveis de alta qualidade e prontas para produção usando o Flutter.

• Code With Andrea (em inglês)

Tutoriais sobre aprender Flutter. Vídeos regulares cobrindo todas as coisas relacionadas ao Flutter, incluindo gerenciamento de estado, leiautes, testes, e mais. Este canal vai ajudar você a se tornar melhor em Flutter.

Google Codelabs

Você também pode aprender Flutter com o site Google Codelabs. O site fornece uma experiência prática de programação, baseada em tutoriais. Eu acabo de descobrir este site. Você pode até usá-lo para outras coisas além do Flutter. Ele faz referência a todas as tecnologias do Google com muitos tutoriais para ajudar você a usá-las.

A maior parte dos codelabs (tutoriais da plataforma) guiarão você em um processo de criar uma pequena aplicação ou adicionar uma nova funcionalidade a uma aplicação existente. Eles cobrem uma grande variedade de tópicos como Android Wear, Google Compute Engine, Projeto Tango e Google APIs no iOS.

Documentação

Uma coisa que eu adoro no Flutter é a documentação (em inglês). Ela é completa e pode ser muito útil enquanto você está aprendendo ou desenvolvendo uma aplicação.

A documentação passa por vários tópicos como:

• Como começar com Flutter
• Todas as widgets disponíveis
• Documentação da API (documentação de bibliotecas)
• Um guia passo a passo com diversos tutoriais
• Alguns exemplos de aplicações
• O canal do Flutter no YouTube

Livros

• Flutter Succinctly (em inglês)

Pesquisando na documentação do Flutter, eu achei este livro. O autor cria uma aplicação completamente funcional, que permite entender claramente o framework. Esse livro é acessível independentemente de você ter ou não a experiência com desenvolvimento móvel.

• Flutter Tutorials Handbook (em inglês)

Este livro contém receitas que demonstram como solucionar problemas comuns enquanto se escreve aplicações com o Flutter. Cada método é individual e pode ser usado como referência para ajudar a construir uma aplicação. Pode ser usado em adição à documentação do Flutter. Diversos exemplos são listados aqui.

HereWeCode

Eu planejo criar tutoriais de Flutter em breve. Para ficar sabendo, você pode me seguir no meu canal do Youtube e no Twitter. Fique à vontade para me falar quais tópicos e tutoriais você quer ver.

Conteúdo pago

Cursos

• The Complete 2020 Flutter Development Bootcamp with Dart (em inglês)

Este Bootcamp de Flutter foi criado oficialmente com a colaboração do time de Flutter do Google. Você vai aprender do zero e criar algumas aplicações. O curso inclui mais de 27 horas de tutoriais em vídeo e projetos. Mesmo que tenha zero de experiência com programação, você pode começar aqui.

• Learn Flutter & Dart to Build iOS & Android Apps [2020] (em inglês)

Um guia completo sobre o SDK do Flutter e o sobre o framework do Flutter para criar aplicações nativas para iOS e Android. Conhecimento básico em linguagem de programação ajuda, mas não é obrigatório. Com este curso, você aprenderá Flutter não somente na teoria, mas também construindo uma aplicação completa e realista. Ela usará recursos como o Google Maps, câmera, animações e mais.

• Dart and Flutter: The Complete Developer's Guide (em inglês)

Tudo o que você precisa saber para construir aplicações para dispositivos móveis com Flutter e Dart, incluindo RxDart e animações! Experiência prévia com JavaScript, Java, Python ou similar é requerida. Neste curso, você vai entender como projetar, criar animações e arquitetura de uma aplicação com Flutter. Este curso parece ser mais avançado que outros. Você vai aprender habilidades como usar o armazenamento off-line, otimizar solicitações de rede, usar padrões de design avançados, e mais.

• Flutter & Firebase: Build a Complete App for IOS & Android (em inglês)

Neste curso, você vai construir uma aplicação completa e real para iOS e Android, usando Dart, Flutter e Firebase. Aqui, você começa com o básico. O curso inclui uma introdução completa ao Dart e ao Flutter. Conforme for progredindo, o curso apresentará tópicos mais avançados, com ênfase especial em escrever código pronto para produção, para que você aprenda a construir aplicações robustas que escalem. Conceitos importantes são explicados com diagramas claros. Ao final deste curso, você será uma pessoa desenvolvedora de Flutter competente.

Mais livros

• Learn Google Flutter Fast: 65 Example Apps (em inglês)

Um livro completo sobre Flutter. Aprenda Flutter através de 65 miniaplicações de exemplo. Você aprenderá a criar tudo, desde a aplicação mais básica até a avançada com arquitetura complexa. No final do livro, o autor explica como publicar sua aplicação nas lojas.

• Beginning Flutter: A Hands-On Guide to App Development 1st Edition (em inglês)

Esta é uma excelente introdução ao Flutter para que você possa começar rápido e aprender os princípios fundamentais. Se você prefere aprender através dos livros, não hesite!

Beginning Flutter: A Hands-On Guide to App Development 1st Edition é um recurso essencial tanto para desenvolvedores experientes quanto para novatos interessados em começar com Flutter. É uma introdução ao Flutter, passo a passo. Este livro foi escrito por Marco L. Napoli, CEO da Pixolini Inc. e experiente desenvolvedor de aplicações para dispositivos móveis, web e desktop. Ele tem um forte histórico comprovado no desenvolvimento de sistemas visualmente elegantes e simples de usar.

Conclusão

Você conhece outros recursos para aprender Flutter? Envie uma mensagem para o autor pelo Twitter para que ele os adicione por lá.

Fique à vontade para compartilhar este artigo se gostou dele.

Se quiser mais conteúdo do gênero, pode seguir o autor no Twitter, onde ele escreve sobre desenvolvimento para a web, autoaperfeiçoamento e minha jornada como desenvolvedor full-stack!

Atualmente, muitas pessoas usam aplicações de bate-papo para se comunicar com membros da equipe, amigos e familiares por meio de seus smartphones. Isso torna essas aplicações um meio essencial de comunicação.

Há também uma alta demanda por interfaces de usuário intuitivas e poderosas com recursos de última geração. A interface do usuário (ou UI) é o aspecto mais impactante da experiência geral do usuário. Por isso, é importante acertar.

O desenvolvimento de aplicações com o Flutter conquistou o mundo em termos de desenvolvimento de aplicações para dispositivos móveis multiplataforma. Você pode usá-lo para criar interfaces de usuário perfeitas. Muitas empresas de desenvolvimento usam o Flutter hoje.

Neste tutorial, apresentarei a você uma mistura de ambos: criaremos uma interface de usuário de aplicação de bate-papo inteiramente no ambiente de codificação do Flutter/Dart. Além de aprender a incrível implementação da interface do usuário de bate-papo no Flutter, também aprenderemos como funcionam seus fluxos de trabalho e estruturas de codificação.

Então, vamos começar!

Como criar um projeto no Flutter

Primeiro, precisamos criar um projeto no Flutter. Para isso, certifique-se de ter instalado o Flutter SDK e outros requisitos relacionados ao desenvolvimento de aplicações do Flutter.

Se tudo estiver configurado corretamente, para criar um projeto, podemos simplesmente executar o seguinte comando em nosso diretório local desejado:

flutter create ChatApp

Depois de configurar o projeto, podemos navegar dentro do diretório do projeto e executar o seguinte comando no terminal para executar o projeto em um emulador disponível ou em um dispositivo real:

flutter run

Depois de construído com sucesso, obteremos o seguinte resultado na tela do emulador:

Como criar a UI da tela inicial principal

Agora, vamos começar a criar a interface de usuário (UI) para nossa aplicação de bate-papo. A tela inicial principal conterá 2 seções:

• a tela de conversa, que vamos implementar como uma página separada; e
• uma barra de navegação inferior.

Primeiro, precisamos fazer algumas configurações simples no código boilerplate padrão, no arquivo main.dart. Vamos remover um pouco do código padrão e adicionar MaterialApp, apontando para o Container vazio como uma página inicial por enquanto:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Container(),
    );
  }
}

Agora, no lugar do widget Container vazio, vamos chamar o widget de tela HomePage. Primeiro, no entanto, precisamos implementar a tela.

Como criar a tela inicial principal

Dentro do diretório ./lib da nossa pasta raiz do projeto, precisamos criar uma pasta chamada ./screens. Essa pasta conterá todos os arquivos dart para diferentes telas.

Dentro do diretório ./lib/screens/, precisamos criar um arquivo chamado homePage.dart. Dentro do arquivo homePage.dart, precisamos adicionar o código básico do StatelessWidget, conforme mostrado no trecho de código abaixo:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(child: Text("Chat")),
      ),

    );
  }
}

Agora, precisamos chamar o widget de classe HomePage no arquivo main.dart conforme mostrado no trecho de código abaixo:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

Depois, vamos obter o resultado conforme mostrado na captura de tela do emulador abaixo:

Como criar a barra de navegação inferior

Vamos colocar um menu de navegação inferior na tela HomePage. Para isso, vamos utilizar o widget BottomNavigationBar no parâmetro bottomNavigationBar, fornecido pelo widget Scaffold.

Aqui está a implementação geral do código:

return Scaffold(
      body: Container(
        child: Center(child: Text("Chat")),
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.grey.shade600,
        selectedLabelStyle: TextStyle(fontWeight: FontWeight.w600),
        unselectedLabelStyle: TextStyle(fontWeight: FontWeight.w600),
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text("Chats"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.group_work),
            title: Text("Channels"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_box),
            title: Text("Profile"),
          ),
        ],
      ),
    );

Aqui, configuramos um BottomNavigationBar com vários parâmetros de estilo e mantivemos nosso item de menu de navegação no parâmetro items. Para o parâmetro body, usamos um simples Container com um widget Text.

Então, obteremos a barra de navegação inferior, conforme mostrado na captura de tela do emulador abaixo:

Com a navegação inferior concluída, podemos prosseguir e implementar a seção da lista de conversas, logo acima da barra de navegação inferior.

Como criar a tela de lista de conversas

Aqui, criaremos a seção da lista de conversas, que conterá uma seção de cabeçalho, uma barra de pesquisa e a visualização da lista de conversas.

Primeiro, dentro da pasta ./lib/screens, precisamos criar um arquivo dart chamado chatPage.dart. Em seguida, adicionamos um modelo de classe de widget com estado simples dentro dele, conforme mostrado no trecho de código abaixo:

import 'package:flutter/material.dart';

class ChatPage extends StatefulWidget {
  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Center(child: Text("Chat")),
      ),
    );
  }
}

Depois, precisamos chamar o widget de classe chatPage no lugar do widget Container em homePage.dart, conforme mostrado no trecho de código abaixo:

return Scaffold(
      body: ChatPage(),
      bottomNavigationBar: BottomNavigationBar(

Isso nos dará o seguinte resultado, conforme mostrado no emulador abaixo:

Como criar um cabeçalho de página de lista de conversas

Agora, vamos adicionar o cabeçalho à seção da lista de conversas, que terá um cabeçalho de texto e um botão. O código completo de implementação da interface do usuário é fornecido no trecho de código abaixo:

return Scaffold(
      body: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SafeArea(
              child: Padding(
                padding: EdgeInsets.only(left: 16,right: 16,top: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text("Conversations",style: TextStyle(fontSize: 32,fontWeight: FontWeight.bold),),
                    Container(
                      padding: EdgeInsets.only(left: 8,right: 8,top: 2,bottom: 2),
                      height: 30,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Colors.pink[50],
                      ),
                      child: Row(
                        children: <Widget>[
                          Icon(Icons.add,color: Colors.pink,size: 20,),
                          SizedBox(width: 2,),
                          Text("Add New",style: TextStyle(fontSize: 14,fontWeight: FontWeight.bold),),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

Aqui, usamos o SingleChildScrollView para que a seção do corpo do chatPage.dart seja totalmente rolável.

Em seguida, usamos a instância BouncingScrollPhysics para fornecer o efeito de salto quando a rolagem de um usuário atinge o final ou o início.

Depois disso, adicionamos um widget Text e um Container para exibir a parte inferior do lado direito.

Por fim, temos um widget Column como filho do widget SingleChildScrollView para que tudo apareça verticalmente na tela.

Isso nos dará o seguinte resultado conforme mostrado no emulador abaixo:

Logo depois, vamos adicionar uma barra de pesquisa logo abaixo da seção do cabeçalho.

Como adicionar uma barra de pesquisa

No widget Column de antes, vamos adicionar um widget de barra de pesquisa, logo abaixo da UI da seção do cabeçalho. Assim, como segundo filho do widget Column, precisamos inserir o seguinte código fornecido no trecho de código abaixo:

Padding(
  padding: EdgeInsets.only(top: 16,left: 16,right: 16),
  child: TextField(
    decoration: InputDecoration(
      hintText: "Search...",
      hintStyle: TextStyle(color: Colors.grey.shade600),
      prefixIcon: Icon(Icons.search,color: Colors.grey.shade600, size: 20,),
      filled: true,
      fillColor: Colors.grey.shade100,
      contentPadding: EdgeInsets.all(8),
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(20),
          borderSide: BorderSide(
              color: Colors.grey.shade100
          )
      ),
    ),
  ),
),

Isso nos dará o seguinte resultado conforme mostrado no emulador abaixo:

Como criar a lista de conversas

Tendo a seção do cabeçalho e uma barra de pesquisa, vamos implementar a seção da lista de conversas.

Para isso, precisamos implementar um modelo de objeto de classe para armazenar as instâncias das listas de conversas.

Então, dentro da pasta ./lib, precisamos criar uma pasta chamada ./models. Dentro de ./models, precisamos criar um arquivo chamado chatUsersModel.dart.

No arquivo de modelo, precisamos criar uma classe de objeto de modelo, conforme mostrado no trecho de código abaixo:

import 'package:flutter/cupertino.dart';

class ChatUsers{
  String name;
  String messageText;
  String imageURL;
  String time;
  ChatUsers({@required this.name,@required this.messageText,@required this.imageURL,@required this.time});
}

O objeto abrigará o nome do usuário, a mensagem de texto, o URL da imagem e a hora.

Em seguida, precisamos criar uma lista de usuários dentro do chatPage.dart conforme mostrado no trecho de código abaixo:

class _ChatPageState extends State<ChatPage> {
  List<ChatUsers> chatUsers = [
    ChatUsers(text: "Jane Russel", secondaryText: "Awesome Setup", image: "images/userImage1.jpeg", time: "Now"),
    ChatUsers(text: "Glady's Murphy", secondaryText: "That's Great", image: "images/userImage2.jpeg", time: "Yesterday"),
    ChatUsers(text: "Jorge Henry", secondaryText: "Hey where are you?", image: "images/userImage3.jpeg", time: "31 Mar"),
    ChatUsers(text: "Philip Fox", secondaryText: "Busy! Call me in 20 mins", image: "images/userImage4.jpeg", time: "28 Mar"),
    ChatUsers(text: "Debra Hawkins", secondaryText: "Thankyou, It's awesome", image: "images/userImage5.jpeg", time: "23 Mar"),
    ChatUsers(text: "Jacob Pena", secondaryText: "will update you in evening", image: "images/userImage6.jpeg", time: "17 Mar"),
    ChatUsers(text: "Andrey Jones", secondaryText: "Can you please share the file?", image: "images/userImage7.jpeg", time: "24 Feb"),
    ChatUsers(text: "John Wick", secondaryText: "How are you?", image: "images/userImage8.jpeg", time: "18 Feb"),
  ];

Agora que temos os dados da lista de conversas dos usuários fictícios, podemos aplicá-los à lista de conversas para criar uma exibição de lista.

Como criar um widget de classe separado para conversa individual

Aqui, vamos criar um widget de componente separado para os itens individuais na exibição da lista de conversas.

Para isso, dentro de ./lib, crie uma pasta chamada ./widgets. Dentro de ./widgets, precisamos criar um arquivo chamado conversationList.dart. Dentro do novo arquivo de widget, podemos usar o código do seguinte trecho de código:

import 'package:flutter/material.dart';

class ConversationList extends StatefulWidget{
  String name;
  String messageText;
  String imageUrl;
  String time;
  bool isMessageRead;
  ConversationList({@required this.name,@required this.messageText,@required this.imageUrl,@required this.time,@required this.isMessageRead});
  @override
  _ConversationListState createState() => _ConversationListState();
}

class _ConversationListState extends State<ConversationList> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
      },
      child: Container(
        padding: EdgeInsets.only(left: 16,right: 16,top: 10,bottom: 10),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Row(
                children: <Widget>[
                  CircleAvatar(
                    backgroundImage: NetworkImage(widget.imageUrl),
                    maxRadius: 30,
                  ),
                  SizedBox(width: 16,),
                  Expanded(
                    child: Container(
                      color: Colors.transparent,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(widget.name, style: TextStyle(fontSize: 16),),
                          SizedBox(height: 6,),
                          Text(widget.messageText,style: TextStyle(fontSize: 13,color: Colors.grey.shade600, fontWeight: widget.isMessageRead?FontWeight.bold:FontWeight.normal),),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Text(widget.time,style: TextStyle(fontSize: 12,fontWeight: widget.isMessageRead?FontWeight.bold:FontWeight.normal),),
          ],
        ),
      ),
    );
  }
}

Esse arquivo de widget usa o nome do usuário, a mensagem de texto, o URL da imagem, a hora e um valor de tipo de mensagem booleana como parâmetros. Ele retorna o template contendo os valores.

No chatPage.dart, dentro do widget ListView, precisamos chamar o widget ConversationList passando os parâmetros necessários conforme mostrado no trecho de código abaixo:

ListView.builder(
  itemCount: chatUsers.length,
  shrinkWrap: true,
  padding: EdgeInsets.only(top: 16),
  physics: NeverScrollableScrollPhysics(),
  itemBuilder: (context, index){
    return ConversationList(
      name: chatUsers[index].name,
      messageText: chatUsers[index].messageText,
      imageUrl: chatUsers[index].imageURL,
      time: chatUsers[index].time,
      isMessageRead: (index == 0 || index == 3)?true:false,
    );
  },
),

Observe que este widget ListView deve ser mantido como o primeiro filho do widget Column na tela chatPage.

Isso nos dará o seguinte resultado conforme mostrado no emulador abaixo:

Isso conclui a implementação da interface do usuário de nossa tela de lista de conversas e tela principal da página inicial como um todo. Agora, passaremos para a implementação da tela de detalhes do bate-papo.

Como criar uma tela de detalhes do bate-papo

Agora, vamos criar uma tela de detalhes do bate-papo. Para isso, precisamos criar um arquivo chamado chatDetailPage.dart dentro da pasta ./lib/screens/. Por enquanto, vamos apenas adicionar o código básico conforme mostrado no trecho de código abaixo:

import 'package:flutter/material.dart';

class ChatDetailPage extends StatefulWidget{
  @override
  _ChatDetailPageState createState() => _ChatDetailPageState();
}

class _ChatDetailPageState extends State<ChatDetailPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Chat Detail"),
      ),
      body: Container()
    );
  }
}

Aqui, retornamos um AppBar básico com Text e um Container vazio como o body do widget Scaffold.

Agora, vamos adicionar navegação para ChatDetailPage no método onTap do widget GestureHandler no arquivo do widget conversationList.dart, conforme mostrado no trecho de código abaixo:

GestureDetector(
      onTap: (){
        Navigator.push(context, MaterialPageRoute(builder: (context){
          return ChatDetailPage();
        }));
      },

Podemos navegar para a tela de detalhes do bate-papo, conforme mostrado na demonstração do emulador abaixo:

Como criar uma barra de aplicações personalizada para tela de detalhes do bate-papo

Aqui, vamos adicionar uma barra de aplicações personalizada na parte superior da tela de detalhes do bate-papo. Para isso, vamos utilizar o widget AppBar com diversas configurações de parâmetros conforme o trecho de código abaixo:

return Scaffold(
      appBar: AppBar(
        elevation: 0,
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white,
        flexibleSpace: SafeArea(
          child: Container(
            padding: EdgeInsets.only(right: 16),
            child: Row(
              children: <Widget>[
                IconButton(
                  onPressed: (){
                    Navigator.pop(context);
                  },
                  icon: Icon(Icons.arrow_back,color: Colors.black,),
                ),
                SizedBox(width: 2,),
                CircleAvatar(
                  backgroundImage: NetworkImage("<https://randomuser.me/api/portraits/men/5.jpg>"),
                  maxRadius: 20,
                ),
                SizedBox(width: 12,),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text("Kriss Benwat",style: TextStyle( fontSize: 16 ,fontWeight: FontWeight.w600),),
                      SizedBox(height: 6,),
                      Text("Online",style: TextStyle(color: Colors.grey.shade600, fontSize: 13),),
                    ],
                  ),
                ),
                Icon(Icons.settings,color: Colors.black54,),
              ],
            ),
          ),
        ),
      ),
      body: Container()
    );

Isso nos dará o seguinte resultado conforme mostrado no emulador abaixo:

Como implementar a caixa de texto inferior

Na parte inferior da tela de detalhes do bate-papo, precisamos adicionar uma seção de mensagens, que conterá um editor de texto e um botão para enviar a mensagem.

Para isso, vamos usar o widget Align e alinhar o filho dentro do widget com a parte inferior da tela. O código geral é fornecido no trecho de código abaixo:

body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              padding: EdgeInsets.only(left: 10,bottom: 10,top: 10),
              height: 60,
              width: double.infinity,
              color: Colors.white,
              child: Row(
                children: <Widget>[
                  GestureDetector(
                    onTap: (){
                    },
                    child: Container(
                      height: 30,
                      width: 30,
                      decoration: BoxDecoration(
                        color: Colors.lightBlue,
                        borderRadius: BorderRadius.circular(30),
                      ),
                      child: Icon(Icons.add, color: Colors.white, size: 20, ),
                    ),
                  ),
                  SizedBox(width: 15,),
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                        hintText: "Write message...",
                        hintStyle: TextStyle(color: Colors.black54),
                        border: InputBorder.none
                      ),
                    ),
                  ),
                  SizedBox(width: 15,),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.send,color: Colors.white,size: 18,),
                    backgroundColor: Colors.blue,
                    elevation: 0,
                  ),
                ],
                
              ),
            ),
          ),
        ],
      ),

Isso nos dará uma seção de mensagens com um campo de texto para digitar as mensagens e um botão para enviar as mensagens:

Também temos um botão à esquerda que podemos usar para adicionar outras opções de menu para mensagens.

Como configurar a seção de lista de mensagens na tela do bate-papo

Agora, vamos criar a interface do usuário para as mensagens que aparecem na tela de detalhes do bate-papo.

Primeiro, precisamos criar um modelo que reflita o objeto de instância da mensagem.

Para isso, precisamos criar um arquivo chamado chatMessageModel.dart dentro da pasta ./models e definir o objeto classe do seguinte modo:

import 'package:flutter/cupertino.dart';

class ChatMessage{
  String messageContent;
  String messageType;
  ChatMessage({@required this.messageContent, @required this.messageType});
}

O objeto de classe aceita o conteúdo da mensagem e o tipo de mensagem (seja do remetente, seja do destinatário) como valores de instância.

Agora no chatDetailPage.dart, precisamos criar uma lista de mensagens a serem exibidas conforme o trecho de código abaixo:

List<ChatMessage> messages = [
    ChatMessage(messageContent: "Hello, Will", messageType: "receiver"),
    ChatMessage(messageContent: "How have you been?", messageType: "receiver"),
    ChatMessage(messageContent: "Hey Kriss, I am doing fine dude. wbu?", messageType: "sender"),
    ChatMessage(messageContent: "ehhhh, doing OK.", messageType: "receiver"),
    ChatMessage(messageContent: "Is there any thing wrong?", messageType: "sender"),
  ];

Em seguida, vamos criar uma exibição de lista para as mensagens no topo dos filhos do widget Stack, acima do widget Align, conforme mostrado no trecho de código abaixo:

body: Stack(
        children: <Widget>[
          ListView.builder(
            itemCount: messages.length,
            shrinkWrap: true,
            padding: EdgeInsets.only(top: 10,bottom: 10),
            physics: NeverScrollableScrollPhysics(),
            itemBuilder: (context, index){
              return Container(
                padding: EdgeInsets.only(left: 16,right: 16,top: 10,bottom: 10),
                child: Text(messages[index].messageContent),
              );
            },
          ),
          Align(

Agora as mensagens aparecerão em forma de lista conforme mostrado na captura de tela do emulador abaixo:

Temos as mensagens aparecendo na tela, mas elas não estão estilizadas da maneira que queremos na tela de bate-papo.

Como estilizar e posicionar as mensagens com base no remetente e no destinatário

Passamos, então a estilizar a lista de mensagens para que apareça como um balão de mensagem de bate-papo. Também vamos posicioná-los com base no tipo de mensagem usando o widget Align, conforme mostrado no trecho de código abaixo:

ListView.builder(
  itemCount: messages.length,
  shrinkWrap: true,
  padding: EdgeInsets.only(top: 10,bottom: 10),
  physics: NeverScrollableScrollPhysics(),
  itemBuilder: (context, index){
    return Container(
      padding: EdgeInsets.only(left: 14,right: 14,top: 10,bottom: 10),
      child: Align(
        alignment: (messages[index].messageType == "receiver"?Alignment.topLeft:Alignment.topRight),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: (messages[index].messageType  == "receiver"?Colors.grey.shade200:Colors.blue[200]),
          ),
          padding: EdgeInsets.all(16),
          child: Text(messages[index].messageContent, style: TextStyle(fontSize: 15),),
        ),
      ),
    );
  },
),

Isso nos dará o seguinte resultado conforme mostrado no emulador abaixo:

Você pode ver uma demonstração geral de toda a interface do usuário da aplicação abaixo:

Parabéns! Criamos uma interface de usuário de aplicação de bate-papo intuitiva e moderna inteiramente no ecossistema Flutter e Dart.

Recapitulando

As aplicações de mensagens sociais são um meio de comunicação essencial hoje em dia. Equipados com interfaces de bate-papo poderosas e de última geração com chamadas de áudio e vídeo, anexos de imagens e arquivos e muito mais, essas aplicações de bate-papo tornaram a comunicação muito mais eficiente. Elas tornaram o mundo menor para nós.

O objetivo principal deste artigo foi mostrar como desenvolver uma interface de usuário simples e intuitiva para aplicações de bate-papo com um design moderno no ecossistema do Flutter. A implementação passo a passo forneceu uma demonstração detalhada da interface do usuário da aplicação, bem como uma visão geral do ambiente de codificação do Flutter.

Espero que este tutorial o ajude a criar sua próxima aplicação de bate-papo usando o Flutter.

Você também pode obter inspiração sobre a interface de usuário de aplicação de bate-papo e sobre o desenvolvimento dos recursos dos principais modelos de aplicação de bate-papo do Flutter disponíveis no mercado. Certifique-se de conferi-los também.

As aplicações para dispositivos móveis vem se tornando cada vez mais populares. Felizmente, há muitas ferramentas de programação disponíveis para os desenvolvedores que querem criar essas aplicações. O Flutter é uma dessas ferramentas e vem se destacando nos últimos tempos.

O que é o Flutter?

O Flutter é um framework de interface de usuário para dispositivos móveis, gratuito e de código aberto, criado pelo Google e lançado em maio de 2017. Em poucas palavras, ele permite criar uma aplicação para dispositivos móveis nativa apenas com uma base de código. Isto significa que você pode usar uma linguagem de programação e uma base de código para criar duas aplicações diferentes (para iOS e Android).

O Flutter é composto de duas partes importantes:

• Um SDK (Software Development Kit): uma coleção de ferramentas que vão ajudá-lo a desenvolver suas aplicações. Ele inclui ferramentas para compilar seu código em código de máquina nativo (código para iOS e Android).
• Um framework (biblioteca de IU baseada em widgets): uma coleção de elementos reutilizáveis de IU (botões, entradas de texto, botões deslizantes, entre outros) que você pode personalizar para suas próprias necessidades.

Para desenvolver com Flutter, você usará uma linguagem de programação chamada Dart. A linguagem foi criada pelo Google em outubro de 2011, mas melhorou muito nesses últimos anos.

O Dart concentra-se no desenvolvimento de front-end. Você pode usá-lo para criar aplicações para dispositivos móveis e para a web.

Se você conhece um pouco de programação, o Dart é uma linguagem de programação de objetos tipada. Você pode comparar a sintaxe do Dart com a do JavaScript.

"O Flutter é o kit de ferramentas de IU do Google para construir belas aplicações nativamente compiladas para celular, web e desktop a partir de uma única base de código." – Google, flutter.dev

Por que você deve aprender o Flutter?

Selecionei algumas das razões pelas quais gosto do Flutter e por que quero usá-lo. Darei a vocês detalhes e meu feedback abaixo.

Simples de aprender e de usar

O Flutter é um framework moderno e você pode perceber isso! É muito mais simples criar aplicações para dispositivos móveis com ele. Se você tiver usado Java, Swift ou React Native, você notará como o Flutter é diferente.

Pessoalmente, nunca gostei do desenvolvimento de aplicações para dispositivos móveis até começar a usar o Flutter.

O que eu amo sobre o Flutter é o fato de que você pode criar uma aplicação nativa real sem tanto código.

Compilação rápida: máxima produtividade

Graças ao Flutter, você pode mudar seu código e ver os resultados em tempo real. É um processo chamado de recarregamento rápido (em inglês, hot reload). Leva pouco tempo depois de salvar para que a aplicação em si seja atualizada.

Modificações significativas forçam você a recarregar o aplicativo. No entanto, se você trabalha com design e, por exemplo, muda o tamanho de um elemento, isso é feito em tempo real!

Ideal para MVPs de startups

Se você quiser mostrar seu produto aos investidores o mais rápido possível, o Flutter é uma boa escolha.

Aqui estão minhas 4 principais razões para usá-lo em seu MVP (do inglês Minimum Viable Product – Produto Minimamente Viável, em português):

• É mais barato desenvolver uma aplicação para dispositivos móveis com o Flutter porque você não precisa criar e manter duas aplicações (uma para iOS e outra para Android).
• Um desenvolvedor é tudo o que você precisa para criar seu MVP.
• Tem bom desempenho – você não notará a diferença entre uma aplicação nativa e uma aplicação do Flutter.
• É bonito - você pode facilmente usar os widgets fornecidos pelo Flutter e personalizá-los para criar uma IU valiosa para seus clientes (você pode encontrar exemplos de aplicações feitas com o Flutter abaixo).

Boa documentação

É importante que a nova tecnologia tenha boa documentação. Nem sempre, no entanto, isso é o caso!

Você pode aprender muito com a documentação do Flutter. Tudo é muito detalhado com exemplos fáceis para casos de uso básico. Cada vez que tive um problema com um dos widgets no meu código, pude verificar a documentação e a resposta estava lá.

Uma comunidade em crescimento

O Flutter tem uma comunidade robusta e que está apenas começando!

Eu adoro compartilhar meus conhecimentos e conteúdos úteis sobre programação no meu site. Preciso saber que estou trabalhando em uma tecnologia cheia de potencial, com muitos financiadores.

Quando comecei a usar o Flutter, a primeira coisa que fiz foi procurar comunidades. Para minha surpresa, há um número considerável de lugares para se trocar informações sobre o Flutter.

Vou dar alguns exemplos de lugares que adoro verificar diariamente. Fique à vontade para me enviar pelo Twitter as suas sugestões.

• Flutter Awesome: uma lista fantástica, que seleciona as melhores bibliotecas e ferramentas do Flutter. Esse site publica diariamente conteúdo com muitos exemplos, templates de aplicação, conselhos e assim por diante.
• Awesome Flutter: um repositório do GitHub (ligado ao Flutter Awesome) com uma lista de artigos, vídeos, componentes, utilitários e outros.
• It’s all widgets!: uma lista aberta de aplicações construídas com o Flutter.
• Flutter Community: uma publicação do Medium, onde você pode encontrar artigos, tutoriais e muito mais.

Suporte para Android Studio e VS Code

O Flutter está disponível em diferentes IDEs. Os dois principais editores de código para desenvolver com esta tecnologia são o Android Studio (IntelliJ) e o VS Code.

O Android Studio é um software completo, com tudo já integrado. Você tem que baixar os plugins do Flutter e do Dart para começar.

O VS Code é uma ferramenta leve, onde tudo é configurável através dos plug-ins do Marketplace.

Eu uso o Android Studio porque não preciso configurar muitas coisas para trabalhar.

Você é livre para escolher seu IDE preferido!

Bônus

Freelance

Se você quiser começar a fazer algum trabalho como freelancer, é uma boa ideia usar o Flutter.

Acredito que esta tecnologia vai ser bastante comum. Isso significa que as pessoas vão procurar por desenvolvedores que saibam como utilizá-la.

A maior plataforma para freelancers da França, chamada Malt, publicou recentemente as tendências em tecnologia. O Flutter cresceu +303% nesta plataforma entre 2018 e 2019.

Conclusão

Bem, o que você achou? Vai começar a aprender a usar o Flutter nesse ano?

Espero que esta introdução tenha deixado você interessado e motivado. Sinta-se à vontade para compartilhar este artigo, se gostou.

Se você quiser mais conteúdo como este, você pode seguir o autor no Twitter, onde ele escreve sobre desenvolvimento para a web, autoaperfeiçoamento e sobre sua jornada como desenvolvedor full-stack!

Neste artigo, vamos conferir o padrão provider no Flutter. Alguns outros padrões, como a Arquitetura BLoC, usam o padrão provider internamente. Ele, no entanto, é muito fácil de aprender e possui muito menos código repetitivo.

Neste artigo, vamos usar o aplicativo padrão de Contador fornecido pelo Flutter e refatorá-lo para que use o padrão provider.

Se quiser saber o que a equipe do Flutter tem a dizer sobre o padrão provider, confira essa palestra de 2019 na sede do Google (vídeo em inglês).

Se quiser aprender mais sobre a arquitetura BLoC, confira aqui (texto em inglês).

Começando

Crie um projeto do Flutter e coloque nele o nome que quiser.

Primeiro, precisamos remover todos os comentários. Assim, teremos um código mais limpo para trabalhar:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @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(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Agora, adicionamos a dependência para o padrão provider no arquivo pubspec.yaml. Atualmente, a versão mais recente é a 4.1.2.

O arquivo pubspec.yaml ficará assim:

name: provider_pattern_explained
description: A new Flutter project.

publish_to: 'none' 

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.1.2

  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

O aplicativo padrão é basicamente um widget com monitoramento de estado, que é criado novamente toda vez que você clica em FloatingActionButton (que, por sua vez, chama setState()).

Agora, vamos convertê-lo em um widget sem monitoramento de estado.

Criando o Provider

Vamos criar nosso provider. Ele será a fonte da verdade do nosso aplicativo. É onde armazenaremos nosso state (estado) que, neste caso, é a contagem atual.

Crie uma classe chamada Counter e adicione a variável count:

import 'package:flutter/material.dart';

class Counter {
  var _count = 0;
}

Para convertê-la em uma classe provider, estenda ChangeNotifier, do pacote material.dart. Isso nos fornece o método notifyListeners() e notificará todas as funções ouvintes quando mudarmos um valor.

Depois, adicione um método para incrementar o contador:

import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  var _count = 0;
  void incrementCounter() {
    _count += 1;
  }
}

No fim desse método, chamaremos notifyListeners(). Isso acionará uma mudança em todo o aplicativo para qualquer widget que esteja ouvindo.

Esta é a beleza do padrão provider no Flutter – você não precisa se importar com despachar manualmente para streams.

Por fim, crie uma função getter para retornar o valor do contador. Vamos usá-la para mostrar o valor mais atual:

import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  var _count = 0;
  int get getCounter {
    return _count;
  }

  void incrementCounter() {
    _count += 1;
    notifyListeners();
  }
}

Ouvindo cliques no botão

Agora que temos o provider configurado, podemos continuar e usá-lo em nosso widget principal.

Primeiramente, vamos converter MyHomePage para um widget sem monitoramento de estado. Vamos ter que remover a chamada para a função setState(), pois ela está disponível apenas em um StatefulWidget (widget com monitoramento de estado):

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  int _counter = 0;
  final String title;
  MyHomePage({this.title});
  void _incrementCounter() {}
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Com isso feito, podemos usar o padrão provider no Flutter para indicar e obter o valor do contador. A cada clique no botão, precisamos incrementar o valor do contador em 1.

Então, no método _incrementCounter (que é chamado quando o botão é pressionado), adicione esta linha:

Provider.of<Counter>(context, listen: false).incrementCounter();

O que acontece aqui? Você pediu para o Flutter subir na árvore de widget e encontrar o primeiro lugar onde Counter é fornecido (mostrarei como fazer isso na próxima seção). É isso que Provider.of() faz.

Os genéricos (valores dentro dos <>) dizem ao Flutter qual tipo de provider procurar. Então, o Flutter sobe na árvore do widget até encontrar o valor fornecido. Se o valor não estiver fornecido em nenhum lugar, então uma exceção é criada.

Finalmente, quando você já tem o provider, pode chamar qualquer método a partir dele. Aqui, chamamos nosso método de incrementCounter.

Também precisamos de um contexto (em inglês, context). Então, aceitamos context como argumento e modificamos o método onPressed para que também passe context:

void _incrementCounter(BuildContext context) {
  Provider.of<Counter>(context, listen: false).incrementCounter();
}

Observação: indicamos listen como falso, pois não precisamos escutar nenhum valor aqui. Estamos apenas despachando uma ação que será executada.

Fornecendo o Provider

O padrão provider no Flutter procurará o último valor fornecido. O diagrama abaixo ajudará você a entender melhor.

Neste diagrama, o objeto A VERDE estará disponível para o resto dos elementos abaixo dele, que são B, C, D, E, e F.

Agora, suponha que queremos adicionar funcionalidade ao aplicativo e criamos outro provider, Z. Z precisa ser usado por E e F.

Onde é o melhor lugar para adicioná-lo?

Podemos adicioná-lo na raiz abaixo de A. Ficaria assim:

Esse método, porém, não é muito eficiente.

O Flutter passará por todos os widgets abaixo e, então, finalmente, subirá até a raiz. Se você possui árvores de widget muito longas – algo que você provavelmente terá em um aplicativo em produção – não é uma boa ideia colocar tudo na raiz.

Ao invés disso, podemos olhar para o denominador comum de E e F, que é C. Se colocamos Z abaixo de E e F, dará certo.

Se quisermos adicionar outro objeto X, requerido por E e F? Faremos a mesma coisa. Note, porém, como a árvore continua crescendo.

Há uma maneira melhor de gerenciar isso. Que tal se providenciarmos todos os objetos em um nível?

Isso é perfeito. Será a maneira de implementarmos nosso padrão provider no Flutter. Usaremos algo chamado MultiProvider, que nos deixa declarar diversos providers em um nível.

Deixaremos MultiProvider cercar o widget MaterialApp:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(
          value: Counter(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: "AndroidVille Provider Pattern"),
      ),
    );
  }
}

Com isso, fornecemos o provider para nossa árvore de widget e podemos usá-lo em qualquer lugar abaixo deste nível da árvore.

Há apenas mais uma coisa a fazer: precisamos atualizar o valor que é mostrado.

Atualizando o texto

Para atualizar o texto, obtenha o provider na função do widget MyHomePage. Vamos usar o getter que criamos para obter o valor mais recente.

Então, simplesmente adicione esse valor ao widget de texto abaixo.

Terminamos! Nosso arquivo main.dart ficará assim no final:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_pattern_explained/counter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(
          value: Counter(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: "AndroidVille Provider Pattern"),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({this.title});
  void _incrementCounter(BuildContext context) {
    Provider.of<Counter>(context, listen: false).incrementCounter();
  }

  @override
  Widget build(BuildContext context) {
    var counter = Provider.of<Counter>(context).getCounter;
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _incrementCounter(context),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Observação: não definimos listen:false nesse caso, pois queremos ficar sabendo de qualquer atualização no valor do contador.

Aqui está o código fonte no GitHub se você quiser ver:  https://github.com/Ayusch/Flutter-Provider-Pattern.

Peço que informe se tiver qualquer problema.

Boas-vindas à AndroidVille :)

A AndroidVille é uma comunidade de desenvolvedores para dispositivos móveis onde compartilhamos conhecimento relacionado com o desenvolvimento para Android, desenvolvimento em Flutter, tutoriais sobre React Native, Java, Kotlin e muito mais.

Clique neste link para juntar-se ao SLACK do AndroidVille. É totalmente gratuito!

Se você gostou deste artigo, fique à vontade para compartilhá-lo no Facebook ou LinkedIn. Você pode seguir o autor no LinkedIn, no Twitter, no Quora e no Medium, onde ele responde perguntas relacionadas ao desenvolvimento para dispositivos móveis, Android e Flutter.

O Flutter rapidamente se tornou um dos frameworks mais populares para o desenvolvimento de aplicativos móveis multiplataforma. Ele ajuda os desenvolvedores a criar UIs nativas com suporte para diferentes tamanhos de dispositivos, densidades de pixels e orientações, criando uma bela e perfeita UI/UX.

Neste tutorial, nós aprenderemos como adicionar notificações push (tipo de mensagem exibida automaticamente na tela do seu celular) em um aplicativo Flutter usando o serviço Firebase Cloud Messaging (em português Mensagens na Nuvem do Firebase). Este tutorial lidará com as configurações apenas para a plataforma Android.

Primeiro, o que são notificações push?

Notificações push são um tipo de mensagens pop-up (em português mensagens que "estouram" na tela) que alertam os usuários de aplicativos sobre o que está acontecendo no aplicativo. Elas também são uma forma importante de ampliar o engajamento dos usuários em seu aplicativo.

Por exemplo, digamos que um usuário esquece do aplicativo depois de instalado. Então, você pode usar notificações push como um mecanismo para recuperar e manter o interesse dos usuários. As notificações push também podem ajudar a direcionar tráfego para o aplicativo.

O Firebase Cloud Messaging é um serviço oferecido pela Firebase, que permite que você envie notificações para seus usuários. Você pode definir várias configurações para enviar diferentes notificações para públicos diferentes com base em tempo e rotina.

Por causa de todos esses benefícios, nós vamos usar esse serviço para enviar notificações para nosso aplicativo Flutter.

Passo 1: criar um projeto do Flutter

Primeiro, vamos criar um projeto para o Flutter. Para isso, devemos ter o Flutter SDK instalado em nosso sistema. Você pode encontrar etapas simples para a instalação do Flutter na documentação oficial.

Depois de instalar o Flutter com sucesso, você pode simplesmente executar o seguinte comando no diretório desejado para configurar um projeto Flutter completo:

flutter create pushNotification

Depois de configurar o projeto, navegue dentro do diretório do projeto. Execute o seguinte comando no terminal para executar o projeto em um emulador disponível ou em um dispositivo real:

flutter run

Após uma compilação bem-sucedida, você obterá o seguinte resultado na tela do emulador:

Passo 2: integrar a configuração do Firebase ao Flutter

Nesta etapa, vamos integrar os serviços do Firebase ao nosso projeto Flutter. Mas primeiro, precisamos criar um projeto do Firebase. As diretrizes de configuração também são fornecidas na documentação oficial do Firebase para Flutter.

Para criar um projeto do Firebase, precisamos fazer login no Firebase e navegar até o console. Lá, podemos simplesmente clicar em 'Adicionar um projeto' (Add a project, em inglês) para iniciar nosso projeto.

Em seguida, uma janela aparecerá pedindo para inserir o nome do projeto. Aqui, mantive o nome do projeto como FlutterPushNotification, conforme mostrado na captura de tela abaixo:

Podemos continuar para a próxima etapa quando o projeto for criado. Após a configuração do projeto, obteremos um console de projeto, conforme mostrado na captura de tela abaixo:

Aqui, vamos configurar o Firebase para a plataforma Android. Portanto, precisamos clicar no ícone do Android exibido na captura de tela acima. Isso nos levará à interface para registrar o Firebase com nosso projeto de aplicativo Flutter.

Passo 3: registrar o Firebase no seu aplicativo Android

Como o processo de registro é específico da plataforma, vamos registrar nosso aplicativo para a plataforma Android. Após clicar no ícone do Android, seremos direcionados para uma interface solicitando o nome do pacote Android (Android package name em inglês).

Como o processo de registro é específico da plataforma, vamos registrar nosso aplicativo para a plataforma Android. Após clicar no ícone do Android, seremos direcionados para uma interface solicitando o nome do pacote Android (ou Android package name, se a interface estiver em inglês).

Para adicionar o nome do pacote do nosso projeto Flutter, precisamos localizá-lo primeiro. O nome do pacote estará disponível no arquivo ./android/app/build.gradle do seu projeto Flutter. Você verá algo assim:

com.example.pushNotification

Só precisamos copiá-lo e colá-lo no campo de entrada do nome do pacote Android, conforme mostrado na captura de tela abaixo:

Depois disso, podemos simplesmente clicar no botão 'Registrar aplicativo' ('Register app', em inglês). Isso nos levará à interface onde podemos obter o arquivo google-services.json que vinculará nosso aplicativo Flutter aos serviços do Firebase Google.

Precisamos baixar o arquivo e movê-lo para o diretório ./android/app do nosso projeto Flutter. As instruções também são mostradas na captura de tela abaixo:

Passo 4: adicionar configurações do Firebase a arquivos nativos em seu projeto Flutter

Agora, para habilitar os serviços do Firebase em nosso aplicativo Android, precisamos adicionar o plug-in do google-services aos nossos arquivos Gradle.

Primeiro, em nosso arquivo Gradle de nível raiz (nível de projeto) (android/build.gradle), precisamos adicionar regras para incluir o plug-in do Gradle aos serviços do Google. Precisamos verificar se as seguintes configurações estão disponíveis ou não:

buildscript {
  repositories {
    // Verifique se você tem a seguinte linha (caso contrário, adicione-a):
    google()  // Repositório Google Maven
  }
  dependencies {
    ...
    // Adicione esta linha
    classpath 'com.google.gms:google-services:4.3.4'
  }
}

allprojects {
  ...
  repositories {
    // Verifique se você tem a seguinte linha (caso contrário, adicione-a):
    google()  // Repositório Google Maven
    ...
  }
}

Caso contrário, precisamos adicionar as configurações conforme mostrado no trecho de código acima.

Agora, em nosso arquivo Gradle do módulo (nível do aplicativo) (android/app/build.gradle), precisamos aplicar o plug-in do Gradle do Google Services.

Para isso, precisamos adicionar o trecho de código destacado no trecho de código a seguir ao arquivo ./android/app/build.gradle do nosso projeto:

// Adicione a seguinte linha:
**apply plugin: 'com.google.gms.google-services'**  // Plug-in do Google Services

android {
  // ...
}

Agora, precisamos executar o seguinte comando para que algumas configurações automáticas possam ser feitas:

flutter packages get

Com isso, integramos com sucesso as configurações do Firebase ao nosso projeto Flutter.

Passo 5: integrar o Firebase Messaging ao Flutter

Primeiro, precisamos adicionar a dependência firebase-messaging ao arquivo ./android/app/build.gardle. No arquivo, precisamos adicionar as seguintes dependências:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.google.firebase:firebase-messaging:20.1.0'
}

Em seguida, precisamos adicionar uma action (ação) e uma category (categoria) como intent-filter (filtro de intenção) no arquivo ./android/app/src/main/AndroidManifest.xml:

<intent-filter>
    <action android:name="FLUTTER_NOTIFICATION_CLICK" />
    <category android:name="android.intent.category.DEFAULT" />
</intent-filter>

Agora, precisamos criar um arquivo Java chamado Application.java no caminho /android/app/src/main/java/<app-organization-path>.

Em seguida, precisamos adicionar o código do seguinte trecho de código dentro dele:

package io.flutter.plugins.pushNotification;

import io.flutter.app.FlutterApplication;
import io.flutter.plugin.common.PluginRegistry;
import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback;
import io.flutter.plugins.GeneratedPluginRegistrant;
import io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin;
import io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService;

public class Application extends FlutterApplication implements PluginRegistrantCallback {
    @Override
    public void onCreate() {
        super.onCreate();
        FlutterFirebaseMessagingService.setPluginRegistrant(this);
    }

    @Override
    public void registerWith(PluginRegistry registry) {
        FirebaseMessagingPlugin.registerWith(registry.registrarFor("io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin"));
    }
}

Agora, precisamos atribuir essa atividade Application à tag application do arquivo AndroidManifest.xml, conforme mostrado no snippet de código abaixo:

<application
        android:name=".Application"

Isso conclui nossa configuração do plug-in de mensagens do Firebase no código nativo do Android. Agora, vamos passar para o projeto Flutter.

Passo 6: instalar o pacote Firebase Messaging

Aqui, vamos usar o pacote [firebase_messaging], que você pode encontrar aqui. Para isso, precisamos adicionar o plug-in à opção de dependência do arquivo pubspec.yaml.

Precisamos adicionar a seguinte linha de código à opção de dependências:

firebase_messaging: ^7.0.3

Passo 7: implementar uma tela de IU simples

Agora, dentro da classe de widget com estado MyHomePage do arquivo main.dart, precisamos inicializar a instância FirebaseMessaging e algumas constantes, conforme mostrado no trecho de código abaixo:

String messageTitle = "Empty";
String notificationAlert = "alert";

FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

A variável messageTitle receberá o título da mensagem de notificação e notificationAlert receberá a ação que foi concluída assim que a notificação aparecer.

Agora, precisamos aplicar essas variáveis ​​à função de construção dentro do corpo do widget Scaffold, conforme mostrado no trecho de código abaixo:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              notificationAlert,
            ),
            Text(
              messageTitle,
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }

Em seguida, precisamos executar o aplicativo Flutter executando o seguinte comando no terminal do projeto:

flutter run

Vamos obter o resultado que você vê na imagem abaixo:

Por enquanto, o título da notificação está vazio e o alerta também está conforme definido. Precisamos atribuir um valor adequado a eles assim que recebermos a mensagem de notificação.

Portanto, precisamos configurar o código para receber a notificação e usar a mensagem de notificação para exibi-la na tela.

Para isso, precisamos adicionar o código do seguinte trecho de código na função initiState:

@override
  void initState() {
    // TODO: implementar initState
    super.initState();

    _firebaseMessaging.configure(
      onMessage: (message) async{
        setState(() {
          messageTitle = message["notification"]["title"];
          notificationAlert = "New Notification Alert";
        });

      },
      onResume: (message) async{
        setState(() {
          messageTitle = message["data"]["title"];
          notificationAlert = "Application opened from Notification";
        });

      },
    );
  }

Aqui, usamos o método configure fornecido pela instância _firebaseMessaging que, por sua vez, fornece os retornos de chamada onMessage e onResume. Esses retornos de chamada fornecem a notificação message como parâmetro. A resposta message manterá o objeto de notificação como um objeto de mapa.

A função onMessage é acionada quando a notificação é recebida enquanto estamos executando o aplicativo. A função onResume é acionada quando recebemos o alerta de notificação na barra de notificação do dispositivo e abre o aplicativo por meio da própria notificação push. Nesse caso, o aplicativo pode ser executado em segundo plano ou não ser executado.

Agora, estamos todos equipados com o aplicativo Flutter. Só precisamos configurar uma mensagem no Firebase Cloud Messaging e enviá-la para o dispositivo.

Passo 8: criar uma Mensagem a partir do console do Firebase Cloud Messaging

Primeiro, precisamos voltar ao console do Cloud Messaging no site do Firebase, conforme mostrado na imagem abaixo:

Aqui, podemos ver a opção 'Enviar sua primeira mensagem' (Send your first message, em inglês) na janela, pois não configuramos nenhuma mensagem antes. Precisamos clicar nele, o que nos levará à seguinte janela:

Aqui, podemos inserir o título, texto, imagem e nome da notificação. O título que definimos aqui será fornecido como título no objeto message nos retornos de chamada que definimos antes no projeto Flutter.

Depois de definir os campos obrigatórios, podemos clicar em 'Avançar' (Next, em inglês), o que nos levará à seguinte janela:

Aqui, precisamos fornecer nosso aplicativo de destino e clicar em 'Avançar' (Next).

Para Agendamento (Scheduling, em inglês) podemos manter a opção padrão:

Em seguida, aparecerá a janela Conversão (Conversion, em inglês), que também podemos manter como padrão, e clique no botão 'Avançar' (Next).

Por fim, aparecerá uma janela onde precisamos inserir os dados personalizados, na qual podemos definir o title e o click_action. Este evento de ação de clique é acionado sempre que clicamos na notificação que aparece na barra de notificação do dispositivo.

Depois de clicar na mensagem de notificação da barra de notificação, o aplicativo será aberto e o retorno de chamada onResume será acionado, definindo o title conforme atribuído nos dados personalizados na captura de tela abaixo:

Agora, estamos prontos para enviar a primeira mensagem de notificação ao dispositivo. Primeiro, vamos tentar com o dispositivo rodando no emulador.

Ao clicar no botão 'Revisar' (Review, em inglês) e enviar a mensagem, obteremos o seguinte resultado no console do Cloud Messaging, bem como no emulador:

Aqui, podemos ver que o título e o alerta de notificação na tela do emulador são atualizados assim que enviamos uma mensagem do console. Podemos ter certeza de que o retorno de chamada onMessage foi acionado no aplicativo após receber a mensagem de notificação.

Agora vamos tentar com o app rodando em segundo plano. Uma vez que enviamos a mensagem para o console, nós iremos receber o resultado conforme mostrado na demonstração abaixo:

Aqui, assim que enviamos a mensagem, recebemos uma notificação push na barra de notificações do dispositivo. Então, à medida que arrastamos a barra de notificação, podemos ver o título e o texto da mensagem de notificação. E, clicando na mensagem de notificação, podemos iniciar o aplicativo e exibir os dados personalizados na tela. Isso garante que nosso retorno de chamada onResume foi acionado.

Terminamos! Adicionamos com sucesso um recurso de notificação por push em nosso aplicativo Flutter usando o Firebase Cloud Messaging.

Conclusão

As notificações push são essenciais em qualquer aplicativo. Elas podem ser usadas ​​para alertar os usuários sobre o que está acontecendo no aplicativo e podem ajudar a atrair o interesse dos usuários de volta ao aplicativo.

Além disso, o Firebase Cloud Messaging torna o envio de alertas de notificação muito mais simples e fácil.

Neste tutorial, começamos configurando o aplicativo Firebase e, em seguida, passamos para a configuração e implementação da configuração de mensagens do Firebase no aplicativo Flutter. Por fim, conseguimos enviar alertas de notificação para o aplicativo usando o Firebase Cloud Messaging.

O tutorial foi feito para ser simples e fácil de entender. Espero que isso ajude você a adicionar notificações push aos seus aplicativos Flutter. Quer ver alguns exemplos de como você pode implementar tudo isso? Confira esses poderosos modelos do Flutter.