DEV Community: Henrique

Navegação com Flutter

Henrique — Fri, 05 Feb 2021 13:56:13 +0000

Saudações!

A Navegação é uma parte essencial na maioria dos apps. Aqui vou abordar o que aprendi ao longo do desenvolvimento de alguns apps.

Introdução

Em aplicativos, a navegação é feita em Stack, isto é, pilha.

Por exemplo, temos uma tela chamada Home, a qual nos pode levar à próxima tela, Configurações, formando uma pilha. E esta, pode levar para Configurações de conta. Em cada tela nós podemos adicionar ou retirar uma tela da pilha.

Navegação Básica

Sabendo que ela acontece em Stack, vamos ver como adicionar ou remover telas dessa pilha de navegação.

Para começar a fazer uma navegação você vai precisar de, pelo menos:

a tela inicial;
de uma ação para enviar o usuário à próxima tela;
a tela para a qual vamos direcionar o usuário.

Feito isso, nosso evento onPress ou onTap, precisa fazer uma ação sobre o Navigator.



Navigator.of(context).push(
  MaterialPageRoute(
    builder: (_) => NewPageScreen()
  ),
);

Você precisa usar o Navigator (Navegador) do contexto, por isso Navigator.of(context). Ele possui os métodos necessários para controlar a pilha, alguns deles são: push, pushNamed, pop. Nesse caso usamos o push, que precisa receber um Route. Nós poderemos criar depois o nosso próprio Route, mas o Material nos dá o MaterialPageRoute, que recebe um parâmetro nomeado builder, onde podemos simplesmente retornar a página destino.

Transferir dados entre telas

Pode ser que navegar entre telas não nos seja suficiente, mas podemos precisar enviar dados de uma tela para outra.

É possível fazer isso através dos construtores. Desse modo, ao invés de retornarmos a tela sem parâmetros NewScreen(), nós podemos adicionar uma informação no seu construtor.

Definição do construtor



class NewScreen extends StatelessWidget {
    const NewScreen(this.title);

    final String title;

// [...]

Ao redirecionar para a tela NewScreen



Navigator.of(context).push(
  MaterialPageRoute(
        builder: (_) => NewScreen('Estou aprendendo Flutter')
  ),
);

Retirar da pilha

Para retirar uma tela da pilha, fazendo uma ação de voltar, ao invés de push, basta usar o método pop, que vai retirar a tela atual da pilha. Há também outras funções como popAndPushNamed, popUntil, pushNamedAndRemoveUntil, pushReplacement, entre outros. Você pode explorar mais através da documentação oficial

Rotas nomeadas

Agora vamos falar das rotas nomeadas. Espera, já conseguimos resolver nossos problemas. Por que alguém precisaria de rotas nomeadas? Bom, depende do seu caso, mas para muitas aplicações rotas nomeadas podem lhe dar a vantagem de não ter código duplicado. Se você quisesse navegar para a mesma tela em diferentes partes do seu app, do modo como fizemos até agora, você teria que ter repetidas vezes NewScreen('Estou aprendendo Flutter').

Em nosso arquivo main.dart, temos o MaterialApp, com alguns parametros. Agora nós vamos introduzir um parâmetro chamado routes. Veja o exemplo:



MaterialApp(
    // [...]
    routes: { 
      '/new-screen': (context) => NewScreen(), 
      '/blog': (context) => BlogScreen(), 
    }
);

O que o routes faz é relacionar os nomes das rotas, com os Widgets que as representam. Já é possível entender isso ao ver o tipo de valor que routes deve receber: Map<String, Widget Function(BuildContext)>, que é exatamente isso, uma String que representa um builder de Widget.

Com as rotas nomeadas, o que é considerado a rota inicial é sempre a rota /(barra). Quem vem da programação para web já deve esperar por isso. Nós podemos alterar essa rota inicial adicionando mais um parâmetro no MaterialApp, como se segue:



initialRoute: '/blog',

Precisamos usar um método diferente para o Navigator sempre que quisermos fazer uma navegação utilizando essas rotas nomeadas.



Navigator.of(context).pushNamed(
   '/new-screen',
);

Transferir dados entre rotas nomeadas

A forma mais simples de resolver esse problema é, ao navegar para a tela, enviar argumentos. Eles devem ser do tipo Object, que representa quaisquer tipos; podemos inclusive criar uma classe para encapsular esses argumentos, para maior organização.



Navigator.of(context).pushNamed(
   '/new-screen',
   arguments: 'Flutter is awesome',
);

No exemplo, enviamos uma String, um simples texto. Agora para utilizar esse valor podemos, na tela que representa /new-screen, isto é, NewScreen, vamos usar o ModalRoute:



class NewScreen extends StatelessWidget {
    const NewScreen();

    @override
    Widget build(BuildContext context) {
        String title = ModalRoute.of(context).settings.arguments;

        return Container(
            child: Text(title);
        );
    }
}

Geração de rota

Adicionar um evento para geração de rota pode ser muito útil. Vamos introduzir mais um valor para o MaterialApp, o onGenerateRoute. Ele vai servir como um meio de administrar as rotas de forma mais isolada, permitindo fazer alguma operação antes de fazer o push na próxima tela, por exemplo.



onGenerateRoute: (RouteSettings settings) {
   if (settings.name == '/categories') {
      return CategoriesScreen(categoriesRepository);
   }
}

O settings.name representa o nome da rota, como pode ver. No exemplo, estamos passando um repository para dentro da tela CategoriesScreen.

Importante mencionar que quando usamos onGenerateRoute, ele faz o papel do routes que adicionamos antes ao MaterialApp; então você poderia removê-lo para usar a geração de rotas.

Antes de mostrar uma implementação real usando onGenerateRoute, gostaria de mencionar o onUnknownRoute.



onUnknownRoute: (RouteSettings settings) =>
   return MaterialPageRoute(
      builder: (_) => UnknownPageScreen()
   );

É uma forma fácil de mostrarmos uma rota desconhecida. Ele será disparado caso o onGenerateRoute falhe em retornar o Route.

Caso de uso

routes.dart



  // o defaultBuilder serve para as rotas que nao precisam de argumentos
  static Map<String, WidgetBuilder> defaultBuilder = <String, WidgetBuilder>{
    welcome: (BuildContext context) => WelcomeScreen(),
    login: (BuildContext context) => LoginScreen(),
  };

  static Route<dynamic> routeFactory(RouteSettings settings) {
    switch (settings.name) {
      case AppRoutes.signUp:
        return MaterialPageRoute(
          builder: (context) {
            return SignUpScreen(
              userRepository: userRepository,
            );
          },
      settings: settings,
        );

     // [...]

      default:
        return MaterialPageRoute(builder: defaultBuilder[settings.name]);
    }
}

Seguindo esse método, para ir de uma tela para outra basta fazer o pushNamed. Ele vai retornar o MaterialPageRoute que constrói o SignUpScreen passando todos os dados necessários para o construtor.



Navigator.of(context).pushNamed(AppRoutes.signUp);

Se por acaso o switch não incluir alguma rota, com o exemplo do welcome e o login, então usamos um builder padrão, defaultBuilder, para construir a tela.

Utilizando esse padrão de rotas nomeadas e geradas podemos, do mesmo modo, enviar dados através dos arguments. Ou, para muitos casos, bastará termos um repositório que controle o estado de um fluxo, assim a tela para a qual fomos direcionados já terá acesso.

Transição animada

Fazer uma transição de telas personalizada pode dar uma ótima experiência ao usuário. Aperfeiçoando o arquivo de rotas, podemos facilmente adicionar essas animações.

Em Flutter as transições de telas são feitas pelo Route, que no nosso caso é o MaterialPageRoute. Nós podemos criar o nosso próprio Route e sobrescrever a transição padrão. Segue um exemplo:



static Route animatedPageRoute(
      {WidgetBuilder builder, RouteSettings settings}) {
    return PageRouteBuilder(
      settings: settings,
      pageBuilder: (context, animation, secondaryAnimation) => builder(context),
      transitionDuration: Duration(milliseconds: 200),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      },
    );
  }

PageRouteBuilder é o que precisamos retornar dessa função. Com seus parâmetros podemos criar a animação que quisermos.

O transitionsBuilder faz a construção da animação. Nesse contexto, nós precisamos retornar uma Transition, entre elas:

SlideTransition
FadeTransition
ScaleTransition
RotationTransition
SizeTransition

Para mais informações sobre as animações de transição, acesse a documentação oficial.

Este é um resumo do que tenho aprendido com os projetos que pude trabalhar até o momento. Espero que lhe seja útil. Obrigado!

Unity - Easy tweens 🥔

Henrique — Fri, 17 Jan 2020 23:03:13 +0000

Hello 🤓

This is something I wanted to bring to the world. I am talking about PotaTween.

It is a Tween maker for Unity, it's a simple C# Component that helps you create simple tweens and use it either from the Editor or from Code.

Introduction 🥔

Actually PotaTween was written by someone I don't know. In one of the last companies I worked, I was introduced to this simple tool, that was made by a friend of another developer.

We decided to improve that to fit our needs and the Unity updates such as the TextMeshPro and other ones. Then, by creating a GitHub repo I think we're giving to the world the opportunity to use it, explore, learn, and collaborate.

Oh yes, it's a good repo to start collaborating with open-source projects. 😀

How we use it

Now we already have this repo, and you can check it here https://github.com/GabrielCapeletti/PotaTween

It's so simple, I don't even know how to explain that.

Setting from Editor

Basically what we'll need to do is add the PotaTween component to the GameObject we want to animate. And then just check the parameters Play On Enable, or Play On Start from the Inspector.
Or start the animation from code:

tween.SetScale(Vector3.zero, Vector3.one);
tween.Play();

As the tween variable is a PotaTween type, you can simply attach it in the inspector or say GetComponent<PotaTween>().

Setting from Code

You just have to Create the PotaTween from code. What it'll do is AddComponent in the given gameObject.

PotaTween tween = PotaTween.Create(gameObject, 0);
tween.SetScale(Vector3.zero, Vector3.one);    // Animates from scale 0 to 1
tween.Play();

There is an important thing about the Create method. The second parameter, which is the id of the animation; so if you set two animations with the same id, they're going to be overwritten.

A little deeper 🍟

Can I use callbacks?

This Tween Component allows you to easily set callbacks.

onStart
onComplete

These names above are PotaTweenEvent which is actually the same of UnityEvent<PotaTween>, and you can set them like this:

tween.onStart = new PotaTween.PotaTweenEvent();
tween.onStart.AddListener((PotaTween t) =>
{
    Debug.Log("PotatooO");
});

What about the easy way?

The easier way to do something when the animation ends is by adding a callback function as a parameter of the Play method.

tween.Play(() => {
    Debug.Log("Animation has finished.");
});

Can I reuse my animations? 🥔🍟

Yes. This is one of the changes we did from the original project.
This is called PotaTweenPreset. It's an asset that you can create by accessing the Unity menu Create > PotaTween > Preset

The Preset works pretty much the same way the PotaTween Component. To use it you will need to reference your Preset asset, so create a variable like this:

public PotaTweenPreset blinkTween;

To make the Preset work, just initialize it wherever you need

PotaTween tween = blinkTween.Initialize(gameObject, 0);

This way your animation can be reused everywhere because it is an asset, not a component configuration. You just need to reference it from the inspector.

That's it.

A good thing of PotaTween is simplicity, I hope it can help you

I would like to read your comment about what did you think.
Do you think it's useful?

Thanks! 😄

Unity - Criar uma barra de vida

Henrique — Sun, 05 Jan 2020 03:59:48 +0000

Olá!

Estou fazendo este artigo a partir do breve vídeo que acabei de publicar no meu canal no YouTube

Primeiro vídeo, primeiro artigo -> por isso talvez algumas coisas não estejam tão boas, me perdoe por isso; aceito suas sugestões.

Introdução

O que vamos fazer: Vamos fazer uma barra de vida horizontal simples.
Utilizei a versão 2019.3.0f3 da Unity.
Repositório: acesse aqui

Mão na massa

Precisamos de uma imagem branca, convertida para Sprite, na configuração de importação.
Criar um Canvas com a Image de background e de preenchimento da barra de vida

Ao criar o preenchimento, altere o ImageType para Filled, e o Fill Method para Horizontal

Esse valor FillAmount controla o quanto de preenchimento nós temos, sendo ele entre 0 e 1
Obs.: você só consegue alterar o ImageType se adicionar um Sprite no componente.

Pronto!
Agora crie o Script HealthController.cs

Code

Este é o código que utilizamos no vídeo, e que está disponível no repositório:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class HealthController : MonoBehaviour
{
    public float health = 2;
    public float Health {
        get {
            return health;
        }
        set {
            health = Mathf.Clamp(value, 0, healthMax);
        }
    }
    public float healthMax = 14;

    public Image healthBar;

    private void Update() {
        if (Input.GetKey(KeyCode.UpArrow)) {
            Health += 0.5f;
        }
        if (Input.GetKey(KeyCode.DownArrow)) {
            Health -= 0.5f;
        }
        UpdateHealthBar();
    }

    private void UpdateHealthBar() {
        healthBar.fillAmount = Health / healthMax;
    }
}

Você pode remover as linhas de Input. Elas foram criadas apenas para teste, já que não temos eventos de dano ou ganho de vida.

Espero que tenha ajudado de alguma forma. Qualquer dúvida ou sugestão, eu gostaria de saber.

No meu canal, pretendo adicionar mais vídeos, não tão iniciantes, mas que espero ajudar muita gente; de forma direta e sem rodeios. 😄

Obrigado!