DEV Community: Willane Paiva

Flutter: Armazenamento de dados

Willane Paiva — Fri, 19 Dec 2025 21:41:39 +0000

O flutter permite armazenar dados no dispositivo em que o aplicativo está instalado, podendo esse dado ter diferentes finalidades, como mostrar ou não um pop-up promocional, salvar preferências (como tema a usar). Este artigo explicará a diferença entre dados simples e criptografados, além de apresentar os principais pacotes que podem ser usado para cada tipo.

Tipos de dados

Dados simples

Dados simples seriam dados que não necessitam de segurança ao armazenar, podendo ser texto simples, exemplo seriam preferências do usuário, visualização de determinado dado. Esses dados são facilmente acessados, como no android que é possível acessar ao rodar o app em modo debug.

Dados criptografados

Criptografia seria codificar o dado de forma humanamente ilegível, usando um algoritmo

Quando é usado dados sensíveis, é recomendado usar um armazenamento que criptografe os dados antes de salvar no dispositivo, de forma a manter o dado seguro, exemplo desse uso seriam informações do usuário. Para isso pode criptografar o dado e armazenar ou usar um pacote que faça isso, como o flutter_secure_storage.

Principais pacotes

SharedPreferences

O SharedPreferences permite o armazenado de dados de diferentes tipos primitivos sem criptografia, é um pacote recomendado pelo time do flutter. A instalação permite configurar propriedades durante sua implementação.
As operações com os dados é feita tanto de forma síncrona como assíncrona, a depender do construtor usado na configuração.
Um ponto de atenção é que não existe garantia de que o dado salvo será persistido, não sendo assim recomendado para dados críticos.

Link do pacote

FlutterSecureStorage

O FlutterSecureStorage armazena os dados de forma segura, usando o keychain (iOS) e keyStore (android), assim os dados são salvos criptografados no dispositivo.
As operações com os dados é feita de forma assíncrona.

Link do pacote

Considerações finais

Nesse artigo foi abordado o conceito de dados não sensíveis e criptografados, apresentando os pacotes SharedPreferences e FlutterSecureStorage` como alternativas para salvar os dados em dispositivos. Além desses pacotes, também existe a possibilidade de guardar dados mais complexos usando banco de dados, o qual a escolha vai depender das especificações do tipo e uso do dado.

Flutter: Essential widgets

Willane Paiva — Sat, 29 Nov 2025 19:21:06 +0000

Gostaria de ler em português? Leia aqui

Flutter builds layout combining widgets, just like lego blocks. In this article, I'm going to present you a few widgets that can build various screens when combined.

Essential Widgets

Text

Text is a widget used to render text(string) in a screen, it can be constant or dynamic. It can customize style, with properties like font, font weight, handle overflow and wrap, and many others.

Constant Text Example

Text('Hello, World');

Dynamic Text

const greeting = (name) => 'Hello, $name';

Text(greeting('Maria'));

Container

Container is a widget with a single child and has multiple properties, like color that can be used to change background color and decoration that allows us to create borders, which can only be used one at time.

Exemple using color property to change background color:

Container(
    color: Colors.red,
  child: Text('Container'),
);

Example using decoration to define background color:

Container(
        decoration: BoxDecoration(
          color: Colors.red,
        ),
        child: const Text('Container'),
);

SizedBox

SizedBox is a widget that make it possible to create a widget with fixed dimensions, like width, height or both. Has a optional single child.

SizedBox(height: 6);

Padding

Padding is a widget that creates space inside a widget, just like CSS Padding.

Padding(
    padding: EdgeInsets.all(16),
    child: Text('Widget A'),
);

Column

Column is a widget that stacks itens vertically. It's a flex widget, so it will take all available space.

Usage Example:

Column(
  children: [
        Container(color: Colors.red),
        Container(color: Colors.blue),
    ],
);

Complete Example:

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 620,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget A'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget B'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget C'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget D'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
        ],
      ),
    );
  }
}

Row

Similar to Column, render itens horizontally.

Row(
  children: [
        Container(color: Colors.red),
        Container(color: Colors.blue),
    ],
);

Complete Example:

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 600,
      decoration: BoxDecoration(border: Border.all()),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget A'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget B'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget C'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
        ],
      ),
    );
  }
}

SingleChildScrolView

SingleChildScrollView creates a scrollable widget with single child, useful when child size is dynamic.

Usage Example:

SingleChildScrollView(
    child: Text('long text here')
);

Complete Example:

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: SizedBox(
        height: MediaQuery.of(context).size.height * 2,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          children: [
            Flexible(
              child: Container(
                color: Colors.blue,
                alignment: Alignment.center,
                child: const Text('Widget A'),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.green,
                alignment: Alignment.center,
                child: const Text('Widget B'),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.yellow,
                alignment: Alignment.center,
                child: const Text('Widget C'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

References

Flutter Documentation

Observabilidade em aplicações móveis

Willane Paiva — Fri, 26 Sep 2025 22:33:54 +0000

Observalidade é um conceito importante no desenvolvimento de aplicações móveis, servindo para acompanhar a saúde do sistema, ajudando a identificar problemas mais rápido, facilitando o entendimento de um fluxo entre outros.

Dentro da observabilidade temos logs, alertas entre outros conceitos, sendo os dois primeiros abordados a seguir.

Logs

Os logs nos trazem algum tipo de informação do sistema, podendo ser de diferentes tipos:

info: uma mensagem de fluxo, como ao iniciar a execução de um método, indicar o resultado de uma execução
Error: algum problema que aconteceu, como uma exceção lançada numa requisição de dados
Warn: indica alguma informação que precisa de atenção, mas não necessariamente é algo critico

Esses sãos os tipos mais relevantes de forma inicial, podendo serem explorados mais a parte. Os logs são uma ferramenta poderosa, que permitem identificar todo o caminho feito para obter um dado, como quais requisições foram feitas e os seus retornos, mesmo entre diferentes sistemas, como ao usar trace id, que seria um identificar desse caminho.

Alertas

Os alertas indicam incidência no sistema, como um comportamento ocorrendo em um intervalo de tempo, podendo ser combinado com outras ferramentas para notificar em canal do slack, por exemplo, ligar para responsável pelo sistema/ on-call, servindo para assim identificar comportamentos indesejados no sistema e corrigi-los.

Ferramentas

Existem diferentes ferramentas disponíveis para enviar e gerenciar esses logs como o New Relic, Splunk, Sentry entre outras, onde a escolha por uma delas vai depender do uso desejado, custo, integração com plataforma usada no project etc.

Exemplo em flutter

A seguir temos um exemplo de como usar logs usando flutter, nesse caso foi criada uma classe AppLogger , que é responsável por gerenciar diferentes tipos de logs e pode ser alterada para envia-los para a ferramenta desejada, podendo ser usada em diferentes locais do projeto, centralizado as definições e facilitando manutenções futuras. O que o log vai incluir depende do que se espera, pode ser uma mensagem sobre o contexto atual (’usuário requisitou dado’), assim como incluir erro ocorrido, id do usuário entre tantos outros.
Outro ponto interessante pode ser considerar se a aplicação está em modo de desenvolvimento ou não para fazer os envios do log para a ferramenta ou apenas logar localmente, evitando assim custos extras.

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'dart:developer' as developer;

class AppLogger {
  AppLogger({this.isDebug = false});
  final bool isDebug;
  void logInfo(String message) {
    if (isDebug) {
      debugPrint('INFORMAÇÃO: $message');
      return;
    }
    // Aqui poderia enviar para um serviço invés do log
    developer.log(message, name: 'AppLogger', level: 800);
  }

  void logError(String message) {
    if (isDebug) {
      debugPrint('ERRO: $message');
      return;
    }
    developer.log(message, name: 'AppLogger', level: 1000);
  }

  void logWarn(String message) {
    if (isDebug) {
      debugPrint('AVISO: $message');
      return;
    }
    developer.log(message, name: 'AppLogger', level: 900);
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final logger = AppLogger(isDebug: kDebugMode);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Controle do App Logger',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Controle do App Logger')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton.icon(
                onPressed: () {
                  logger.logInfo(
                    'O usuário iniciou um registro de informação.',
                  );
                },
                icon: const Icon(Icons.info_outline),
                label: const Text('Registrar Mensagem de Informação'),
              ),
              const SizedBox(height: 16.0),
              ElevatedButton.icon(
                onPressed: () {
                  logger.logWarn('Um problema potencial foi detectado.');
                },
                icon: const Icon(Icons.warning_amber),
                label: const Text('Registrar Mensagem de Aviso'),
              ),
              const SizedBox(height: 16.0),
              ElevatedButton.icon(
                onPressed: () {
                  logger.logError('Ocorreu um erro crítico!');
                },
                icon: const Icon(Icons.error_outline),
                label: const Text('Registrar Mensagem de Erro'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.red,
                  foregroundColor: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

App após clicar nos botões:

Referências

https://pub.dev/documentation/logging/latest/logging/Level-class.html

O que é Design system e por que usar

Willane Paiva — Sat, 13 Jul 2024 18:45:16 +0000

O que é um design system?

Design system é uma biblioteca que é usada para organizar o tema de uma aplicação, incluindo suas variações. Ele contém os componentes mais comuns, como botões, entrada de texto e barra de navegação. Define as cores a serem usadas, desde cores primarias a terciárias, usadas em destaques, estados do sistema (erro/sucesso por exemplo) etc, também define diferentes usos de texto, como títulos. Além disso, inclui variações de tema (claro/noturno), assim como fontes e espaçamentos.

Exemplo

Aqui temos um exemplo de um design system simplificado, contendo algumas variações de fontes, cores e componentes, como botão e input. Nesse caso, as fontes poderiam ter usos diversos como títulos, corpo de texto, legendas etc, podendo isso ser indicado no design system. Já as cores são de acordo com o uso, como a cor principal, aqui chamada de primária, que é usada nos lugares de destaque como em botão de ação, tela de inicialização (splash) etc, temos cores relacionadas ao estado da aplicação, como aqui demonstrado com a cor para erro, onde poderia ter também sucesso e neutro, variando de acordo com a necessidade.

Pontos ao considerar se irá ou não ter um design system

Ter um design system resulta em uma centralização dos componentes, permitindo reusar em diferentes aplicações, gerando assim uma padronização e facilitando a manutenção, uma vez que ao atualizar em um local irá refletir nos demais.

Mas como nem tudo são flores, ao decidir criar e usar um design system têm-se um maior esforço inicial, tanto para decidir o que irá compor como para criar os componentes e suas variações.

Considerações finais

Ter ou não um design system depende da necessidade de sua aplicação, precisando assim avaliar os prós e contras caso a caso. Em aplicações que trabalhei e que tinham um design system foi bastante útil, como ao criar templates já agiliza por ter alguns componentes pré-definidos e em casos de mudança de marca, facilita a retafotação por não precisar ir em cada componente alterar manualmente.

Widgets essenciais do flutter

Willane Paiva — Sat, 19 Aug 2023 21:24:04 +0000

O flutter funciona combinando widgets como se fossem legos para conseguir um determinado layout. Neste artigo, irei apresentar alguns widgets que permitem construir uma variedade de telas quando combinados.

Widgets essenciais

Text

Text renderiza um texto na tela, onde o texto pode ser dinâmico ou estático. É possível customizar o estilo, mudando várias propriedades como fonte, peso, além de definir como o texto será tratado em caso de overflow, se irá dar wrap entre outros.

Exemplo com texto estático

Text('olá mundo');

Exemplo com dado dinâmico

const greeting = (name) => 'Olá, $name';

Text(greeting('Maria'));

Container

O Container é um widget que possui apenas um filho e pode ter diferentes propriedades, como color que pode ser usada para pintar o fundo e decoration que nos permite criar bordas, é possível usar color ou decoration, um de cada vez.

Exemplo usando cor de fundo:

Container(
    color: Colors.red,
  child: Text('Container'),
);

Exemplo usando decoration para definir a cor de fundo:

Container(
        decoration: BoxDecoration(
          color: Colors.red,
        ),
        child: const Text('Container'),
);

SizedBox

SizedBox é um widget que nos permite criar um widget com altura, largura ou ambos fixos. É um widget que tem apenas uma criança que é opcional.

SizedBox(height: 6);

Padding

O Padding é um widget que cria espaço dentro de um widget, similar ao padding do CSS.

Padding(
    padding: EdgeInsets.all(16),
    child: Text('Widget A'),
);

Column

Column é um widget que empilha os widgets verticalmente. É um widget do tipo flex, então toma todo o espaço que tiver sobrando.

Exemplo de uso:

Column(
  children: [
        Container(color: Colors.red),
        Container(color: Colors.blue),
    ],
);

Exemplo mais completo:

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 620,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget A'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget B'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget C'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget D'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
        ],
      ),
    );
  }
}

Row

Similar ao Column, o Row empilha os itens horizontalmente.

Row(
  children: [
        Container(color: Colors.red),
        Container(color: Colors.blue),
    ],
);

Exemplo mais completo:

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 600,
      decoration: BoxDecoration(border: Border.all()),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget A'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget B'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget C'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
        ],
      ),
    );
  }
}

SingleChildScrolView

SingleChildScrollView cria um widget rolável com apenas um filho, útil quando o tamanho do filho é dinâmico.

Exemplo de uso

SingleChildScrollView(
    child: Text('long text here')
);

Exemplo mais completo

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: SizedBox(
        height: MediaQuery.of(context).size.height * 2,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          children: [
            Flexible(
              child: Container(
                color: Colors.blue,
                alignment: Alignment.center,
                child: const Text('Widget A'),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.green,
                alignment: Alignment.center,
                child: const Text('Widget B'),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.yellow,
                alignment: Alignment.center,
                child: const Text('Widget C'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Referência

Documentação do Flutter

Flutter & Nuvigator: Intro with routers and parameters

Willane Paiva — Sat, 26 Feb 2022 14:55:29 +0000

Hi there!

This article intends to explain a bit about nuvigator, building a simple application to demostrate how to navigate from one screen to another and how to send parameters. Enjoy it!

What's nuvigator?

Nuvigator is a flutter package for navigation, written on top of flutter navigation. It's a package that was created by nubank and wants do add new functionalities, such as deep links, also have support for nested routes and can help with modular apps. Check additional info here

Example

For this example, we're going to create an app nuvigatorexample using the flutter cli:

flutter create nuvigatorexample

Installing the package

The current version of nuvigator is 0.7.2, that's does not support null safety and will throw an error when trying to run the app, so it's necessary to change the sdk version.

Inside pubspec.yaml, change the sdk version:

sdk: ">=2.11.0 <3.0.0"

and add nuvigator to dependencies:

dependencies:
  flutter:
    sdk: flutter
  nuvigator:

Now install the package, you can use your ide or type the following command on terminal:

flutter pub get

Building the app

Let's build an example using nuvigator to navigate between two screens.

The first screen, Home, will have a button that navigates to the second screen, Details.

Our home_screen.dart:

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  final Function onPressed;

  const HomeScreen({Key key, this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
          child: ElevatedButton(
        onPressed: onPressed,
        child: const Text('Navigate to details'),
      )),
    );
  }
}

Our details_screen.dart:

import 'package:flutter/material.dart';

class DetailsScreen extends StatelessWidget {
  const DetailsScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: const Center(child: Text('Details screen')),
    );
  }
}

Our main.dart:

import 'package:flutter/material.dart';
import 'package:nuvigator/next.dart';
import 'package:nuvigatorexample/screens/details_screen.dart';
import 'package:nuvigatorexample/screens/home_screen.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Nuvigator.routes(initialRoute: 'home', routes: [
        NuRouteBuilder(path: 'home', builder: (BuildContext contextNuvigator, __, ___) => HomeScreen(onPressed: (){
          Nuvigator.of(contextNuvigator).open('details');
        },), screenType: materialScreenType),
        NuRouteBuilder(
            path: 'details', builder: (_, __, ___) => const DetailsScreen(), screenType: materialScreenType)
      ]),
    );
  }

}

Commit with these changes

Using a router

Inside our home_screen, we gonna add a new class that will extend a NuRoute:

import 'package:nuvigator/next.dart';

class HomeRouter extends NuRoute {
  @override
  Widget build(BuildContext context, NuRouteSettings<Object> settings) {
    return HomeScreen(onPressed: (){
      nuvigator.pushNamed('details');
    },);
  }

  @override
  String get path => 'home';

  @override
  ScreenType get screenType => materialScreenType;

}

We're going to do the same for our details_screen:

import 'package:nuvigator/next.dart';

class DetailsRoute extends NuRoute {
  @override
  Widget build(BuildContext context, NuRouteSettings<Object> settings) {
    return DetailsScreen();
  }

  @override
  String get path => 'details';

  @override
  ScreenType get screenType => materialScreenType;

}

Now we must create our router inside main.dart, creating a new class that extends NuRouter and changing the MaterialApp home:

class Router extends NuRouter{
  @override
  String get initialRoute => 'home';

  @override
  List<NuRoute<NuRouter, Object, Object>> get registerRoutes => [
    HomeRouter(),
    DetailsRoute()
  ];

}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Nuvigator(router: Router()),
    );
  }

}

This should have the same result as the previous navigation.

Commit with changes

Passing parameters to details screen

Now, let's send a personalized text to our details screen.

First, we must define the text as a parameter in the pushNamed function:

nuvigator.pushNamed('details', arguments: {'message': 'Hello world'});

Then, we must get this parameter inside our details screen, using nuvigator settings raw parameters.

Insider the DetailsRoute build method, let's get the message:

final String message = settings.rawParameters['message'];

and then inside our DetailsScreen, we're going do add a new prop called message and use it to render:

class DetailsScreen extends StatelessWidget {
  final String message; // text from route
  const DetailsScreen({Key key, this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: Center(child: Text(message)),
    );
  }
}

Commit with changes

Result:

Flutter & Nuvigator: Intro com routers e parâmetros

Willane Paiva — Sat, 26 Feb 2022 14:55:19 +0000

Olá!

Este artigo tem como objetivo explicar um pouco sobre o nuvigator, construindo uma aplicação simples para mostrar como navegar de uma tela para outra e como enviar parâmetros.

O que é o nuvigator?

Nuvigator é um pacote flutter para navegação, feito em cima do flutter navigation. É um pacote que foi criado pelo Nubank e que tem como objetivo adicionar novas funcionalidades, como deep links, também tem suporte a rotas aninhadas e pode ajudar com aplicativos modulares. Confira aqui mais sobre o pacote

Exemplo

Para este exemplo, nós criaremos um app nuvigatorexample usando a cli do flutter:

flutter create nuvigatorexample

Instalando o pacote

A versão atual do nuvigator é 0.7.2, que não tem suporte ao null safety, e irá disparar um erro ao tentar rodar o app, então é necessário mudar a versão do sdk.

Dentro do arquivo pubspec.yaml, mude a versão do sdk:

sdk: ">=2.11.0 <3.0.0"

e adicione o nuvigator nas dependências:

dependencies:
  flutter:
    sdk: flutter
  nuvigator:

Agora instale o pacote, você pode usar sua IDE ou digitar o seguinte comando no terminal:

flutter pub get

Construindo o app

Vamos criar um exemplo usando nuvigator para navegar entre duas telas.

A primeira tela, Home, vai ter um botão que navega para a segunda tela, Details.

Nossa home_screen.dart:

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  final Function onPressed;

  const HomeScreen({Key key, this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
          child: ElevatedButton(
        onPressed: onPressed,
        child: const Text('Navigate to details'),
      )),
    );
  }
}

Nossa details_screen.dart:

import 'package:flutter/material.dart';

class DetailsScreen extends StatelessWidget {
  const DetailsScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: const Center(child: Text('Details screen')),
    );
  }
}

Nosso main.dart:

import 'package:flutter/material.dart';
import 'package:nuvigator/next.dart';
import 'package:nuvigatorexample/screens/details_screen.dart';
import 'package:nuvigatorexample/screens/home_screen.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Nuvigator.routes(initialRoute: 'home', routes: [
        NuRouteBuilder(path: 'home', builder: (BuildContext contextNuvigator, __, ___) => HomeScreen(onPressed: (){
          Nuvigator.of(contextNuvigator).open('details');
        },), screenType: materialScreenType),
        NuRouteBuilder(
            path: 'details', builder: (_, __, ___) => const DetailsScreen(), screenType: materialScreenType)
      ]),
    );
  }

}

Commit com essas mudanças

Usando um router

Dentro da nossa home_screen, vamos adicionar uma nova classe que estende NuRoute:

import 'package:nuvigator/next.dart';

class HomeRouter extends NuRoute {
  @override
  Widget build(BuildContext context, NuRouteSettings<Object> settings) {
    return HomeScreen(onPressed: (){
      nuvigator.pushNamed('details');
    },);
  }

  @override
  String get path => 'home';

  @override
  ScreenType get screenType => materialScreenType;

}

Vamos fazer o mesmo para a details_screen:

import 'package:nuvigator/next.dart';

class DetailsRoute extends NuRoute {
  @override
  Widget build(BuildContext context, NuRouteSettings<Object> settings) {
    return DetailsScreen();
  }

  @override
  String get path => 'details';

  @override
  ScreenType get screenType => materialScreenType;

}

Agora devemos criar nosso router dentro do main.dart, criando uma nova classe que estende NuRouter e mudando o MaterialApp home:

class Router extends NuRouter{
  @override
  String get initialRoute => 'home';

  @override
  List<NuRoute<NuRouter, Object, Object>> get registerRoutes => [
    HomeRouter(),
    DetailsRoute()
  ];

}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Nuvigator(router: Router()),
    );
  }

}

Isto deve ter o mesmo resultado que a navegação anterior.

Commit com as mudanças

Passando parâmetros para a tela de details

Agora, vamos enviar um texto personalizado para a tela details.

Primeiro, nos devemos definir um texto como parâmetro na função pushNamed:

nuvigator.pushNamed('details', arguments: {'message': 'Hello world'});

Então, conseguimos recuperar este parâmetro dentro da tela details, usando os raw parameters do nuvigator settings.

Vamos recuperar a mensagem dentro do método build do DetailsRoute:

final String message = settings.rawParameters['message'];

E então dentro da nossa DetailsScreen, vamos adicionar uma nova prop chamada message e usar para renderizar a mensagem:

class DetailsScreen extends StatelessWidget {
  final String message; // text from route
  const DetailsScreen({Key key, this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: Center(child: Text(message)),
    );
  }
}

Commit com as mudanças

Resultado:

Melhorando performance no react native com objetos

Willane Paiva — Sun, 20 Feb 2022 17:29:18 +0000

Olá!

Quando trabalhamos com dados no React native, normalmente usamos arrays, que são mais fáceis de usar com flatlists. Modificar qualquer dado em um array é uma tarefa computacional complexa, especialmente a medida que o conjunto de dados cresce. Por exemplo, se temos um array de strings e queremos encontrar uma string, teríamos que percorrer todo o array para encontra-la, então quanto maior o array maior o tempo gasto nesta operação.

Para corrigir o problema acima é possível usar objetos com identificadores únicos, que seria bem mais fácil e rápido de manipular o conjunto de dados.

Então, como faremos isso?

Primeiro, vamos dar uma olhada no seguinte exemplo:

const App = () => {
  const [data] = useState([
    {
      name: 'Joao',
      job: 'Developer',
    },
    {
      name: 'Maria',
      job: 'CEO',
    },
  ]);

  const _renderItem = ({item}) => {
    return (
      <View style={styles.view}>
        <Text style={[styles.text, styles.titleText]}>{item?.name}</Text>
        <Text style={styles.text}>{item?.job}</Text>
      </View>
    );
  };

  const _keyExtractor = item => {
    return item.name;
  };

  return (
    <SafeAreaView>
      <FlatList
        renderItem={_renderItem}
        data={data}
        keyExtractor={_keyExtractor}
      />
    </SafeAreaView>
  );
};

Que renderizará a seguinte tela:

Para converter para objeto, nós teríamos que mudar como inicializamos os dados e como a flatlist o usa.

Começando com a inicialização, poderíamos usar um identificar único, nesse caso vamos usar o padrão 'user-x', onde x é um inteiro, resultando no seguinte formato:

{
    'user-1': {
      name: 'Joao',
      job: 'Developer',
    },
    'user-2': {
      name: 'Maria',
      job: 'CEO',
    },
  }

Então, nós deveríamos mudar as props da flatlist, já que temos um objeto e a props de data espera um array, poderíamos usar object.entries para obter um array, por exemplo se tivéssemos um objeto assim:


const data = {'user-1': {'name': 'Maria'}};

Object.entries nos retornaria:

[
 ['user-1', {'name': 'Maria'}]
]

Este resultado mostra que também teriam que mudar a função render item, já que o item recebido da flatlist é agora um array:

const _renderItem = ({item}) => {
    const [_, itemData] = item;

    return (
      <View style={styles.view}>
        <Text style={[styles.text, styles.titleText]}>{itemData?.name}</Text>
        <Text style={styles.text}>{itemData?.job}</Text>
      </View>
    );
  };

O código completo:


const App = () => {
  const [data] = useState({
    'user-1': {
      name: 'Joao',
      job: 'Developer',
    },
    'user-2': {
      name: 'Maria',
      job: 'CEO',
    },
  });

  const _renderItem = ({item}) => {
    const [_, itemData] = item;

    return (
      <View style={styles.view}>
        <Text style={[styles.text, styles.titleText]}>{itemData?.name}</Text>
        <Text style={styles.text}>{itemData?.job}</Text>
      </View>
    );
  };

  const _keyExtractor = item => {
    const [key] = item;

    return key;
  };

  return (
    <SafeAreaView>
      <FlatList
        renderItem={_renderItem}
        data={Object.entries(data)}
        keyExtractor={_keyExtractor}
      />
    </SafeAreaView>
  );
};

Vantagens de usar objeto

Como mencionado acima, usar um objeto seria melhor para performance, especialmente quando modificando os dados. Por exemplo, se esta lista tivesse opção para remover um item ou adicionar um novo, seria mais rápido remover o dado do objeto considerando que já teríamos o identificado.

Improving performance in React native with object

Willane Paiva — Tue, 15 Feb 2022 00:13:57 +0000

Hi there!

Usually when we're working with data in React Native we work with arrays, that are easier to use in flatlists. Modifying any data in an array is a computational complex operation, especially as the dataset grows, for instance, if we have an array of strings and we want to find one string that match, we would have to loop thought the array to find and remove it, so the larger the array, larger the time spent in this operation.

To fix the issue above, it's possible to use objects with unique identifiers, that would be easier and faster to manipulate the dataset.

So, who we can do it?

First of all, let's take a look at the following example:

const App = () => {
  const [data] = useState([
    {
      name: 'Joao',
      job: 'Developer',
    },
    {
      name: 'Maria',
      job: 'CEO',
    },
  ]);

  const _renderItem = ({item}) => {
    return (
      <View style={styles.view}>
        <Text style={[styles.text, styles.titleText]}>{item?.name}</Text>
        <Text style={styles.text}>{item?.job}</Text>
      </View>
    );
  };

  const _keyExtractor = item => {
    return item.name;
  };

  return (
    <SafeAreaView>
      <FlatList
        renderItem={_renderItem}
        data={data}
        keyExtractor={_keyExtractor}
      />
    </SafeAreaView>
  );
};

It will render the following screen:

To convert it to use an object, we would have to change the data initialization and how the flatlist would use this data.

Starting with the initialization, we could use an unique identifier, in this case we will use the pattern user-x, where x is an integer, resulting in this new format:

{
    'user-1': {
      name: 'Joao',
      job: 'Developer',
    },
    'user-2': {
      name: 'Maria',
      job: 'CEO',
    },
  }

Then, we should change the props for the flatlist, since we have an object and the data props expects an array we could use the Object.entries to have an array, for example if we had an object like this:


const data = {'user-1': {'name': 'Maria'}};

Object.entries would return to us:

[
 ['user-1', {'name': 'Maria'}]
]

That result shows that we will also have to change the render item function, since the item received from the flatlist is now an array:

const _renderItem = ({item}) => {
    const [_, itemData] = item;

    return (
      <View style={styles.view}>
        <Text style={[styles.text, styles.titleText]}>{itemData?.name}</Text>
        <Text style={styles.text}>{itemData?.job}</Text>
      </View>
    );
  };

The complete code:


const App = () => {
  const [data] = useState({
    'user-1': {
      name: 'Joao',
      job: 'Developer',
    },
    'user-2': {
      name: 'Maria',
      job: 'CEO',
    },
  });

  const _renderItem = ({item}) => {
    const [_, itemData] = item;

    return (
      <View style={styles.view}>
        <Text style={[styles.text, styles.titleText]}>{itemData?.name}</Text>
        <Text style={styles.text}>{itemData?.job}</Text>
      </View>
    );
  };

  const _keyExtractor = item => {
    const [key] = item;

    return key;
  };

  return (
    <SafeAreaView>
      <FlatList
        renderItem={_renderItem}
        data={Object.entries(data)}
        keyExtractor={_keyExtractor}
      />
    </SafeAreaView>
  );
};

Benefits of using the object

As mentioned above, using an object would be better for performance, especially when modifying the data. For example, if this list had options to remove an item or add a new one, it would be faster to remove the data from the object considering that we already have identified it.

VSCode Setup for development

Willane Paiva — Tue, 02 Nov 2021 17:21:31 +0000

This article is a compilation of setup that I made in VSCode to look better and have the functionalities that I consider the minimum necessary to development.

The final result:

Table of Contents

Improving visual hiding lateral bar, title bar and minimap
1.1. Adding keyboard shortcuts
1.2. Hiding the bars in settings
Adding JetBrains Mono with ligatures
2.1. Installing the font on your computer
2.2. Using it on VSCode
Additional Settings
Adding extensions

4.1 General
4.2 React Development
4.3 Themes
4.4 Flutter

PS: If you are using macbook, replace ctrl with cmd.

1. Improving visual hiding lateral bar, title bar and minimap

1.1. Adding keyboard shortcuts

Open the command search using the shortcut ctrl + shift + p and type 'keyboard shortcuts', then select 'Preferences: Open Keyboard Shortcuts (JSON)' as showed in the image bellow.

Then add the following code in the opened file:

// Place your key bindings in this file to override the defaults
[
  /**
   * Activity Bar
   **/
  {
    "key": "ctrl+k ctrl+e",
    "command": "workbench.view.explorer"
  },
  {
    "key": "ctrl+k ctrl+g",
    "command": "workbench.view.scm"
  },
  {
    "key": "ctrl+k ctrl+d",
    "command": "workbench.view.debug"
  },
  {
    "key": "ctrl+k ctrl+x",
    "command": "workbench.extensions.action.showInstalledExtensions"
  }
]

1.2 Hiding the bars in settings

Open the settings similar to how we did previously, using the shortcut ctrl + shift + p and searching for 'Preferences: Open Settings (JSON).

In the JSON file, add the following options:

  "window.titleBarStyle": "custom",
  "workbench.activityBar.visible": false,
  "editor.minimap.enabled": false,

2. Adding JetBrains Mono with ligatures

2.1 Installing the font on your computer

Head to https://www.jetbrains.com/lp/mono/, download the font and install it according to your operating system.

2.2. Using it on VSCode

Open the settings.json (explained in step 1.2) and add the following content inside the file:

    "editor.fontLigatures": true,
    "editor.fontFamily": "'JetBrains Mono','Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",

3. Additional settings

The following settings are for improving git usage, editor update import, enable bracket pair (Check VSCode update for more info), format on save, define default formatter. "Compact folders" is for when the folder only have one nested folder, when disabled, won't show inline.

Compact Folders disabled:

Compact Folders enabled:

    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "git.enableSmartCommit": true,
    "git.confirmSync": false,
    "git.autofetch": true,
    "explorer.compactFolders": false,
    "editor.wordWrap": "on",
    "extensions.ignoreRecommendations": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "typescript.updateImportsOnFileMove.enabled": "always",
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
    "eslint.validate": [
      "javascript"
    ],
    "eslint.format.enable": true,
    "[typescriptreact]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[javascript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    }

4. Adding extensions

These are the main extensions that I'm currently using:

Principais conceitos do Single-SPA

Willane Paiva — Fri, 29 Oct 2021 13:19:10 +0000

Este artigo tem como intuito resumir alguns conceitos relacionados ao single-spa, framework usado para construção de microfrontends. Os conceitos foram divididos em tópicos explicando o que é e como fazer algumas configurações em uma aplicação single-spa.

Não será criada uma aplicação de exemplo no decorrer do artigo.

Observação: A versão do single-spa considerada neste artigo foi a 5.x

Tabela de conteúdos

O que é?
Como usar?
Como funciona?
Como Adicionar o filho ao root?
Passar props ao app filho a partir do root?
Como associar um filho a uma rota?
Como definir a ordem de exibição de filhos em mesma rota?
Como funciona o processo de deploy?

1.O que é?

Framework para criação de microfrontends, com suporte a frameworks e bibliotecas usados para construir frontends, como react, svelte etc. Com isto é possibilitado construir aplicações menores de forma isolada e combinar em uma aplicação maior/completa, além de poder usar frameworks diferentes dentro de uma mesma aplicação principal, por exemplo podemos ter um filho usando vue e outro usando react que compõem a mesma aplicação principal.

2.Como usar?

O framework tem instruções por linha de comando (CLI) onde é possível construir as aplicações, seja a casca ou aplicação filho. Com ela é possível selecionar o tipo de aplicação e o que irá usar, seja o framework, gerenciador de pacotes, typescript etc.

3.Como funciona?

É necessário criar no mínimo duas aplicações, uma root que será usada como casca para juntar os apps e um filho, que irá compor o root. No momento de criação do root define-se um nome de organização que será usado como prefixo no nome do app filho. Não é obrigatório o uso da CLI para construir os apps, na documentação explicita o que precisa para funcionar (dentre eles métodos específicos e algumas dependências), então pode-se usar um aplicativo já existente e muda-lo para single-spa.

Mais informações: https://single-spa.js.org/docs/migrating-existing-spas

4.Como adicionar um app filho ao root?

Cadastra-se um nome que será associado a esse filho, quando local irá apontar para a url de localhost e em produção aponta para onde está hospedado. Após essa associação, adiciona-se um novo aplicativo com o nome dado anteriormente como aplicação no mesmo arquivo ou usando o método registerApplication do single-spa.

//index.ejs
<% if (isLocal) { %>
    <script type="systemjs-importmap">
      {
        "imports": {
          "@wps/root-config": "//localhost:9000/wps-root-config.js",
          "@wps/home": "http://localhost:8080/wps-home.js"
        }
      }
    </script>
    <% } %>
<main>
    <route default>
      <application name="@wps/home"></application>
    </route>
</main>

//componente.js
registerApplication({
  name: "@wps/home",
  app: () => System.import("@wps/home"),
  activeWhen: ["/"],
});
//ou
// especificado para rodar apenas no '/'
registerApplication({
  name: "@wps/home",
  app: () => System.import("@wps/home"),
  activeWhen: location => location.pathname === '/',
});

5.Como passar props ao app filho a partir do root?

A função registerApplication tem parâmetros para passar dados customizados em forma de objeto quando está se registrando por meio da propriedade "customProps".

registerApplication({
  name: "@wps/home",
  app: () => System.import("@wps/home"),
  activeWhen: ["/"],
  customProps: { authToken: 'd83jD63UdZ6RS6f70D0' },
});

6.Como associar um filho a uma rota?

Essa associação é feita por meio da propriedade "activeWhen" quando o registro é feito no arquivo javascript ou pela tag "route" no arquivo ejs.

    registerApplication({
      name: "@wps/home",
      app: () => System.import("@wps/home"),
      activeWhen: ["/home"],
      customProps: { authToken: 'd83jD63UdZ6RS6f70D0' },
    });

    <!-- index.ejs -->
    <route path="home">
      <application name="@wps/home"></application>
    </route>

7.Como definir a ordem de exibição de filhos em mesma rota?

Usando customProps e passando o elemento do dom a que deseja associar aquele app.

    <main>
      <div id="home">
      </div>
    </main>

    registerApplication({
      name: "@wps/home",
      app: () => System.import("@wps/home"),
      activeWhen: ["/home"],
      customProps: { domElement: document.getElementById('home') },
    });

8.Como funciona o processo de deploy?

Cada microfrontend é hospedado na nuvem, usando por exemplo o s3, e pode ter uma CI para realizar o processo de integrar atualizações que serão disponibilizadas.

Nesse processo é importante criar um import map correto que referencie os nossos microfrontends já hospedados, assim como nossas dependências compartilhadas, podemos fazer isso por meio de um arquivo json e importar no root na tag do script "systemjs-importmap".

Referências:

How to Develop and Deploy Micro-Frontends with Single-SPA

Site Oficial do Single-SPA

Introdução ao front-end

Willane Paiva — Wed, 20 Jan 2021 11:30:17 +0000

A ideia aqui é explicar sucintamente o que é o front-end, quais tópicos engloba, além de comentar sobre a história da web e como isso o impactou.

O que é front-end

É uma das áreas do desenvolvimento, responsável pela interação com o usuário. Poderíamos dizer então que é o visual de uma aplicação.

A base

A base seriam as tecnologias que são usadas como pilar para o que vai ser desenvolvido, seja de forma isolada ou com o uso de frameworks, considerada por onde seria ideal começar a estudar ao ingressar na área. No front-end temos como base o html, o CSS e o JavaScript.

Html

Sigla para HyperText Markup Language ou Linguagem de marcação de hipertexto, é uma linguagem usada para estruturar o código e ser interpretada pelo browser para gerar a representação visual do que foi feito. Essa interpretação gera um interface, chamada DOM, que permite alterar os dados de forma dinâmica.

Exemplo:

Resultado:

CSS

Sigla para Cascading Style Sheet, é uma linguagem usada para definir estilos, nos permitindo definir cores para textos, imagens de fundos e como ela vai ser posicionada, colocar espaçamentos entre parágrafos, animações dentre várias outras coisas. Ele pode usado diretamente no componente, também pode ficar dentro da parte de estilo do html ou em arquivo separado.

Exemplo:

hello, world"/>
Resultado:

hello, world"/>

Javascript

O javascript é uma linguagem de programação usada para dar dinamismo a página, nos possibilitando fazer ainda mais coisas quando aliada ao html e css.

Por exemplo, vamos imaginar uma página de compras, uma cliente escolhe um produto e compra 2 unidades do mesmo e precisamos calcular o valor total, como vai fazer essa conta e mostrar para ela quanto iremos gastar?

Ai que entra o javascript, podemos pegar da página o preço por unidade e quantas unidades foram selecionadas, multiplicar os dois valores e inserir na página o resultado.

Exemplo:

História da web

A inspiração surgiu na década de 60, onde tinha-se uma rede local criada pelo departamento de defesa dos Estados Unidos e usada para interesses militares, onde desejava-se manter a fluência na comunicação.
A ideia de web como temos hoje foi apresentada em 1989 por Tim Berners-Lee, que tinha como objetivo compartilhar informações entre cientistas do CERN (Centro Europeu de Pesquisa Nuclear).

Primeiro site O primeiro site foi o http://info.cern.ch/hypertext/WWW/TheProject.html, criado pelo Tim Berners-Lee. Era usado pelo CERN em 1991 e tinha como objetivo explicar como funcionaria a internet, nesse momento Tim observou que a internet deveria ser livres de custos de uso para se tornar popular.

A partir dai, a internet foi evoluindo e aumentando o número de usuários, levando então ao surgimento de blogs (The Globe), redes sociais.
Alguns das primeiras redes sociais:

Classmates: Usada para usuários encontrarem seus colegas de diferentes níveis de ensino.
Fotolog: usado para postar fotos com um breve texto, geralmente uma por dia, similar ao instagram. Surgiu em 2012, tendo saido do ar 4 anos depois.
LinkedIn: rede social voltada para profissionais, surgiu em 2013 e segue no ar até os dias atuais.
MySpace: rede social fundada em 2003.
Orkut: rede social que permitia a criação de perfil personalizado e participação/criação de comunidade.
Facebook: rede social fundada em 2004.

No Brasil, chegou através das universidades brasileiras trocavam informações com os Estados Unidos. De 1989 em diante que foi divulgando e expandindo por todo o país.

Como o front-end evoluiu com a web

O front-end começou com os webdesign e webmaster, que cuidavam do design e interação com o usuário no caso do primeiro, e interação com servidor e banco de dados no caso do segundo. Surgiram então os plugins que permitiam fazer mais coisas, como lidar com multimídia (vídeos, imagens, animações mais avançadas), alguns exemplos: flash, real player, quickTime.

Posteriormente, tivemos a popularização dos celulares, que levou a surgimento de bibliotecas e frameworks focados no desenvolvimento mobile e preocupação com suporte a várias resoluções.

Outra evolução que tivemos foi com relação ao css, que ficou mais poderoso. Algumas mudanças:
- Propriedades e seletores: surgiram novos que possibilitaram mais opções de display (flex e grid), novas medidas de referência (vh, vw, rem), seletores de filhos e vários outros
- Pré e pós processadores:
- Pré: atua antes da compilação, adiciona funcionalidades extras e altera como será construído o código
- Pós: atua na manutenção dos códigos, removendo comentários, gerando versões de acordo com o navegador

Frameworks/bibliotecas atuais

Os frameworks surgiram como uma forma de agilizar a construção de sites e mudaram a forma como o usuário interage, como as SPA (single page application), que fazem toda a aplicação em uma única página e navega-se dentro dela, não necessitando de carregamento por completo quando algo for alterado.

Para começar a usar esses frameworks é necessária uma base boa em html, CSS e JavaScript, já que são usados para construir a aplicação. É importante lembrar que por mais que a base entre os frameworks seja a mesma e possuam alguns conceitos em comum, eles diferem em como os arquivos são estruturados internamente, como lidam com as atualizações e com adição de novas funcionalidades.

Pensando assim, existem frameworks específicos para problemas específicos, por exemplo: existem alguns que seriam mais adequados para construir um blog, outros para uma aplicação financeira.

Exemplos de frameworks/libs:

React
Vue
Gatsby
Svelte
E vários outros

O que engloba o front-end

Acessibilidade

É importante que todas as pessoas com algum tipo de restrição( baixa, nenhuma visão, deficiência física entre outras) consigam acessar a página normalmente, para isso usamos descrições adequadas para elementos da página, texto alternativo para imagens dentre outras técnicas e podemos ter um indicativo de quão acessível nossa página está usando ferramentas, como o lighthouse da google, que está disponível no google chrome ao inspecionar.
Performance

Garantir que quem esteja usando não tenha problemas de lentidão.
Testes

Ajudam a verificar o comportamento esperado do o que foi feito. Exemplo: um campo de entrada mudou com o valor passado no teste corretamente.
Responsividade

Permite visualizar a aplicação da melhor forma dependendo do tipo de dispositivo que está (celular, tablet, pc etc)
Segurança

Prevenir ataques de pessoas mal-intencionadas. Exemplo: alguém tenta roubar dados de um formulário.

Referências

https://stackoverflow.blog/2020/02/03/is-it-time-for-a-front-end-framework/

https://news.comschool.com.br/primeiro-site-do-mundo-completa-26-anos/

https://magazine.softerize.com.br/artigos/outros-artigos/revolucao-front-end-nos-ultimos-10-anos

https://www.weblink.com.br/blog/historia-da-internet/

DEV Community: Willane Paiva

Flutter: Armazenamento de dados

Tipos de dados

Dados simples

Dados criptografados

Principais pacotes

SharedPreferences

FlutterSecureStorage

Considerações finais

Flutter: Essential widgets

Essential Widgets

Text

Container

SizedBox

Padding

Column

Row

SingleChildScrolView

References

Observabilidade em aplicações móveis

Logs

Alertas

Ferramentas

Exemplo em flutter

Referências

O que é Design system e por que usar

O que é um design system?

Exemplo

Pontos ao considerar se irá ou não ter um design system

Considerações finais

Widgets essenciais do flutter

Widgets essenciais

Text

Container

SizedBox

Padding

Column

Row

SingleChildScrolView

Referência

Flutter & Nuvigator: Intro with routers and parameters

What's nuvigator?

Example

Installing the package

Building the app

Using a router

Passing parameters to details screen

Flutter & Nuvigator: Intro com routers e parâmetros

O que é o nuvigator?

Exemplo

Instalando o pacote

Construindo o app

Usando um router

Passando parâmetros para a tela de details

Melhorando performance no react native com objetos

Vantagens de usar objeto

Improving performance in React native with object

Benefits of using the object

VSCode Setup for development

1. Improving visual hiding lateral bar, title bar and minimap

1.1. Adding keyboard shortcuts

1.2 Hiding the bars in settings

2. Adding JetBrains Mono with ligatures

2.1 Installing the font on your computer

2.2. Using it on VSCode

3. Additional settings

4. Adding extensions

4.1 General:

4.2 React Development:

4.3 Themes:

4.4 Flutter:

Principais conceitos do Single-SPA

Tabela de conteúdos

1.O que é?

2.Como usar?

3.Como funciona?

4.Como adicionar um app filho ao root?

5.Como passar props ao app filho a partir do root?

6.Como associar um filho a uma rota?

7.Como definir a ordem de exibição de filhos em mesma rota?