Forem: Joabe Ramone

Firebase auth keytool Opção inválida

Joabe Ramone — Fri, 27 Aug 2021 01:02:19 +0000

Introdução

Fala clan, tudo bem?

Quero mostrar rapidinho como resolvi um problema daquele comando inválido para criar as chaves SHA do Projeto do Firebase.

Quando eu estava rodando esse comando

keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%.android\debug.keystore

Apresentava este erro dizendo que a opção keytool era inválida.

Isso acontece porque eu não tinha a variavel de ambiente, então você tem que criar essa variavel que é basicamente o caminho de onde está o keytool.

Como resolver

E ele fica dento da pasta Java, que geralmente é esse caminho:

C:\Program Files\Java\jdk1.8.0_291\bin

Copie esse caminho, vá em Editar as variváveis de ambiente do sistema, clique em Variáveis de ambiente > path (2 cliques) > novo > cole o caminho > ok.

Agora você tem que substituir essa variável %USERPROFILE% pelo seu caminho de usuário. Então vai ser basicamente esse:

keytool -list -v -alias androiddebugkey -keystore C:\Users\jorge.android\debug.keystore

Espero que tenha ajudado, valeu!

Referências

https://developers.google.com/android/guides/client-auth
https://www.youtube.com/watch?v=bi_mMQfo90s
https://www.youtube.com/watch?v=1k-gITZA9CI&t=352s

Onboarding UI Screen em Flutter

Joabe Ramone — Sat, 19 Jun 2021 03:41:05 +0000

🚀Quer aprender FLUTTER do Zero ao Profissional? 👉https://go.hotmart.com/O70564427D

1 Introdução

Eai clan, tudo certo?

Hoje venho falar daquelas telas de abertura que sempre aparece quando acabamos de instalar um App, eu sempre confundia ela com o Splash Screen, mas tem bastante diferença. O Splash Screen acaba sendo a porta de entrada e o Onboarding é a recepção que irá orientar o usuário do App.

É como na vida real. Imagine que você entra em uma loja para comprar um produto e não sabe por onde começar. Geralmente chega algum vendedor para te orientar onde fica os produtos na loja. No digital é a mesma coisa!

Então vou apresentar algumas boas práticas e como pode estar implementando em Flutter com e sem biblioteca.

Não esqueça de deixar sua curtida, me ajuda muito a sempre produzir conteúdo. Boa leitura!

2 Boas praticas UI

Onboarding é uma experiência de desembalagem virtual que ajuda os usuários a começar a usar um aplicativo, é um conceito de embarcar ou até mesmo de se introduzir no contexto.

Então temos três tipos de Onboarding para usar: a auto-seleção, início rápido e benefícios para o usuário principal.

2.1 Modelo de auto-seleção

O modelo Self-Select(auto-seleção) permite que os usuários personalizem sua experiência de primeira execução, fazendo uma pequena série de escolhas.

As opções devem:

Ser significativo e perceptível
Fornecer novas informações
Ser breve

Significativo e perceptível

Nesse modelo tem opções que vão ter um impacto significativo e perceptível na experiência do usuário. Isso ensina aos usuários como interagir com sua interface.

Seja breve

Limite as opções a uma tela ou faça com que várias telas pareçam estar conectadas umas às outras.

Cada tela deve ter menos de dez opções.

Ao projetar a integração, pense em como o processo de integração se conecta à experiência de primeira execução do usuário. Após a integração, os usuários devem chegar a uma tela que facilite a ação sobre o que acabaram de aprender.

2.2 Modelo de início rápido

Neste modelo os usuários acessam diretamente a interface sem nenhum modelo de integração mostrado (além de login e configuração).

O modelo de início rápido:

Permite que os usuários iniciem rapidamente com a funcionalidade central do aplicativo
Frequentemente prioriza a primeira ação-chave
Também pode fornecer uma maneira opcional de aprender mais ou pedir ajuda

Dê aos usuários algo para fazer

Em vez de deixar os usuários em uma tela em branco, sua interface deve encorajar a interação.

Priorize a primeira ação-chave

Escolha a ação mais intimamente ligada ao engajamento nos primeiros sete dias. Como alternativa, introduza a funcionalidade principal como dicas para ações que o usuário não tentou.

Oferecer ajuda

Se parecer que o usuário não tem certeza de como usar o aplicativo no final da experiência média de primeira execução (90% do caminho até a primeira sessão), exiba um SnackBar de IU oferecendo a oportunidade de aprender como usar o aplicativo.

2.3 Modelo de benefícios para o usuário principal

O modelo de integração Principais benefícios para o usuário contém um breve carrossel de reprodução automática, ou storyboard animado, que destaca os principais benefícios de usar um aplicativo.

Escolhendo os benefícios certos

O modelo de Principais benefícios para o usuário deve demonstrar até três benefícios principais de usar o aplicativo. Esses benefícios devem posicionar o aplicativo como relevante e pessoal durante um momento importante, em vez de fornecer instruções ou descrever recursos.

Ao identificar quais benefícios apresentar, considere:

Problemas que o aplicativo resolve
Os principais benefícios que o aplicativo cria
Os “recursos de escova de dentes” do aplicativo (ou seja, um recurso que você usaria uma ou duas vezes por dia)

Opções de integração

Carrossel de rotação automática
No máximo três ilustrações devem girar automaticamente a cada dois a três segundos e exibir a navegação de paginação. Avance automaticamente a primeira tela mais rapidamente para que fique claro que não é uma única tela. O recurso de avanço automático deve ser desativado se o usuário tocar no carrossel.

Exiba um botão “Começar” em toda a animação e percorra-a continuamente até que a ação “Começar” seja tocada.

A tela deve ser habilitada para deslizar, seja para frente ou para trás.

VIDEO DE EXEMPLO

O botão e a navegação de paginação são fixos. A tipografia é dinâmica e em um campo separado da ilustração, mas ao mesmo nível.

Melhores Práticas

Manter a continuidade visual

Mantenha a continuidade visual em todos os personagens, ambientes, estilo, tipografia e cores dos botões.

Simplificar

Simplifique o visual para o essencial necessário para transmitir um conceito.

Não seja literal de IU

Não mostre a IU do aplicativo se os usuários ainda não a experimentaram. Mostre o benefício do usuário primeiro.

Você pode exibir informações sobre a IU específica em um contexto posterior.

Design onboarding que se conecta a uma experiência de primeira execução. A IU vista após a integração deve tornar mais fácil para os usuários agirem de acordo com o que acabaram de aprender.

Projeto

O design dos Principais benefícios para o usuário deve complementar a redação. Se houver uma ideia que pode ser melhor expressa por meio de palavras, use texto em vez de imagens.

Esses layouts são projetados para permitir uma ilustração com proporção de 1: 1 para caber consistentemente em telas em todas as plataformas. Certifique-se de que o plano de fundo e a cor do texto atendam às taxas de contraste mínimas para acessibilidade.

Retrato de celular e tablet

Coloque a cópia e as interações alinhadas ao centro abaixo da ilustração.

Área de Trabalho

Coloque ilustração, cópia e interações em um cartão centralizado. Exiba os botões “Próximo” e “Anterior” ao lado deste cartão e os indicadores de paginação abaixo dele.

3 Implementação

Vamos criar um exemplo comum de onboarding, onde é apresentado quais os beneficios do aplicativo e tela de apresentação, para um restaurante entregar seus pedidos. Quando o usuário passar por essa sessão, ela não será mais apresentada para ele ao inicializar o aplicativo.

3.1 UI

Eu fiz o mockup pensando nos principios do modelo de benefícios para o usuário principal, então ele tem uma figura centralizada com um título e uma breve descrição. E as ações para passar o slide ou pular a introdução.

3.2 Importar bicliotecas

No arquivo pubspec adicione a biblioteca shared_preferences para guardar a variavel que vai nos dizer se tem que mostrar a tela de onboarding, e importe as imagens que será utilizada.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6
flutter:
  uses-material-design: true
  assets:
    - assets/

3.2 Criar Interfaces

Pra gente controlar o fluxo de tela, se deve ou não aparecer a sessão de onboarding. Vamos fazer uma simples verificação para saber se vamos chamar a página inicial ou a tela de onboarding.

Eu criei alguns widgets para facilitar montar a interface, então dê uma olhada na pasta widgets do projeto no GitHub.

Então o primeiro passo é:

1 - Criar a função que vai fazer verificação se o usuário já passou pela onboarding, na classe Main;


_initAppVerificaSeEstaAtivo() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    final ativo = prefs.getBool(_ativoVar) ?? false;

    setState(() {
      _ativo = ativo;
    });
  }

2 - Criar as telas HomeScreen e OnboardingScreen e adicionar a essa verificação na Main;


_ativo ? HomeScreen() : OnboardingScreen(),

3 - Na tela OnboardingScreen vamos criar as variaveis;


final PageController _pageController = PageController(initialPage: 0);
int _currentPage = 0;

4 - criar a função responsável por setar nossa variável para ativar ou desativar o onboarding;

  _setEstado() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool ativo = prefs.getBool('ativo') ?? false;

    if (!ativo) {
      await prefs.setBool('ativo', true);
    }
  }

5 - depois a função de dar next da PageView;

  void proximoCard() {
    _pageController.nextPage(
        duration: Duration(seconds: 1), curve: Curves.easeIn);
  }

6 - depois a função que vai redirecionar para tela inicial e chamar a função _setEstado().


  void irParaPaginaInicial() {
    Navigator.pushReplacement(
        context, MaterialPageRoute(builder: (context) => HomeScreen()));

    _setEstado();
  }

7 - a estrutura base da tela vai ser essa;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFFFF7CD),
      body: SafeArea(
        child: Stack(children: [

          //Adicionar os elementos aqui

        ]),
      ),
    );
  }

8 - as figuras;

PageView(
            controller: _pageController,
            onPageChanged: (int page) {
              setState(() {
                _currentPage = page;
              });
            },
            physics: ClampingScrollPhysics(),
            children: [
              CustomSlider(
                imagem: 'assets/onboarding-image-1.png',
                titulo: 'Sua Comida favorita',
                texto:
                    'Almoço, janta, cafézinho da manhã ou da tarde. A qual quer horário para atendimento.',
                acaoBotao: 'CONTINUAR',
              ),
              CustomSlider(
                imagem: 'assets/onboarding-image-2.png',
                titulo: 'Você recebe no conforto de onde estiver',
                texto:
                    'Seu pedido é atendido pelo restaurante mais próximo, que leva tudo pra você.',
                acaoBotao: 'CONTINUAR',
              ),
              CustomSlider(
                imagem: 'assets/onboarding-image-3.png',
                titulo: 'Melhores Chef’s',
                texto:
                    'Chefs, dos quais a maioria vem de restaurantes com estrelas Michelin ou são vencedores de competições de prestígio e títulos.',
                acaoBotao: 'CONTINUAR',
              ),
            ],
          ),

9 - o botão de continuar muda quando para quero conhecer quando for a última figura e muda a ação do botão também;


Padding(
            padding: const EdgeInsets.only(bottom: 100.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CustomButton(
                  titulo: _currentPage == 2 ? 'QUERO CONHECER' : 'CONTINUAR',
                  irParaPaginaInicial:
                      _currentPage == 2 ? irParaPaginaInicial : proximoCard,
                ),
              ],
            ),
          ),

10 - adicionar o botão de pular a introdução;


Padding(
            padding: const EdgeInsets.only(bottom: 50.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CustomLink(
                  titulo: 'Pular introdução',
                  irParaPaginaInicial: irParaPaginaInicial,
                )
              ],
            ),
          ),

11 - adicinar a paginação que vai indicar em qual das figuras está;


Padding(
            padding: const EdgeInsets.only(bottom: 170.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CustomPaginator(
                  page: _currentPage,
                )
              ],
            ),
          ),

🚀Quer aprender FLUTTER do Zero ao Profissional? 👉https://go.hotmart.com/O70564427D

💥Livros que eu indico
Boas Práticas em Ux Design: https://amzn.to/3FQ5SFP
O design do dia a dia: https://amzn.to/3M5bEW5
Design Centrado no Usuário: https://amzn.to/3N8CEV2

Código limpo: https://amzn.to/3FIXCaw
Arquitetura Limpa: https://amzn.to/3FDrXHa

Iniciando com Flutter Framework: https://amzn.to/3L4I4yR
Aprofundando em Flutter: https://amzn.to/39c62uT

Referências

Projeto no GitHub: https://github.com/JoabeRamone/onboarding-app

https://bashooka.com/inspiration/mobile-app-onboarding-ui-examples/

https://icons8.com/articles/ux-design-onboarding-mobile-app/

https://www.youtube.com/watch?v=YEJPg2jwzI8&ab_channel=TheFlutterWay

https://material.io/design/communication/onboarding.html#usage

https://dribbble.com/shots/14479371-Onboarding-Screen-Exploration

https://www.youtube.com/watch?v=CQlA2p--oEg&ab_channel=JohannesMilke

Traduzir seu App em Flutter

Joabe Ramone — Sat, 13 Mar 2021 18:13:46 +0000

1 Introdução

Hey clan, all right?
Eai clan, tudo certo?

Hoje eu venho falar sobre tradução, como deixar seu app flutter em vários idiomas. Afinal, queremos deixar nosso app mais acessível possível né? Haha'

E pra isso vamos falar de flutter localizations.

2 Localizações em Flutter

Por padrão, o Flutter fornece apenas localizações em inglês dos Estados Unidos. Para adicionar suporte a outros idiomas seu app deve especificar propriedades adicionais no MaterialApp (ou CupertinoApp) e incluir um pacote chamado flutter_localizations.

Então, o primeiro passo é adicionar o pacote como uma dependência ao seu arquivo pubspec.yaml do seu projeto.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # Coloque essa linha
    sdk: flutter         # e essa

Em seguida execute pub get packages, importe a biblioteca flutter_localizations e coloque localizationsDelegates e supportedLocales no MaterialApp.

import 'package:flutter_localizations/flutter_localizations.dart';
// TODO: descomente a linha abaixo após codegen
// import 'package:flutter_gen/gen_l10n/app_localizations.dart';

// ...

MaterialApp(
 localizationsDelegates: [
   // TODO: descomente a linha abaixo após codegen
   // AppLocalizations.delegate,
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
   GlobalCupertinoLocalizations.delegate,
 ],
 supportedLocales: [
    const Locale('en', ''), // Inglês
    const Locale('pt', ''), // Português
    const Locale.fromSubtags(languageCode: 'zh'), // Chinês *Veja os locais avançados abaixo *
    // ... outras localidades que o aplicativo suporta
  ],
  // ...
)

Depois de introduzir o pacote flutter_localizations e adicionar o código acima, você pode escolher a ordem de tradução. No caso do código a cima o inglês está em primeiro lugar e isso quer dizer que quando for outro idioma que não tenha na lista localizationsDelegates o app vai deixar em inglês. Os widgets devem ser adaptados às mensagens localizadas, juntamente com o layout correto da esquerda para a direita e da direita para a esquerda.

Os elementos da lista localizationsDelegates são fábricas que produzem coleções de valores localizados.

GlobalMaterialLocalizations.delegate fornece strings localizadas e outros valores para a biblioteca de componentes de materiais.

GlobalWidgetsLocalizations.delegate define a direção do texto padrão, da esquerda para a direita ou da direita para a esquerda, para a biblioteca de widgets.

3 Traduzir os textos do seu App

Depois que adicionou o pacote flutter_localizations vamos seguir as seguintes etapas:

1 Adicionar o pacote intl no pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0    # Adicionar essa linha

Esse pacote fornece recursos de internacionalização e localização, incluindo tradução de mensagens, plurais e gêneros, formatação e análise de data/número e texto bidirecional.

Dica: sempre verifique se existe atualização quando adicionar um pacote. (pub.dev)

2 Habilite o sinalizador de geração no pubspec.yaml.

# A seção a seguir é específica para Flutter.
flutter:
  generate: true    # Adicione essa linha

3 Adicione um novo arquivo yaml ao diretório raiz do seu projeto chamado de l10n.yaml com o seguinte conteúdo:

arb-dir: lib/l10n 
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

Este arquivo configura a ferramenta de localização, isso significa que na:

Primeira linha: é caminho do arquivo de entrada que vai estar em ${PROJETO_FLUTTER}/lib/l10n,mas não criamos essa pasta ainda.
Segunda linha: é a tradução base dos textos no formato JSON que vamos colocar, no caso está o arquivo app_en.arb que é o de inglês.

Esse arquivo é o principal, então você tem que colocar tudo em inglês primeiro para criar um chave em cada texto.
Terceira linha: é o arquivo onde as localizações são geradas.

4 Crie uma pasta com o nome l10n dentro da pasta lib e também crie um arquivo com o nome app_en.arb, dentro desse arquivo adicione esse conteúdo:

{
  "helloWorld": "Hello World!"
}

5 Agora, crie outro arquivo com o nome de app_pt.arb no mesmo diretório e traduz somente o valor de helloWorld.

{
  "helloWorld": "Óla Mundo!"
}

Dica: as chaves tem que ser iguais em todos os arquivos.

6 Agora você tem que executar seu projeto para que aconteça o codegen e depois disso você consegue ver os arquivos gerados no caminho: ${FLUTTER_PROJECT}/.dart_tool/flutter_gen/gen_l10n.

7 Já podemos remover aquele código comentado na nossa main dentro do MaterialApp e atualizar nosso projeto que já irá funcionar.

import 'package:flutter_localizations/flutter_localizations.dart';
// import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // remova este comentario

// ...

MaterialApp(
  localizationsDelegates: [
    // AppLocalizations.delegate, // remova este comentario
    GlobalMaterialLocalizations.delegate,
    // ...
);

// Use AppLocalizations em qualquer lugar em seu aplicativo.
// Aqui, a mensagem traduzida é usada em um widget de texto
Widget build(BuildContext context) {
  // ...
  return Text(AppLocalizations.of(context).helloWorld);
}

Este código Text(AppLocalizations.of(context).helloWorld) gera um widget de texto que exibe “Hello World!”.

Caso você mudar o idioma do seu dispositivo para qual quer outro, neste exemplo de código vai ficar em inglês.

Dica: Nos arquivos .arb, a chave de cada entrada é usada como o nome do método do getter, enquanto o valor dessa entrada contém a mensagem localizada.

Você pode adicionar o plugin do *intl também.

4 Conclusão

Muito simples né?

Agora você pode colocar seu app em vários idiomas e fazer sucesso no mundo todo. :D

Espero que tenha te ajudado em algo, deixe seu like e compartilhe para os amigos. Vamos sempre estar contribuindo para nossa comunidade dev!

Valeu, é nóis!

5 Referencias:

Documentação do Flutter

Pacote intl

Splash Screen UI em Flutter

Joabe Ramone — Sat, 27 Feb 2021 03:20:55 +0000

1. Introdução

Eai clan, tudo certo?

Hoje venho falar sobre um conteúdo que muita das vezes passa despercebido mas que faz muito diferença, por que ele é a porta de entrada para os usuários dos nossos aplicativos. Eu fiz várias pesquisas sobre as boas práticas seguindo os fundamentos de design.

O termo Splash Screen traduzido significa tela inicial e surgiu da necessidade dos aplicativos carregarem todas as informações antes que o usuário pudesse acessa-lo.

Quase sempre há algumas pequenas tarefas que o seu aplicativo precisa fazer antes que o usuário possa começar a tocar nos botões e navegar nas telas. Talvez seu aplicativo precise carregar alguns dados básicos para carregar a primeira tela ou o usuário precise ser autenticado novamente porque não usa o aplicativo há algum tempo. Seja o que for, a tela inicial é o lugar perfeito para fazer isso (bem ... na maioria das vezes).

Carregamento dos dados

2. Boas práticas do uso

Existem algumas funcionalidades chave que seu aplicativo deve ter, embora você possa não ver essas funcionalidades em ação elas estão escondidas sob a superfície na maioria das telas iniciais que você vê no seu celular. Qualquer usuário que usa seu aplicativo regularmente ficará rapidamente frustrado se tiver que sentar e esperar que um aplicativo seja aberto por mais de alguns segundos.

Ninguém gosta de esperar né?! Imagina o app demorar abrir pra você falar com seu crush, TENSO NÉ haha

2.1 Três Segundos é o suficiente

Em primeiro lugar, a tela inicial deve ser rápida. Nunca mais do que 2 ou 3 segundos. Leve em consideração que se o seu aplicativo estiver sendo usado regularmente, você deve reduzir isso para 1 segundo ou até mesmo tentar remover a necessidade de uma tela inicial.

Imagine ter que esperar a tela de abertura do Whatsapp de 3 segundos toda vez que quiser enviar uma mensagem para um amigo. Nesses casos, você pode pular o Splash Screen completamente e ir direto para o conteúdo carregando tudo o que você precisa da tela principal e exibindo quaisquer erros ou problemas depois de carregados.

Então certifique-se de que se ela quebrar a regra dos 3 segundos invente uma nova estratégia.

2.2 Porta de entrada

Provavelmente você já viu que hotéis e grandes empresas gastam muito dinheiro em suas entradas grandiosas e impressionantes, isso é porque no momento em que você passa por aquela porta você sabe que está em um lugar de qualidade. O mesmo se aplica a aplicativos, no momento em que um usuário toca em seu ícone na tela inicial eles são transportados para o seu mundo.

Entrada do Motel Egytus

Então mantenha o design simples , ousado e visual. Naqueles preciosos 3 segundos, o usuário não tem tempo para digerir várias informações, então concentre-se em apresentar o aplicativo pela primeira vez de uma forma visualmente atraente.

As telas iniciais mais simples mostrarão um fundo sólido ou gradiente com o ícone do aplicativo e o título desaparecendo a vista. Dê um passo adiante e anime o ícone do seu aplicativo para dar uma sensação real de qualidade mas apenas lembre-se de manter a animação focada e simples e definitivamente não quebre a regra dos 3 segundos.

O Uber manteve a simplicidade, mas com uma animação muito boa para mergulhar você na experiência do aplicativo.

Outro exemplo de simples e ousado.

Sobre animações, não leve isso muito a sério. Alguns designers têm o hábito de exagerar e criar uma animação que conta uma grande história. O que é ótimo se o ícone do seu aplicativo tem uma história para contar. Mas lembre-se, além da primeira vez que o usuário vê isso, não fará diferença a história que você contar. Portanto, mantenha-o simples e se você realmente quiser enlouquecer peça aos seus desenvolvedores para programá-lo de forma que só mostre a animação complexa na primeira vez que o usuário abrir o aplicativo, com uma alternativa mais simples e leve para as sessões subsequentes.

A abertura pode ser muito longo para cada sessão.

E quando tiver orçamento, tempo e habilidades suficientes, você pode ir mais longe integrando sua tela inicial perfeitamente ao resto de sua experiência de usuário. A estratégia geral é projetar o plano de fundo de sua tela inicial de modo que possa se mesclar facilmente com a primeira tela de seu aplicativo.

Shazam integra seu logotipo em sua interface principal perfeitamente.

Não é uma tarefa fácil, por que esse tipo de transição só funciona com determinados aplicativos e principalmente aqueles em que o logotipo principal aparece na tela ou a tela principal do aplicativo é uma única tela com conteúdo relativamente mínimo nele.

2.3 Se o carregamento violar a regra dos 3 segundos

Claro que pode acontecer de demorar mais que 3 segundos para carregar, isso não quer dizer que seu aplicativo tenha que carregar muitos dados, mas mesmo com dados mínimos, o dispositivo pode ter uma conectividade com a Internet muito lenta e até mesmo uma única imagem pode levar mais do que alguns segundos para carregar. Nesse caso, você vai precisar usar um indicador de carregamento pode ser uma pequena roda giratória ou barra de progresso para manter seus usuários informados de que o aplicativo está fazendo algo.

Um truque incrível é mostrar o indicador de carregamento apenas após o término da animação inicial. Dessa forma, o usuário normalmente nunca o verá, mas se vir, saberá que o aplicativo ainda está funcionando e terá que esperar pacientemente até que seja concluído. Alguns aplicativos repetem sua animação inicial - mas isso não informa ao usuário que o aplicativo precisa de mais tempo, e então eles ficarão com a sensação de que você está apenas perdendo seu tempo com uma animação repetida. Portanto, faça o que fizer, mostre o indicador de carregamento assim que passar 3 segundos.

Para conteúdo que geralmente é diferente toda vez que um usuário entra em um aplicativo, por exemplo um aplicativo bancário, significa que o splash sempre será "lento", porque toda vez que você abrir o aplicativo ele vai precisar carregar novos dados. Nesses casos, é melhor você direcionar seus usuários para o conteúdo e carregar bem diante de seus olhos para que o tempo de carregamento seja dividido em duas partes. É um equilíbrio complicado de acertar, então certifique-se de fazer testes em seus aplicativos com uma conexão lenta para ter uma ideia de quanto tempo dura quando as pessoas estão usando seu aplicativo.

NuBank mostrando as duas etapas de inicialização.

2.4 Erro ao carregar o app

Embora a maioria dos erros em um aplicativo possa ser tratada com um pop-up, apresentar um pop-up na tela inicial será desagradável e frustrante para o usuário. A melhor estratégia que você pode ter aqui é isolar apenas os erros críticos. Se uma imagem está demorando muito para carregar você não precisa atrasar o usuário, você pode ignorar este erro e tentar recarregá-la na próxima tela. Mas se a conexão com a Internet estiver desligada e você não conseguir autenticar seu usuário, você realmente não pode permitir que ele passe por essa tela. Portanto, primeiro certifique-se de apresentar um erro apenas se o problema for crítico o suficiente para que o usuário não deva continuar usando o aplicativo.

Imagine um aplicativo que logo após o término da animação inicial apresenta um pop-up feio para dizer que você não tem conexão com a internet, nem elegante nem sofisticado. Em vez disso, por que não integrar o erro em sua tela inicial. Quase sempre optamos por uma mensagem de erro na própria tela inicial junto com um botão de atualização e a maioria dos casos o problema será uma simples falta de internet e portanto um botão de atualização ou atualização automática quando a conexão retorna se torna a melhor opção. Ao manter o erro integrado nesta tela você mantém uma aparência profissional no aplicativo enquanto também avisa claramente o usuário para tocar no botão de atualização.

NuBanck mostra erro de conexão diretamente na tela inicial para evitar pop-ups

2.5 Para concluir

Então lembre-se:

Mantenha a simplicidade com uma animação curta e elegante para apresentar seu aplicativo
Lembre-se sempre da regra dos 3 segundos e se passar mais que isso mostre um indicador de carregamento.
Carregue os dados mínimos absolutos do servidor, mas certifique-se de ter todas as informações necessárias para mostrar a próxima tela imediatamente.
Integre erros em sua tela inicial para evitar popups feios.

3. Como fazer em Flutter

O que é maravilhoso em Flutter é que ele já tem uma Splash Screen nativo, provavelmente se você já rodou algum projeto do Flutter deve ter visto aquela tela branca ou preta aparecendo antes de abrir seu aplicativo. Então, é apenas modificar um arquivo colocando sua logo e a cor primária do seu app.

Basicamente sim!

Cada aplicativo Android requer tempo de inicialização enquanto o sistema operacional configura o processo do aplicativo. O Android fornece o conceito de uma Splash Screen para ser exibido um Drawable durante a inicialização do aplicativo.

3.1 O que é Drawable

Quando você precisa exibir imagens estáticas no seu app, é possível usar a classe Drawable e as subclasses relacionadas para desenhar formas e imagens. Um Drawable é uma abstração geral para algo que pode ser desenhado.

É possível adicionar gráficos ao app referenciando um arquivo de imagem dos recursos do projeto. Os tipos de arquivo compatíveis são PNG (preferencial), JPG (aceitável) e GIF (não recomendado). Ícones do app, logotipos e outros elementos gráficos, como aqueles usados em jogos, são adequados para essa técnica.

Para usar um recurso de imagem, adicione seu arquivo ao diretório res/drawable/ do projeto. Quando você estiver no projeto, poderá referenciar o recurso de imagem do seu código ou layout XML. Por exemplo, consulte my_image.png como my_image.

3.2 Modificar Splash Screen

Vamos seguir os seguintes passos:

Vá até android/app/src/main/res/drawable,
abra o arquivo launch_background.xml,
tire o comentário das linhas 6 e 11,
abra a pasta mipmap
copie o nome da imagem que estiver lá dentro,
e coloque no android:src o nome da pasta e da imagem.

Pronto!

Já temos um resultado como este:

Caso não aparecer nada veja se no seu projeto tem outra pasta com o nome drawable pode ter outra como por exemplo drawable-v21.

Isso acontece por causa da sua necessidade, para imagens, você pode projetá-las para a resolução mais alta e colocá-las na pasta xxxhdpi. O Android reduzirá automaticamente a resolução para outros dispositivos. Além disso, você pode colocar drawables diferentes para resoluções diferentes. Mas eles devem ter o mesmo nome. Como por exemplo as pastas mipmap.

Então a pasta drawable-v21 vai ter o mesmo conteúdo que a drawable, se preferir.

3.3 Adicionar cores de fundo

Você pode mudar o fundo da Splash Screen de acordo com a cor principal do seu aplicativo, para colocar as cores do seu gosto é da seguinte maneira:

Vá até a pasta android/app/src/main/res/values
crie um arquivo chamado colors.xml,
adicione as cores em HEX e coloque um nome para cada cor.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#F44336</color>
    <color name="white">#FFFFFF</color>
    <color name="yellow">#FFFF00</color>
    <color name="blueGrey">#37474F</color>
    <color name="NightBlue">#233446</color>
    <color name="grey">#212121</color>
    <color name="dark">#000000</color>
</resources>

Agora você pode usar essa cor no seu drawable da seguinte forma:

<item android:drawable="@color/red" />

3.3 Tema escuro

Por padrão o Flutter cria uma configuração que deixa o fundo do nosso aplicativo de acordo com sistema operacional. Por exemplo, se você estiver com o tema escuro ativo quando você inicializar o aplicativo ele vai mostrar um fundo preto. E caso o tema escuro estiver Desativado ele mostra um fundo branco.

Mas precisamos criar um arquivo para configurar nossa Splash Screen em tema escuro.

Pra gente conseguir ver a diferença na prática vamos adicionar duas imagens de um icone do android.

Então:

Vá até android/app/src/main/res
crie uma pasta chamada drawable-night
coloque a imagem do android branco,
crie um arquivo launch_background.xml

Drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white" />
     <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/android" />
    </item>
</layer-list>

Arquivo: values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

Drawable Night

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/dark" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/android" />
    </item>
</layer-list>

Arquivo: values-night/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

5 Conclusão

Uma tela de carregamento pode parecer algo simples, mas como vimos tem muito fundamento. Espero que este post possa ter te ajudado de alguma forma, não esqueça de dar like para me ajudar a continuar postando.

Valeu clan!

6 Referências

https://pub.dev/packages/flutter_native_splash/install
https://www.youtube.com/watch?v=8ME8Czqc-Oc&ab_channel=JohannesMilke

https://uxdesign.cc/building-the-perfect-splash-screen-46e080395f06
https://dribbble.com/tags/splash_screen

https://flutter.dev/docs/development/ui/advanced/splash-screen

https://developer.android.com/guide/topics/graphics/drawables

https://medium.com/flutter-community/flutter-2019-real-splash-screens-tutorial-16078660c7a1

https://luizmarcus.com/android/construindo-uma-splash-screen-em-flutter/

https://stackoverflow.com/questions/62627690/how-can-i-add-a-basic-splash-screen-with-an-image-and-some-text-to-an-existing-f

https://stackoverflow.com/questions/58363128/drawable-v21-vs-v24-vs-custom-folders-for-hdpi-mdpi-xhdpi-etc-in-which-folde

https://stackoverflow.com/questions/3963978/android-xml-files-why-do-predefined-colors-not-work-for-me

https://stackoverflow.com/questions/43879103/adding-a-splash-screen-to-flutter-apps

https://medium.com/flutter-community/splash-screens-for-dark-and-light-mode-in-flutter-eb85f1aa025

https://material.io/design/communication/launch-screen.html#placeholder-ui

https://developer.android.com/topic/performance/vitals/launch-time#themed

https://dribbble.com/shots/4291317-Taxi-Splash-Screen

Como criar um Wizard UI em Flutter?

Joabe Ramone — Sat, 13 Feb 2021 21:47:23 +0000

1 Introdução

Eai clan, tudo certo?

Hoje eu vim aqui falar sobre um conteúdo bem legal que faz muita diferença quando precisamos coletas muitas informações.

Sabemos como preencher formulários é bem chato e trabalhoso, e uma das maneiras de tornar mais dinâmico esta tarefa é aplicando uma metodologia de Design.

1.1 O que é Wizard ?

Wizard é um padrão de design de interface com o usuário que permite que usuários atinjam um determinado objetivo por meio de uma série de etapas. O usuário insere dados em cada visualização e prossegue para a próxima etapa até a conclusão.

Os Wizard's são frequentemente usados para fluxos de integração, em que o usuário precisa inserir um conjunto de informações para começar a utilizar um aplicativo.

Wizards são mais usados:

Para uma série de fluxos de entrada de dados confiáveis e ramificados.
Quando os usuários precisam cumprir uma meta que depende de tarefas complexas e conclusão de subtarefas.

2 Determinar os requisitos e conduzir pesquisas

Por exemplo vamos fazer um aplicativo simples de finanças onde o usuário vai definir suas metas, mas para começar a utilizar o aplicativo ele precisa inserir dados básicos.

A intenção de usar Wizard é para que os usuários possam ver todas as suas transações categorizadas e contabilizadas para que consigam definir metas financeiras. Com base nessa percepção, determinamos algumas tarefas gerais de inicialização.

Tarefas gerais de inicialização do usuário para o aplicativo de finanças pessoais: adicionar informações pessoais para criar uma conta, conectar bancos, definir metas financeiras.

A partir daí, determinamos os requisitos de informação com base nessas tarefas gerais.

Requisitos de informação para o aplicativo de finanças pessoais.

E comece a pensar em agrupamentos lógicos.

Agrupamentos de requisitos de informações para o aplicativo de finanças pessoais.

3 Crie um fluxo de tarefa

As necessidades de informação são categorizadas e agrupadas em uma sequência de tarefas e subtarefas. O agrupamento de ações relacionadas e as etapas de ordenação reduzem sequencialmente a carga cognitiva, reduzindo a destreza da entrada de dados e fornecendo um caminho claro para a conclusão.

Exemplo de um fluxo de tarefa de ramificação.

Frequentemente, o fluxo do usuário se ramifica em caminhos diferentes dependendo das entradas anteriores. Um usuário pode receber uma pergunta que determina uma nova necessidade ou sequência de informações. Essas informações são apresentadas em outra visão ou na visão atual.

O fluxo de integração de finanças pessoais pode incorporar diferentes fluxos para inserir as informações bancárias de um usuário.

Grupos de tarefas de on-boarding de finanças pessoais representados em um stepper.

Então vamos separar em 3 etapas o processo para o usuário criar suas metas financeiras.

Dados pessoais
Conectar com o Banco
Definir metas

4 Criando Wizard em Flutter

Na nossa tela principal vamos criar nossos cards que vai ser nossas três etapas do fluxo de cadastro, então nesta parte vamos colocar as ações onde cada card vai para um formulário diferente.

Tela do Card:

Variavel

bool isDadosPessoal = false;

Card

        Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 30),
                    child: isDadosPessoal
                        ? Icon(
                            Icons.check_circle,
                            color: Colors.green,
                            size: 45,
                          )
                        : Icon(
                            Icons.circle,
                            size: 45,
                            color: Colors.grey,
                          ),
                  ),
                  FlatButton(
                    minWidth: 250,
                    height: 50,
                    child: Text(
                      'Dados do pessoais',
                      style: TextStyle(fontSize: 18),
                    ),
                    onPressed: () async {
                      bool flag = await Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => PrimeiraPagina(),
                          ));
                      if (flag) {
                        setState(() {
                          isDadosPessoal = flag;
                        });
                      } else {
                        setState(() {
                          isDadosPessoal = false;
                        });
                      }
                    },
                    shape: RoundedRectangleBorder(
                        side: BorderSide(color: Colors.grey[600], width: 2, style: BorderStyle.solid), borderRadius: BorderRadius.circular(0)),
                  ),
                ],
              )

Tela do Formulário:

Corpo da tela

Row(
              children: [
                Text(
                  'Dados Pessoais',
                  textAlign: TextAlign.start,
                  style: TextStyle(fontWeight: FontWeight.w700, fontSize: 20),
                ),
              ],
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Nome Completo',
              ),
            ),

Botão de Salvar

FlatButton(
              minWidth: 200,
              color: Colors.blue,
              height: 42,
              onPressed: () {
                Navigator.pop(context, true);
              },
              child: Text(
                'Salvar',
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
              shape: RoundedRectangleBorder(
                  side: BorderSide(color: Colors.transparent, width: 2, style: BorderStyle.solid), borderRadius: BorderRadius.circular(20)),
            )

Agora é só replicar os cards conforme a necessidade, para continuar o nosso exemplo do aplicativo de finanças. Vamos Fazer mais dois card's para completar o fluxo que vai ter este resultado.

Conclusão

Leva horas de pesquisa e atenção para criar um conteúdo como este artigo. Por favor, dê like para me motivar a continuar escrevendo.

É gratuito para você, mas significa muito para mim. Valeu galera!

Referências

How to Design a Form Wizard
The Wizard of user experience
Exemplo completo no GitHub
Joabe Ramone YouTube

Como fazer campo de assinatura ou desenho em Flutter.

Joabe Ramone — Mon, 08 Feb 2021 04:28:46 +0000

Introdução

Eai, clan. Tudo certo com vocês?

Hoje quero explicar como que eu fiz pra criar um campo de assinatura manual utilizando Flutter.

Estamos acostumados a utilizar assinatura digital para assinar documentos, mas existem alguns casos que ainda utilizam este tipo de assinatura. Mas a intenção deste post é para mostrar como você pode estar criando um campo onde pode ser rabiscado. Haha'

Então vamos partir do principio que temos que fazer uma assinatura em um determinado campo.

Separei em dois modos

Eu acho muito importante nós utilizarmos algo que já tenha pronto, para não ficar reinventando a roda. Então eu separei em duas partes de como fazer este campo.

A primeira maneira é utilizar um plugin Signature que esta disponível no pub.dev. É bem rápido e simples de utilizar.

Segunda é montar esse campo utilizando CustomPainter do Flutter, é um pouco mais trabalhoso criar só que você consegue adicionar coisas mais especificas.

Utilizando Plugin Signature

Primeiro vai instanciar um controlador com as suas configurações de desenho. Por exemplo:

final SignatureController _controller = SignatureController(
    penStrokeWidth: 4,
    penColor: Colors.black,
    exportBackgroundColor: Colors.transparent,
  );

Neste controlador coloquei uma espessura de 4, cor preta e um fundo transparente.

Próximo passa é passar este controlador para o Signature onde vamos assinar ou desenhar.

Signature(
       controller: widget._controller,
       height: 600,
       backgroundColor: Colors.transparent,
      )

Depois de assinar você pode pegar os bytes em png do controlador e transformar isso em uma imagem.

Image.memory(_controller.toPngBytes())

Utilizando o Widget CustomPainter

Eu separei cada parte em uma classe que eu criei, você pode conferir o código completo no repositório do Git Hub. Link no final do artigo.

Paint e Offset

Paint é uma descrição do estilo a ser usado ao desenhar em um Canvas, e Canvas é uma interface para registrar operações gráficas.

Então vamos criar uma classe responsável por isso.

class TouchPoints {
  Paint paint;
  Offset points;

  TouchPoints({this.points, this.paint});
}

Criar campo para capturar o toque

Criar as variáveis para adicionar os pontos.

  GlobalKey globalKey = GlobalKey();

  List<TouchPoints> points = [];
  StrokeCap strokeType = StrokeCap.round;
  double strokeWidth = 3.0;
  Color selectedColor = Colors.black;
  double opacity = 1.0;

Criar campo para capturar evento do toque.

GestureDetector(
        onPanUpdate: (details) {
          setState(() {
            RenderBox renderBox = context.findRenderObject();
            points.add(_criarTouchPoints(renderBox, details));
          });
        },
        onPanStart: (details) {
          setState(() {
            RenderBox renderBox = context.findRenderObject();
            points.add(_criarTouchPoints(renderBox, details));
          });
        },
        onPanEnd: (details) {
          setState(() {
            points.add(null);
          });
        },
        child: RepaintBoundary(
          key: globalKey,
          child: CustomPaint(
            size: Size.infinite,
            painter: MyPainter(pointsList: points),
          ),
        ),
      ),

Função responsável por adicionar os pontos.

TouchPoints _criarTouchPoints(renderBox, details) {
    return TouchPoints(
        points: renderBox.globalToLocal(details.globalPosition),
        paint: Paint()
          ..strokeCap = strokeType
          ..isAntiAlias = true
          ..color = selectedColor.withOpacity(opacity)
          ..strokeWidth = strokeWidth);
  }

Adicionar os pontos no Canvas

Classe usada no CustomPainter para desenhar.

@override
  void paint(Canvas canvas, Size size) {
    for (int i = 0; i < pointsList.length - 1; i++) {
      if (pointsList[i] != null && pointsList[i + 1] != null) {
        // Desenhar linha quando dois pontos consecutivos estiverem disponíveis
        canvas.drawLine(pointsList[i].points, pointsList[i + 1].points, pointsList[i].paint);
      } else if (pointsList[i] != null && pointsList[i + 1] == null) {
        offsetPoints.clear();
        offsetPoints.add(pointsList[i].points);
        offsetPoints.add(Offset(pointsList[i].points.dx + 0.1, pointsList[i].points.dy + 0.1));

        //Desenhe pontos quando dois pontos não estiverem próximos um do outro
        canvas.drawPoints(ui.PointMode.points, offsetPoints, pointsList[i].paint);
      }
    }
  }

Transformar em uma imagem

Precisamos pegar todos os pontos rastreados no nosso Canvas e transformalo em bytes.

 RenderRepaintBoundary boundary = globalKey.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();

Depois passar esses bytes para este Widget para criar uma imagem.

Image.memory(pngBytes)

Conclusão

Aprender a fundo como as coisas funcionar é muito importante, pode esclarecer vários pontos que passa despercebido.

Espero ter ajudado, valeu!

GitHub

Referências:
Plugin Signature
Flutter Paint Class
Flutter Canvas Class

Flutter Offset Class
Video do canal Flutter sobre CustomPaint

Como criar, visualizar e compartilhar PDF em Flutter?!

Joabe Ramone — Sat, 10 Oct 2020 05:04:30 +0000

Por que resolvi escrever este post

Eai galera DEV, tudo certo?

Vim aqui publicar mais um post pra poder estar contribuindo para nossa comunidade dev e adquirindo conhecimento. Esse é meu segundo post sobre Flutter, sempre que eu aprender alguma coisa nova eu quero compartilhar com vocês.

Dessa vez eu tive que implementar um gerador de PDF no meu aplicativo, e como sempre, eu não achei muita coisa em pt-br. Na real eu não achei nada sobre o tema, então resolvi fazer um código de exemplo que subi no GitHub e um post para explicar certinho como fazer.

Bibliotecas utilizadas

Você vai precisar importar essas bibliotecas no seu pubspec.yaml

Essas versões sempre são atualizadas, por isso vou deixar os links delas no final do post. Assim você pode instalar a versão mais recente.

Criar um PDF

Para criar um PDF em flutter eu utilizei a biblioteca chamada pdf.

A seguir a função responsável por criar o arquivo em PDF. Nessa função eu passei os atributos separados por parametros, mas seria interessante ser uma lista ou até mesmo um objeto.
O código funciona basicamente assim, eu instanciei um Document e depois adicionei uma pagina nele. E criei uma tabela com meus atributos.

Depois eu tive que pegar o diretório raiz da aplicação, criei um nome pro meu arquivo temporário e concatenei ele com o diretório raiz. Criado esse caminho, eu preciso salvar o pdf nessa caminho que criei para conseguir acessá-lo a seguir no próximo tópico.



  _creatPdf(contex, name, lastName, year) async {
    final pdfLib.Document pdf = pdfLib.Document(deflate: zlib.encode);

    pdf.addPage(pdfLib.MultiPage(
        build: (context) => [
              pdfLib.Table.fromTextArray(data: <List<String>>[
                <String>['Nome', 'Sobrenome', 'Idade'],
                [name, lastName, year]
              ])
            ]));

    final String dir = (await getApplicationDocumentsDirectory()).path;

    final String path = '$dir/pdfExample.pdf';
    final File file = File(path);
    file.writeAsBytesSync(pdf.save());
  }

Visualizar um PDF

Para estar visualizando um PDF eu utilizei a biblioteca advance_pdf_viewer.

Aquele caminho que a gente criou no tópico anterior, vamos estar utilizando para abrir nosso PDF.

No initState vamos chamar a função responsável por buscar nosso arquivo e atribuir a nossa variavel _doc.



 @override
  void initState() {
    super.initState();
    _initPdf();
  }

  _initPdf() async {
    setState(() {
      _loading = true;
    });
    final doc = await PDFDocument.fromAsset(widget.path);
    setState(() {
      _doc = doc;
      _loading = false;
    });
  }

Agora temos o arquivo para estar passando pro widget PDFViewer, que ele já vai fazer todo o trabalho de abrir e mostrar o arquivo no corpo do seu Scaffold.



  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: _loading
            ? Center(
                child: CircularProgressIndicator(),
              )
            : PDFViewer(document: _doc));
  }

Compartilhar PDF

A biblioteca utilizada foi a share_extend, que basicamente você vai executar a função share, passar o caminho e o tipo do arquivo.
Eu chamei essa função no icone de compartilhamento dentro do meu appBar, é somente você colocá-lo no seu Scaffold.



AppBar(
          title: Text('Flutter PDF'),
          actions: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: IconButton(
                  icon: Icon(
                    Icons.share,
                    color: Colors.white,
                  ),
                  iconSize: 30,
                  onPressed: () {
                    ShareExtend.share(widget.path, "file",
                        sharePanelTitle: "Enviar PDF", subject: "example-pdf");
                  }),
            )
          ],
        ),

Mas espera aí....

Isso vai dar um erro! E porque?

Por que você tem que dar permissão para abrir esse arquivo.

No seu arquivo: AndroidManifest.xml coloque essas permissões:



<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Prontinho, tai o resultado!!!

Conclusão

Espero que esse post tenha te ajudado, eu consegui aprender bastante coisa nessa pesquisa que fiz. Vou deixar alguns links que foram de grande ajuda para mim.

Ah, se quiser dar alguma dica de como fazer melhor pode ficar a vontade a deixar nos comentários. E se você curtiu também!

Será um grande prazer ter seu feedback!

Valeu!!!

Links úteis

Código completo no GitHub: Joabe Ramone
Video sobre como baixar e compartilhar arquivo
Video de como criar um PDF

pub.dev

pdf
flutter_pdf_viewer
share_extend

Como usar Snackbar em Flutter?!

Joabe Ramone — Mon, 28 Sep 2020 19:05:14 +0000

Por que resolvi escrever este post

Eai galera DEV, tudo certo?

Vim aqui publicar mais um post pra poder estar contribuindo para nossa comunidade dev e adquirindo conhecimento.

Nessa semana eu tive que fazer um Snackbar para o meu app de TCC e eu não sabia como poderia ser feito. Na verdade eu não sabia nem o nome do widget, então eu fui pesquisando por “barrinha de alerta mobile” até que encontrei o nome que era utilizado. Depois disso eu fui até a documentação do framework e aprendi como ele funciona, também pesquisei no Design Material suas boas práticas de uso. Vale muito a pena dedicar seu tempo para ler, os links estão no final do post.

Não achei muita coisa em português e para mim não foi algo tão simples de utilizar, mas depois que eu percorri por vários posts, vídeos e documentação eu consegui entender. Então resolvi juntar tudo em um lugar o que eu aprendi.

Separei alguns pontos que considero mais fundamentais e importantes na hora de programar.

Entenda seu uso

O Snackbar é utilizado para informar ao usuário um processo que foi executado ou irá ser executado. Ele tem que aparecer temporariamente na parte inferior da tela para que não atrapalhe o uso do aplicativo.

Ele tem basicamente três princípios:

Informativo: Fornece atualização do processo
Temporário: Ele aparece temporariamente e desaparece por conta própria
Contextual: É colocado na área mais adequada da interface.

Anatomia

Etiqueta de texto
Recipiente
Ação (opcional)

Comportamento

O Snackbar aparece por tempo determinado e depois é fechado sozinho, mas cuidado ao realizar muitas chamadas. Ele tem que aparecer um de cada vez, não deixa fazer uma pilha de Snackbar.

Não altere o comportamento dos elementos da tela para mostrar seu Snackbar, isso pode ser uma péssima experiência para o usuário.

Colocação

O Snackbar deve ficar na na parte inferior da interface do aplicativo, mas tem que ter cuidado com o lugar. Ele não pode cobrir a barra de navegação.

Snackbar que abrange toda a largura eu diria que é o mais importante a ter cuidado para o uso, pois até mesmo na documentação do Flutter eles mostram a explicação do snackbar desta maneira.

Então isso quer dizer que não podemos usar esse modo que abrange toda a largura da interface?

Não!

Pode ser utilizado, mas temos que tomar muito cuidado ao utilizá-lo. Como o exemplo anterior é bem retratado, ele pode cobrir barra de navegação.

Uma boa prática de uso de um snackbar.

Mão na massa!

Para utilizar o snackbar é bem simples, basta chamar a função showSnackBar passando o snackbar por parâmetro.

Desta maneira:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Code Sample for Scaffold.of.',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: MyScaffoldBody(),
        appBar: AppBar(title: Text('Scaffold.of Example')),
      ),
      color: Colors.white,
    );
  }
}

class MyScaffoldBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('SHOW A SNACKBAR'),
        onPressed: () {
          Scaffold.of(context).showSnackBar(
            SnackBar(
              content: Text('Have a snack!'),
            ),
          );
        },
      ),
    );
  }
}

Mas como na vida nem tudo são rosas, você tem que ficar ligado que o ShowSnackbar é filho do Scaffold. E se você não usar um BuildContext diferente do pai do Scaffold pode dar ruim.

Snackbar Global

A maneira anterior de chamar o snackbar é para uma tela atual somente, isso quer dizer que se você fizer uma mudança de página não irá aparece-lo. Mas tem uma maneira de deixar ele global.

Passo 1

Colocar um Scaffold dentro do builder do seu MaterialApp.

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     builder: (context, child) {
       return Scaffold(
         key: GlobalScaffold.instance.scafoldKey,
         body: child,
       );
     },
     initialRoute: '/',
     routes: {
       '/': (_) => MyHomePage(title: 'Flutter Demo snackbar global'),
       '/second': (_) => SecondPage(title: 'Segunda página')
     },
   );
 }
}

Passo 2

Criar uma classe para fazer criar um Scaffold global.

class GlobalScaffold {
 static final GlobalScaffold instance = GlobalScaffold();

 final scafoldKey = GlobalKey<ScaffoldState>();

 void showSnackbar(SnackBar snackBar) {
   scafoldKey.currentState.showSnackBar(snackBar);
 }
}

Passo 3

Criar a função responsável para invocar o snackbar.

void onClickSnackbarGlobal() {
 final snackbar = SnackBar(
     behavior: SnackBarBehavior.floating,
     elevation: 150.0,
     content: Text("Eu sou um Snackbar Global!"));
 GlobalScaffold.instance.showSnackbar(snackbar);
}

Passa 4

Por último é somente chamar a função no seu widget

@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(
     title: Text(widget.title),
   ),
   body: ListView(
     padding: EdgeInsets.all(20),
     children: [
       RaisedButton(
           child: Text('Ir para segunda página'),
           onPressed: () {
             Navigator.pushNamed(context, "/second");
           }),
       RaisedButton(
         child: Text('Mostrar Sanackbar Global'),
         onPressed: () => onClickSnackbarGlobal(),
       )
     ],
   ),
 );
}

Resultado:

Conclusão

Espero que tenha ajudado, qualquer dúvida ou sugestão pode comentar que será de grande ajuda. Valeu!

Links úteis:
Material Design
Documentação do Flutter
Video do canal Flutter explicando o snackbar
Aula do canal Flutterando
Post no stackoverflow

Code Smells, não deixa para depois.

Joabe Ramone — Mon, 24 Aug 2020 17:56:36 +0000

Quero abordar um tópico que é na maioria das vezes, esquecido por nós programadores. Passa tão despercebido no nosso dia a dia que futuramente podem causar problema mais profundos. Na maioria das vezes, queremos entregar a tarefa no prazo estimado e nem prestamos atenção que nosso código pode estar com algo estranho, aquele cheirinho de “não tem problema deixar isso ai”. E assim o código vai passando de mão em mão até que a coisa fica grande. E são problemas tão simples que com 2 ou 3 minutos você pode resolver.

Quero abordar sobre “Code Smells” pois recentemente corrigi vários códigos antigos em um projeto que faço parte da empresa onde trabalho. Eles estavam com cheiro ruim faz tempo, e com isso, aprendi algumas boas práticas a serem usadas.

Espero que esse post seja um alerta e que possa agregar algo no seu trabalho ou aprendizado.

Vale reforçar que estou começando a publicar recentemente e meu propósito é poder ajudar a comunidade DEV e gerar conteúdo em português. Qual quer crítica ou sugestão podem deixar nos comentários que será de grande ajuda, Valeu!

Bom, vamos ao que interessa. Eu separei dois assuntos para ser bem breve. Primeiro vamos falar de :

Variáveis não devem ser sombreadas

Substituir ou obscurecer uma variável declarada em um escopo externo pode impactar fortemente a legibilidade e, portanto, a manutenção de um trecho de código.

Provavelmente você já deve ter visto ou até mesmo feito um código que você recebia uma variavel por parametro, mas tinha o mesmo nome de outra variavel na mesma classe ou espoco.

var y;
var x;
function soma(x, y) {
    return x + y;
}

Acabei percebendo que isso é comum nos códigos, pelo fato de estar dando o mesmo nome daquela que já foi declarada no escopo, podendo estar garantindo mais facilidade para identifica-lo. Ou não, isso pode ser um grande problema para outra pessoa ao ler o código.
Essa prática, pode levar as pessoas a introduzirem bugs no código. Porque pensam que estão usando uma variável, mas na verdade estão usando outra.
Pode parecer besta, mas para um código complexo e que não foi você quem o fez. Pode ser que não .

O segundo assunto é um pouco mais difícil de acontecer com frequência, ou não.

Seções de código não devem ser comentadas

"Os programadores não devem comentar o código, pois isso incha os programas e reduz a legibilidade."

Sabemos que os comentários podem ser utilizados para identificar ou explicar algo que está acontecendo no código, por mais que seja uma má prática, muitas vezes usamos. Mas os comentários começam a se tornar um problema quando comentamos seções de código, isso torna o complexo e difícil de entender. Sendo que procuramos fazer o código mais prático possível e aplicando boas práticas para melhorar a leitura das pessoas e não das máquinas.
O código não utilizado deve ser excluído e pode ser recuperado do histórico de controle de origem, se necessário.

Considerações finais

Por hora é isso pessoal, quero poder fazer outros post’s abortando sobre “Code Smells” pois acho que é de grande importância. Existe muito mais prática a ser estudada, assim que eu for descobrindo e aprendendo quero estar gerando conteúdo para publicar aqui.

Para mais informações acesse:

https://wiki.sei.cmu.edu/confluence/display/c/DCL01-C.+Do+not+reuse+variable+names+in+subscopes

https://wiki.sei.cmu.edu/confluence/display/java/DCL51-J.+Do+not+shadow+or+obscure+identifiers+in+subscopes

Como personalizar uma Tag Fixa usando kendo multiselect e AngularJS.

Joabe Ramone — Tue, 30 Jun 2020 19:28:28 +0000

Resolvi fazer esse post por 3 motivos:

Não achei bastante conteúdo em português.
Quero ajudar a comunidade DEV.
Aprender a fazer publicação.

Eu tinha uma tarefa para ser feita na empresa que eu trabalho, onde precisava fazer um Multi Select com uma Tag fixa. Contendo o nome do primeiro item selecionado e mais a quantidade de itens selecionados.

Só que o problema era que a versão do Kendo era antiga e não tinha muitos recursos, então procurei algumas soluções para fazer esse Multi Select.

  <select id="idCombo"
          kendo-multi-select
          k-ng-model="valoresSelecionados"
          k-options="kendoOptions">
  </select>

Para controlar o nome fixo no input, eu precisei colocar como atributo no Options do Kendo, ou seja, primeiramente o campo tagMode deve ser 'single'. Depois eu precisei fazer um template pra ficar do jeito que queria, aparecendo o nome no campo. Exemplo do atributo options passado pro kendo, pode variar de acordo da estrutura do projeto.

options = {
            dataTextField: 'nome', //campo que vai aparecer na combo
            autoClose: true, //fechar toda vez que selecionar 
            tagMode: 'single', //Deixa uma tag fixa
            tagTemplate: '<span> {{ nome }} + {{ valoresSelecionados.length }} </span>', 
        };

Para fazer com que o nome do campo ficasse dinâmico, eu criei um observador $watch do AngularJS. Então toda vez que o meu array $scope.valoresSelecionados tivesse alguma modificação é executado um função anônima que coloca o primeiro nome no $scope. Saiba mais sobre isso nesse link. https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

$scope.$watch('valoresSelecionados', function () {
                if ($scope.valoresSelecionados.length > 0) {
                    $scope.nome = $scope.valoresSelecionados[0].nome);
            });

Espero ter ajudado em algo, esse foi meu primeiro post aqui no DEV e pretendo postar mais sugestões.

Qual quer duvida ou sugestão pode comentar que vou ficar feliz!

Vlw!