DEV Community: Enrique Marques Junior

Trabalhando com valores monetários em Apps Flutter

Enrique Marques Junior — Tue, 08 Oct 2024 17:11:42 +0000

Trabalhar com valores monetários em aplicativos é uma parte crítica do desenvolvimento, especialmente em soluções de e-commerce, fintechs e apps que lidam com finanças. É necessário cuidado adicional ao trabalhar com operações de moeda para evitar problemas como arredondamento incorreto, perda de precisão ou conversões inadequadas.

Evitando o Uso de `double` para Valores Monetários

No Dart, o tipo double é frequentemente utilizado para representar números float. Porem, este não é o tipo adequado para valores monetários, pois números em ponto flutuante introduzem imprecisões. Por exemplo:

void main() {
  final double value = 0.1 + 0.2;
  print(value); // Output: 0.30000000000000004
}

Essa imprecisão pode parecer insignificante em alguns casos, mas pode ter relevancia quando se trata de valores financeiros.

Usar Inteiros para Representar Centavos

Uma prática é representar valores monetários em centavos utilizando int, evitando o uso de decimais e a imprecisão associada a double. Por exemplo, R$ 12,34 seria representado como 1234.

void main() {
  final int value = 1234;
  final double decimal = value / 100;
  print(decimal); // Output: 12.34
}

Usando a Biblioteca `intl` para Formatação Monetária

A biblioteca intl é uma ferramenta boa para lidar com internacionalização e formatação de números, inclusive valores monetários. Ela permite formatar números com o símbolo de moeda correto e de acordo com as convenções locais.

Exemplo de Formatação de Valores Monetários

import 'package:intl/intl.dart';

void main() {
  final int value = 1234;
  final format = NumberFormat.simpleCurrency(locale: 'pt_BR').format;
  final double decimal = value / 100;

  print(format(decimal)); // Output: R$12,34
}

Aqui, usamos NumberFormat.simpleCurrency com a localidade brasileira (pt_BR) para formatar o valor corretamente em reais.

3. Operações Seguras com Moeda

Operações financeiras como adição, subtração, multiplicação e divisão precisam ser feitas com cautela para evitar erros de precisão. A melhor prática é realizar todas as operações em centavos e, somente para exibição, converter o valor para o formato apropriado.

Exemplo de Adição de Valores Monetários

void main() {
  final int value = 1234; // R$12,34
  final int value2 = 5678; // R$56,78
  final int sum = value + value2;
  print('Soma em centavos: $sum'); // Output: 6912
  final double decimal = sum / 100;
  print('Soma em reais: $decimal'); // Output: 69.12
}

Exemplo: Aplicando Desconto

void main() {
  final int original = 10000; // R$100,00
  final double discount = 0.15; // 15%

  final int total = (original * (1 - discount)).round();
  print('Valor com desconto: ${total / 100}'); // Output: 85.00
}

Aqui usamos a função round() para garantir que o valor seja arredondado corretamente após a aplicação do desconto, evitando problemas de precisão.

Exemplo de Arredondamento

import 'package:intl/intl.dart';

void main() {
  final double value = 1234.56789;
  final formatter = NumberFormat("#,##0.00", "pt_BR");

  print(formatter.format(value)); // Output: 1.234,57
}

Mascara de Valores

No Flutter, podemos utilizar o pacote extended_masked_text para aplicar uma máscara ao valor digitado, permitindo que ele seja formatado automaticamente enquanto o usuário insere a quantia.

Exemplo de TextField com máscara e validação:

import 'package:flutter/material.dart';
import 'package:extended_masked_text/extended_masked_text.dart';
import 'package:intl/intl.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Validação de Valores Monetários'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: MonetaryTextField(),
        ),
      ),
    );
  }
}

class MonetaryTextField extends StatefulWidget {
  const MonetaryTextField({super.key});

  @override
  createState() => _MonetaryTextFieldState();
}

class _MonetaryTextFieldState extends State<MonetaryTextField> {
  final _controller = MoneyMaskedTextController(leftSymbol: 'R\$ ');

  String? _errorText;

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      keyboardType: TextInputType.number,
      decoration: InputDecoration(
        labelText: 'Valor',
        border: const OutlineInputBorder(),
        errorText: _errorText,
      ),
      inputFormatters: [
        FilteringTextInputFormatter.digitsOnly,
      ],
      onChanged: (value) {
        setState(() {
          _errorText = _validateInput(value);
        });
      },
    );
  }

  String? _validateInput(String value) {
    if (value.isEmpty) {
      return 'Por favor, insira um valor';
    }

    final numericValue = _controller.numberValue;
    if (numericValue <= 0) {
      return 'O valor deve ser maior que zero';
    }

    return null;
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Conversão de Valores para Centavos

final int value = (_controller.numberValue * 100).round()

Exemplo: se o usuário inserir 1,234.56, o valor será convertido para 123456 centavos, garantindo que o dado seja armazenado corretamente.

Armazenando a Moeda

Além de salvar o valor em centavos, é essencial armazenar a moeda associada a esse valor. Aplicativos frequentemente lidam com múltiplas moedas e associar cada valor à sua moeda permite o tratamento correto nas operações e na exibição.

Por exemplo, para um produto com preço em dólares:

Valor em centavos (int): 4567 (representando $45.67)
Moeda (string): USD

Isso garante que, ao exibir o valor ao usuário, o aplicativo possa formatá-lo corretamente como $45.67, preservando a moeda adequada.

Extra: packages

Aqui estão alguns pacotes que ajudam a lidar com valores monetários em Dart, fornecendo soluções mais robustas para cálculos financeiros, formatação e manipulação de moedas:

1. money2

O pacote money2 oferece uma API completa para lidar com valores monetários em qualquer moeda. Ele ajuda a resolver problemas comuns de precisão e formatação ao trabalhar com valores financeiros.

Recursos principais:

Representação de valores em diferentes moedas.
Manipulação segura de operações financeiras.
Arredondamento configurável e suporte para múltiplas casas decimais.
Integração com intl para formatação.

Exemplo:

import 'package:money2/money2.dart';

void main() {
  final currency = Currency.create('BRL', 2, symbol: 'R\$');
  final value = Money.fromInt(12345, currency); // R$123,45
  print(value.format('S0.00')); // Output: R$123.45
}

2. decimal

O pacote decimal é ideal para quem precisa de precisão exata em operações numéricas, evitando as limitações do tipo double. É muito útil em cálculos financeiros onde a precisão é crítica.

Recursos principais:

Suporta números com precisão arbitrária.
Ideal para cálculos que envolvem valores monetários grandes ou complexos.

Exemplo:

import 'package:decimal/decimal.dart';

void main() {
  final value1 = Decimal.parse('10.25');
  final value2 = Decimal.parse('20.35');
  final result = value1 + value2;

  print(result); // Output: 30.60
}

3. money_formatter

O money_formatter é um pacote simples e eficiente para formatação de valores monetários, fornecendo diferentes opções de exibição e manipulação. Ele é útil se você precisa apenas de formatação, sem operações matemáticas complexas.

Recursos principais:

Formatação flexível e suporte para múltiplas moedas.
Suporte para arredondamento e exibição de valores em diferentes formatos.

Exemplo:

import 'package:money_formatter/money_formatter.dart';

void main() {
  final fmf = MoneyFormatter(amount: 1234567.89);
  print(fmf.output.symbolOnLeft); // Output: $1,234,567.89
}

4. currency_formatter

O currency_formatter é outra alternativa para lidar com a formatação de valores monetários, mas ele também inclui opções de conversão entre moedas, o que pode ser útil se o seu aplicativo precisa exibir múltiplas moedas.

Recursos principais:

Conversão de moedas usando taxas de câmbio.
Formatação de moedas com suporte para diferentes locais.

Exemplo:

import 'package:currency_formatter/currency_formatter.dart';

void main() {
  final formatter = CurrencyFormatter();
  final formattedValue = formatter.format(123456.78, CurrencyFormatterSettings(symbol: 'R\$', symbolSide: SymbolSide.left));

  print(formattedValue); // Output: R$123,456.78
}

É isso! :)

Foto de Eric Prouzet na Unsplash

Flutter: Construindo apps temáticas!

Enrique Marques Junior — Mon, 09 Jan 2023 17:35:00 +0000

O Flutter é uma plataforma de desenvolvimento de aplicativos que permite a criação de interfaces visuais atrativas e intuitivas. Neste artigo, vamos descrever como "estilizar" um aplicativo Flutter utilizando apenas (na maioria dos casos) a classe ThemeData.

Com essa abordagem, é possível estilizar seu aplicativo sem quebrar os widgets padrão ou sujando os widgets com estilos próprios. Além disso, é possível criar a base de estilos para light/dark modes e garantir que as cores do aplicativo sejam exibidas corretamente no modo escuro. E, por fim, é possível ter diversos temas em seu aplicativo, bastando apenas trocar o ThemeData atual pelo desejado.

Utilizando ThemeData

A classe ThemeData é uma classe do Flutter que permite customizar a aparência dos widgets do nosso aplicativo. Ela possui diversas propriedades que permitem alterar aspectos visuais do aplicativo, como cores, fontes, efeitos de sombra, entre outros.

A seguir, algumas das principais propriedades da classe ThemeData:

primaryColor: Define a cor principal do aplicativo. Essa cor é utilizada em elementos como botões, guias e seções de cabeçalho.
accentColor: Define a cor de destaque do aplicativo. Essa cor é utilizada em elementos como botões e links.
scaffoldBackgroundColor: define a cor de fundo dos widgets Scaffold.
appBarTheme: Define o estilo da barra de título (AppBar).
textTheme: Define o estilo dos textos do aplicativo.
buttonTheme: Define o estilo dos botões do aplicativo.

Para utilizar a classe ThemeData, basta passá-la como um argumento para o widget MaterialApp ou CupertinoApp na raiz do aplicativo. Veja abaixo:

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.purple,
    scaffoldBackgroundColor: Colors.grey[200],
  ),
  home: MyApp(),
);

ColorSchemes e Material 3

Também vale falar da propriedade colorSchemes que também afeta alguns componentes e partes do app.

No Material 3, o conceito de esquemas de cor foi expandido para incluir mais opções de cores e permitir que os aplicativos se adaptem melhor às preferências do usuário.

Na versão mais recente do Flutter, é possível utilizar os esquemas de cor do Material 3 utilizando a classe ColorScheme, veja algumas propriedades abaixo:

primary: a cor principal do esquema de cor.
primaryVariant: uma variação da cor principal do esquema de cor.
secondary: a cor secundária do esquema de cor.
secondaryVariant: uma variação da cor secundária do esquema de cor.
background: a cor de fundo do esquema de cor.
surface: a cor da superfície do esquema de cor.
error: a cor de erro do esquema de cor.
onPrimary: a cor do texto quando colocado sobre a cor principal.
onSecondary: a cor do texto quando colocado sobre a cor secundária.
onBackground: a cor do texto quando colocado sobre a cor de fundo.
onSurface: a cor do texto quando colocado sobre a cor da superfície.
onError: a cor do texto quando colocado sobre a cor de erro.

Para utilizar, basta passar o um ColorScheme como colorScheme do ThemeData na raiz do aplicativo e adicionar useMaterial: true para habilitar o Material 3. Veja abaixo:

MaterialApp(
  theme: ThemeData.light(useMaterial3: true).copyWith(
      colorScheme: ColorScheme.light(
      primary: Colors.purple,
      primaryVariant: Colors.deepPurple,
      secondary: Colors.pink,
      secondaryVariant: Colors.red,
      background: Colors.white,
      surface: Colors.grey[50],
      onPrimary: Colors.white,
      onSecondary: Colors.black,
      onBackground: Colors.black,
      onSurface: Colors.black,
      onError: Colors.white,
    ),
    primaryColor: Colors.purple,
    scaffoldBackgroundColor: Colors.grey[200],
  ),
  home: MyApp(),
);

Dessa forma, o aplicativo utilizará o Material 3 e os widgets padrão (como os widgets AppBar, Button, Text, entre outros) terão sua aparência alterada de acordo com o esquema de cor definido.

Vantagens

Para garantir uma estilização consistente e manutenível em seu aplicativo, é importante evitar a tentação de criar estilos "do zero" diretamente nos widgets.

A classe ThemeData é uma das formas mais simples e eficientes de estilizar o seu aplicativo Flutter. Dessa forma, você pode ter certeza de que está aproveitando todas as propriedades importantes e garantindo a consistência visual em todo o seu aplicativo. Além disso, utilizar o ThemeData também torna mais fácil alterar a aparência do seu aplicativo em um único lugar, em vez de ter que fazer alterações individuais em cada widget.

Pontos principais:

Consistência visual: Ao definir os estilos em um único lugar, é mais fácil garantir que todo o seu aplicativo tenha uma aparência consistente e coerente. Isso é especialmente importante para aplicativos com muitos widgets diferentes e complexos.

Dark e light modes: Permite que você defina estilos específicos para o modo claro e escuro, o que é útil se o seu aplicativo oferecer a opção de alterar o modo de exibição para o usuário. Dessa forma, é mais fácil garantir que o aplicativo tenha uma aparência consistente em ambos os modos, sem precisar definir estilos separadamente em cada widget.

Alterar o tema atual: Se você precisar alterar o tema atual do aplicativo (por exemplo, se o usuário alterar as preferências de tema), é mais fácil fazer isso ao utilizar o ThemeData, pois você só precisa alterar os estilos em um único lugar. Fora os if :P.

É isso! Valeu!

NeoVim: init.lua, built in LSP e mais

Enrique Marques Junior — Thu, 21 Oct 2021 12:56:08 +0000

Preparei este post para quem quer migrar totalmente suas configurações para lua (nvim 0.5+) ou tá começando a configurar seu nvim hoje. ;)

Primeiro, você precisa escolher seu plugin management, eu escolhi usar o paq-nvim mas pode ser qualquer outro, tipo o packer.

Depois de instalar seu plugin manager, vamos criar os primeiros arquivos de configuração: init.lua, lua/settings.lua e lua/keymaps.lua.

init.lua

É a entrada da suas configurações, vamos utilizar para importar as configurações em arquivos separados, assim fica mais organizado.

-- Settings & Keys
require 'settings'
require 'keymaps'

lua/settings.lua

Concentra as configurações mais básicas

local g = vim.g
local opt = vim.opt
local cmd = vim.cmd

-- General
opt.compatible = false
opt.mouse = 'a'
opt.clipboard = 'unnamedplus'
opt.swapfile = false
opt.hidden = true
opt.history = 100
opt.lazyredraw = true
opt.synmaxcol = 240

-- Theme
opt.termguicolors = true

-- Editor
opt.number = true
opt.wrap = false
opt.signcolumn = 'yes'
opt.showmatch = true
opt.showmode = false
opt.foldmethod = 'marker'
opt.splitright = true
opt.splitbelow = true
opt.conceallevel = 0
opt.colorcolumn = '80'
opt.cursorline = true
opt.scrolloff = 10
opt.expandtab = true
opt.shiftwidth = 2
opt.tabstop = 2
opt.smartindent = true
opt.shortmess:append {c = true}

lua/keymaps.lua

Concentra os atalhos gerais e da maioria dos plugins. Existem casos, como o lsp, que os mappings são adicionados no on_attach no arquivo de configuração do lsp.

local set = vim.api.nvim_set_keymap
local ns = { noremap = true, silent = true }

-- Command
set("n", ";", ":", { noremap = true })

-- Clean Search
set("n", "<Leader><Space>", ":let @/=''<CR>", ns)

-- Window
set("n", "<C-j>", ":resize -2<CR>", ns)
set("n", "<C-k>", ":resize +2<CR>", ns)
set("n", "<C-h>", ":vertical resize -2<CR>", ns)
set("n", "<C-l>", ":vertical resize +2<CR>", ns)
set("n", "<Leader>h", ":<C-u>split<CR>", ns)
set("n", "<Leader>v", ":<C-u>vsplit<CR>", ns)

-- Moving
set("n", "j", "gj", ns)
set("n", "k", "gk", ns)

...

Plugins

Pra começar, vamos criar um arquivo lua/plugins/paq.lua e adicionar paq-nvim e o nvim-lua/plenary.vim que é requisito para o funcionamento de outros plugins:

require('paq') {
  'savq/paq-nvim';
  'nvim-lua/plenary.nvim';
}

Adicionamos o arquivo no init.lua:

...
-- Plugins
require 'plugins.paq'
...

:luafile % para atualizar o nvim e os comandos :PaqInstall e :PaqSync estarão lá.

A seguir, separei alguns plugins como sugestão:

Editor

Para melhorar a experiência com o editor eu sugiro:

...
  -- Editor
  'windwp/nvim-autopairs';
  'tpope/vim-surround';
  'tpope/vim-commentary';
  'tpope/vim-repeat';
  'pbrisbin/vim-mkdir';
  'RRethy/vim-illuminate';
...

Visual

Para deixar seu nvim com um visual mais interessante:

...
  -- Visual
  'glepnir/dashboard-nvim';
  'TaDaa/vimade';
  'famiu/feline.nvim';
  'kyazdani42/nvim-web-devicons';
  'kyazdani42/nvim-tree.lua';
  'nvim-telescope/telescope.nvim';
  'akinsho/bufferline.nvim';
  'Yggdroot/indentLine';
  'nvim-treesitter/nvim-treesitter';
...

Lsp: Install e Config

Com os plugins neovim/nvim-lspconfig e williamboman/nvim-lsp-installer vamos configurar e instalar os servers de cada linguagem.

Para que algum servidor comece a funcionar é necessário que ele seja instalado e inicializado, a maneira mais fácil de fazer isso é buscando todas instaladas:

lua/plugins/lsp-config.lua

local lsp_installer = require("nvim-lsp-installer")
lsp_installer.on_server_ready(function (server) server:setup {} end)

Para instalar:
:LspInstall <server> ou :LspInstallInfo e navegue nos servidores da lista pressionando i para instalar. Com :LspInfo você consegue ver o nome dos servidores (para adicionar ao setup).

Para os atalhos funcionarem, vamos adicionar a função on_attach no setup do lspconfig:

local ns = { noremap = true, silent = true }
local on_attach = function(_, bufnr)
  local function buf_set_keymap(...) vim.api.nvim_buf_set_keymap(bufnr, ...) end
  local function buf_set_option(...) vim.api.nvim_buf_set_option(bufnr, ...) end

  buf_set_option('omnifunc', 'v:lua.vim.lsp.omnifunc')
  buf_set_keymap('n', 'gD', '<cmd>lua vim.lsp.buf.declaration()<CR>', ns)
  buf_set_keymap('n', 'gf', '<cmd>lua vim.lsp.buf.definition()<CR>', ns)
  buf_set_keymap('n', 'K', '<cmd>lua vim.lsp.buf.hover()<CR>', ns)
  buf_set_keymap('n', '<C-k>', '<cmd>lua vim.lsp.buf.signature_help()<CR>', ns)
  buf_set_keymap('n', '<space>wa', '<cmd>lua vim.lsp.buf.add_workspace_folder()<CR>', ns)
  buf_set_keymap('n', '<space>wr', '<cmd>lua vim.lsp.buf.remove_workspace_folder()<CR>', ns)
  buf_set_keymap('n', '<space>wl', '<cmd>lua print(vim.inspect(vim.lsp.buf.list_workspace_folders()))<CR>', ns)
  buf_set_keymap('n', '<space>rn', '<cmd>lua vim.lsp.buf.rename()<CR>', ns)
  buf_set_keymap('n', '<space>ca', '<cmd>lua vim.lsp.buf.code_action()<CR>', ns)
  buf_set_keymap('n', 'gi', '<cmd>lua vim.lsp.buf.implementation()<CR>', ns)
  buf_set_keymap('n', 'gr', '<cmd>lua vim.lsp.buf.references()<CR>', ns)
  buf_set_keymap('n', '<space>e', '<cmd>lua vim.lsp.diagnostic.show_line_diagnostics()<CR>', ns)
  buf_set_keymap('n', '[d', '<cmd>lua vim.lsp.diagnostic.goto_prev()<CR>', ns)
  buf_set_keymap('n', ']d', '<cmd>lua vim.lsp.diagnostic.goto_next()<CR>', ns)
  buf_set_keymap('n', '<space>q', '<cmd>lua vim.lsp.diagnostic.set_loclist()<CR>', ns)
  buf_set_keymap('n', '<space>f', '<cmd>lua vim.lsp.buf.formatting()<CR>', ns)
end

local lsp_installer = require("nvim-lsp-installer")
lsp_installer.on_server_ready(
  function (server)
    local opts = {
      on_attach = on_attach,
    }
    server:setup(opts)
    vim.cmd [[ do User LspAttachBuffers ]]
  end
)

:h lsp para mais informações e :checkheath para verificar se está tudo correto :)

Lsp-cmp

O lsp-cmp é responsável por adicionar a funcionalidade de “auto-complete”, exibindo sugestões ao digitar ou solicitar via comando/atalho.

Após instalar o plugin, precisamos adicionar a seguinte configuração no nosso lspconfig (lua/plugins/lsp-config.lua).

Vamos passar uma nova opção capabilities nas opções do server setup:

local capabilities = require'cmp_nvim_lsp'.update_capabilities(
  vim.lsp.protocol.make_client_capabilities()
)

...

local opts = {
  on_attach = on_attach,
  capabilities = capabilities,
}
...

Para o funcionamento do nvim-cmp, criei um arquivo plugins/cmp.lua com as seguintes configurações:

local cmp = require'cmp'

cmp.setup{
  completion = {
    completeopt ='menu,menuone,noinsert',
  },
  experimental = {
    ghost_text = true,
  },
  mapping = {
    ['<CR>'] = cmp.mapping.confirm({
      behavior = cmp.ConfirmBehavior.Replace,
      select = true,
    }),
    ['<C-d>'] = cmp.mapping.scroll_docs(-4),
    ['<C-f>'] = cmp.mapping.scroll_docs(4),
    ['<C-Space>'] = cmp.mapping.complete(),
    ['<C-e>'] = cmp.mapping.close(),
    ["<Tab>"] = cmp.select_next_item({
      behavior = cmp.SelectBehavior.Select
    }),
    ["<S-Tab>"] = cmp.select_prev_item({
      behavior = cmp.SelectBehavior.Select
    }),
  },
  sources = {
    { name = 'nvim_lsp' },
  }
}

Desta forma a caixa de sugestão vai aparecer sempre que você começar a digitar e é possível navegar entre as opções com o Tab/S-Tab e selecionar com o Enter.

No meu repositório pessoal, o cmp.lua esta configurado com alguns adicionais como a integração com o LuaSnip.

Meu nvim-config

Você pode ver minhas configs atuais no repositório:

enriquesaid / nvim-config

my nvim config

nvim-config

my nvim config

requirements

nvim 0.5+ 🤪
paq-nvim

color scheme

dracula

install

:PaqInstall
:PaqSync

:LspInstall lua
:LspInstall typescript
:LspInstall html
:LspInstall css

:TSInstall lua
:TSInstall javascript
:TSInstall typescript
:TSInstall json
:TSInstall html
:TSInstall css
:TSInstall yaml
:TSInstall dart

View on GitHub

Neovim: Migrando do coc.vim para nvim-lsp

Enrique Marques Junior — Sun, 16 May 2021 18:02:34 +0000

A versão 0.5 do Neovim (nightly build) traz algumas mudanças como a integração do Lua como uma linguagem de primeira classe e o suporte a LSP embutido. Adeus CoC!

Você pode obter a versão 0.5 do Neovim aqui ou via homebrew:

$ brew unlink neovim
$ brew install neovim --HEAD
$ nvim --version

Migrando suas configurações para Lua

Vale dar uma passada pelo guia de primeiros passos usando Lua no Neovim e começar a migrar aos poucos suas configurações.

Exemplo do meu init.lua:

vim.g.mapleader = ','
vim.api.nvim_set_keymap("n", ";", ":", { noremap = true })

vim.cmd [[
  source ~/.config/nvim/config.vim
  source ~/.config/nvim/plugins.vim
  source ~/.config/nvim/settings.vim
  source ~/.config/nvim/keymappings.vim
]]

require'config.lsp'
-- ... configs

Escolhi mudar o init.vim para init.lua e aos poucos ir migrando cada .vim. Também mantenho por enquanto o mesmo gerenciador de plugins (vim-plug), então vamos instalar os novos plugins também por ele.

Configurando o LSP

A primeira coisa que precisamos fazer é instalar os plugins:

neovim/nvim-lspconfig e kabouzeid/nvim-lspinstall para configurar e instalar os servers de cada linguagem;
hrsh7th/nvim-compe para o auto completion
glepnir/lspsaga.nvim para exibir melhor as mensagens e popups

Instalação, Inicialização e Comandos

Para que algum servidor comece a funcionar é necessário que ele seja instalado e inicializado no seu init.lua. Com o nvim-lspinstall podemos instalar com o comando :LspInstall <linguagem>.

Utilizando no exemplo o tsserver, vamos instalar com o comando :LspInstall typescript (lista ref) e para iniciar os servidores que instalamos o seguinte trecho (em lua) é necessário:

require'lspsaga'.init_lsp_saga()
require'lspinstall'.setup()
local servers = require'lspinstall'.installed_servers()
for _, server in pairs(servers) do
  require'lspconfig'[server].setup{}
end

Com isso você já terá o LSP rodando e pode testar abrindo um arquivo .ts ou .tsx e executar o comando :LspInfo. O lspconfig também vai aparecer no comando :checkhealth então vale a pena executa-lo para verificar se está tudo ok.

Para configurar os atalhos você precisará passar uma função on_attach no setup do lspconfig, exemplo:

local on_attach = function(client, bufnr)
-- ...mappings
end

require'lspinstall'.setup()
local servers = require'lspinstall'.installed_servers()
for _, server in pairs(servers) do
  require'lspconfig'[server].setup{ on_attach = on_attach }
end

Com os mappings:

local on_attach = function(_, bufnr)
  local function buf_set_keymap(...) vim.api.nvim_buf_set_keymap(bufnr, ...) end
  local function buf_set_option(...) vim.api.nvim_buf_set_option(bufnr, ...) end
  local opts = { noremap = true, silent = true }

  buf_set_option('omnifunc', 'v:lua.vim.lsp.omnifunc')
  buf_set_keymap('n', '<leader>ca', ':Lspsaga code_action<CR>', opts)
  buf_set_keymap('v', '<leader>ca', ':Lspsaga range_code_action<CR>', opts)
  buf_set_keymap('n', '<leader>rn', ':Lspsaga rename<CR>', opts)
  buf_set_keymap('n', 'K', ':Lspsaga hover_doc<CR>', opts)
  buf_set_keymap('n', 'dn', ':Lspsaga diagnostic_jump_next<CR>', opts)
  buf_set_keymap('n', 'dp', ':Lspsaga diagnostic_jump_prev<CR>', opts)
  buf_set_keymap('n', 'gf', ':lua vim.lsp.buf.definition()<CR>', opts)
end

require'lspinstall'.setup()
local servers = require'lspinstall'.installed_servers()
for _, server in pairs(servers) do
  require'lspconfig'[server].setup{ on_attach = on_attach }
end

Comandos:

<leader>ca: Abre pop-up com as Code Actions
<leader>rn: Para renomear símbolo
K: Exibe a referência/documentação da seleção ou posição do cursor
dn e dp: Navega entre os diagnósticos
gf: Navegação de código

Mais comandos: aqui

Se você precisar configurar algo especifico para algum servidor, lembre-se de adicionar a chamada on_attach para manter os comandos, exemplo (para linguagem lua):

require'lspconfig'.lua.setup {
  on_attach = on_attach,
  settings = {
    Lua = {
      diagnostics = {
        globals = { 'vim' }
      }
    }
  }
}

Para as sugestões e o auto completion, certifique-se de que você tenha os plugins SirVer/ultisnips e hrsh7th/vim-vsnip para sugestões de snippets. E então adicione o seguinte trecho:

require'compe'.setup {
  enabled = true;
  preselect = 'disable';
  source = {
    path = true;
    buffer = true;
    calc = true;
    nvim_lsp = true;
    nvim_lua = true;
    vsnip = true;
    ultisnips = true;
    -- treesitter = true;
  };
}

local t = function(str)
  return vim.api.nvim_replace_termcodes(str, true, true, true)
end

local check_back_space = function()
  local col = vim.fn.col('.') - 1
  if col == 0 or vim.fn.getline('.'):sub(col, col):match('%s') then
    return true
  else
    return false
  end
end

vim.g.vsnip_filetypes = {
  typescriptreact = {"typescript"}
}

_G.tab_complete_next = function()
  if vim.fn.pumvisible() == 1 then
    return t "<C-n>"
  elseif vim.fn.call("vsnip#available", {1}) == 1 then
    return t "<Plug>(vsnip-expand-or-jump)"
  elseif check_back_space() then
    return t "<Tab>"
  else
    return vim.fn['compe#complete']()
  end
end
_G.tab_complete_prev = function()
  if vim.fn.pumvisible() == 1 then
    return t "<C-p>"
  elseif vim.fn.call("vsnip#jumpable", {-1}) == 1 then
    return t "<Plug>(vsnip-jump-prev)"
  else
    return t "<S-Tab>"
  end
end

local opt = { expr = true, silent = true}
vim.api.nvim_set_keymap("i", "<Tab>", "v:lua.tab_complete_next()", opt)
vim.api.nvim_set_keymap("s", "<Tab>", "v:lua.tab_complete_next()", opt)
vim.api.nvim_set_keymap("i", "<S-Tab>", "v:lua.tab_complete_prev()", opt)
vim.api.nvim_set_keymap("s", "<S-Tab>", "v:lua.tab_complete_prev()", opt)
vim.api.nvim_set_keymap("i", "<CR>", 'compe#confirm("<CR>")', opt)

Com isso você tem o autocomplete funcionando e a navegação mapeada com Tab/Shift+Tab e o Esc para fechar o pop-up.

Obs: Caso você utilize o treesitter, remova o comentário das opções do setup.

É isso ☺️. Me diz ai o que achou e manda nos comentários como ficou seu nvim.

Abraços!

[pt-BR] NeoVim para Typescript

Enrique Marques Junior — Tue, 26 Jan 2021 12:11:15 +0000

Em outro post aqui eu descrevi como configurei o vim para trabalhar com Dart e Flutter. Da mesma forma, pretendo te ajudar a configurar o seu vim para trabalhar com typescript.

Suporte a linguagem

Considerando que você utilize o vim-plug para instalar os plugins para o seu vim. O primeiro passo é adicionar o suporte a linguagem:

Plug 'HerringtonDarkholme/yats.vim'

React

Se você vai utilizar React (arquivos .tsx):

Plug 'MaxMEllon/vim-jsx-pretty'

Plugins

Aqui você precisa considerar as ferramentas que você utiliza no seu dia-a-dia. Por exemplo, para quem utiliza styled-components é recomendado que se instale o suporte a syntax:

Plug 'styled-components/vim-styled-components', { 'branch': 'main' }

Vale considerar também o Prettier:

Plug 'prettier/vim-prettier'

Para o HTML, eu utilizo apenas o emmet:

Plug 'mattn/emmet-vim'

CoC

Com os plugins acima você vai conseguir desenvolver tranquilo, com syntax highlight e tudo mais. Porem, para obter recursos mais atuais como "go-to-definition", "autocomplete" e "auto import" precisamos instalar o CoC.

Plug 'neoclide/coc.nvim', {'branch': 'release'}

Indique as extensões que você irá utilizar:

let g:coc_global_extensions = [
  \ 'coc-snippets',
  \ 'coc-actions',
  \ 'coc-lists',
  \ 'coc-tsserver',
  \ 'coc-html',
  \ 'coc-css',
  \ 'coc-prettier',
  \ 'coc-vimlsp',
  \ ]

Você também pode instalar por dentro do neovim com o comando:

:CocInstall <extension-name>

CoC: Popup de sugestão

<Tab> para navegar e <Ctrl-Space> para abrir popup de sugestão:

inoremap <silent><expr> <TAB>
      \ pumvisible() ? "\<C-n>" :
      \ <SID>check_back_space() ? "\<TAB>" :
      \ coc#refresh()
inoremap <expr><S-TAB> pumvisible() ? "\<C-p>" : "\<C-h>"

function! s:check_back_space() abort
  let col = col('.') - 1
  return !col || getline('.')[col - 1]  =~# '\s'
endfunction

inoremap <silent><expr> <c-space> coc#refresh()

CoC: Renomear Símbolo

nmap <leader>rn <Plug>(coc-rename)

CoC: Navegação de código

nmap <silent> gf <Plug>(coc-definition)

CoC: Ações de Código

Exemplo de uso: <leader>aap para o parágrafo atual. <leader>aw para a palavra.

xmap <silent> <leader>a  <Plug>(coc-codeaction-selected)
nmap <silent> <leader>a  <Plug>(coc-codeaction-selected)

CoC: Lista de comandos, extensões e diagnósticos

nnoremap <silent> <space>a  :<C-u>CocList diagnostics<cr>
nnoremap <silent> <space>e  :<C-u>CocList extensions<cr>
nnoremap <silent> <space>c  :<C-u>CocList commands<cr>

Meu setup

Vou deixar aqui o repositório onde mantenho minha config. Além do que foi falado aqui você também vai encontrar o tema que eu uso e outras configurações pessoais. Vale pesquisar o da galera por ai também :)

enriquesaid / nvim-config

my nvim config

nvim-config

my nvim config

requirements

nvim 0.5+ 🤪
paq-nvim

color scheme

dracula

install

:PaqInstall
:PaqSync

:LspInstall lua
:LspInstall typescript
:LspInstall html
:LspInstall css

:TSInstall lua
:TSInstall javascript
:TSInstall typescript
:TSInstall json
:TSInstall html
:TSInstall css
:TSInstall yaml
:TSInstall dart

View on GitHub

Qualquer coisa estamos ai nos comentários 😄
Um abraço!

[pt-BR] Flutter no NeoVim

Enrique Marques Junior — Fri, 06 Nov 2020 00:26:57 +0000

Neste post descrevo como configurei meu vim para trabalhar com a linguagem Dart e o framework Flutter.

Suporte a linguagem

O básico é instalar o suporte a linguagem. Com isso já temos 'syntax highlighting' e 'indentation'.

❕instalação

Para mais detalhes sobre como instalar os plugins acesse o repositório do gerenciador vim-plug.

Para instalar o dart-vim-plugin:

Plug 'dart-lang/dart-vim-plugin'

Setup & Configurações

Se você já utilizou o VSCode, sabe que existe um plugin ~ eu diria que obrigatório ~ para integrar o editor ao Flutter. Para obter os mesmos benefícios no vim utilizei o coc.vim com a extensão coc-flutter.

CoC.vim & coc-flutter

Primeiro, instale o coc.vim:

Plug 'neoclide/coc.nvim', {'branch': 'release'}

Em seguida, instale a extensão para o Flutter.

:CocInstall coc-flutter

Você pode configurar o Ctrl+Space para abrir as janelas de sugestões.

Configuração:

inoremap <silent><expr> <TAB>
      \ pumvisible() ? "\<C-n>" :
      \ <SID>check_back_space() ? "\<TAB>" :
      \ coc#refresh()
inoremap <expr><S-TAB> pumvisible() ? "\<C-p>" : "\<C-h>"

function! s:check_back_space() abort
  let col = col('.') - 1
  return !col || getline('.')[col - 1]  =~# '\s'
endfunction

inoremap <silent><expr> <c-space> coc#refresh()

Assim as sugestões aparecem ao digitar também e com o <TAB> se navega nas opções.

Confira no README do projeto um exemplo de configuração

Navegar para definição:

nmap <silent> gf <Plug>(coc-definition)

Ações de código

Com este recurso você consegue executar ações no seu código como adicionar, remover ou extrair um widget para uma classe ou método.

Seguindo o README, configuramos desta forma:

xmap <leader>a  <Plug>(coc-codeaction-selected)
nmap <leader>a  <Plug>(coc-codeaction-selected)

Assim você pode utilizar o comando <leader>a no modo visual/seleção ou <leader>aw se estiver no modo normal. Para receber apenas sugestões de imports ou organizar o arquivo você pode utilizar <leader>aap.

Flutter: Run, Reload, Restart & DevLog

A extensão coc-flutter habilita os comandos do Flutter SDK e assim podemos listar os comandos:

CocList --input=flutter commands

Você pode configurar alguns atalhos:

nmap <leader>fc  :CocList --input=flutter commands<CR>
nmap <leader>fe  :CocCommand flutter.emulators<CR>
nmap <leader>fr  :CocCommand flutter.run<CR>
nmap <leader>fq  :CocCommand flutter.dev.quit<CR>
nmap <leader>fh  :CocCommand flutter.dev.hotRestart<CR>
nmap <leader>fl  :CocCommand flutter.dev.openDevLog<CR>

Os comandos flutter.dev.* só aparecem após a execução dos comandos run ou attach.

Meu nvim config

Para ficar como exemplo, vou deixar aqui o meu init.vim.

enriquesaid / nvim-config

my nvim config

nvim-config

my nvim config

requirements

nvim 0.5+ 🤪
paq-nvim

color scheme

dracula

install

:PaqInstall
:PaqSync

:LspInstall lua
:LspInstall typescript
:LspInstall html
:LspInstall css

:TSInstall lua
:TSInstall javascript
:TSInstall typescript
:TSInstall json
:TSInstall html
:TSInstall css
:TSInstall yaml
:TSInstall dart

View on GitHub

Qualquer coisa estamos ai nos comentários 😄
Um abraço!

[pt-BR] Comece pelo teste

Enrique Marques Junior — Sun, 19 Jul 2020 17:54:36 +0000

Linguagem: Dart

Em todas as profissões se testa, e isso tem total relação com o grau de qualidade que um produto pode ter para poder ser oferecido. Inclusive, em algumas áreas os testes são obrigatórios e a qualidade controlada por órgãos (ex: Inmetro).

Vamos entender em seguida como funcionam os testes de software e como os testes podem nos ajudar a praticar a linguagem e aumentar a qualidade da entrega.

Tipos de teste de software

Existem muitas categorias de teste, cada um com suas vantagens, desvantagens e objetivos. Vou abordar neste post os tipos de testes recomendados na documentação do Dart:

Os testes unitários tem a responsabilidade de garantir a integridade dos nossos métodos. Um teste unitário deve ser rápido e barato de executar.

Os testes de componentes são responsáveis pela parte de 'interfaces' e interações que um componente pode receber. Normalmente garante a exibição de elementos e mudanças de estados.

Os testes de integração testam a aplicação de uma visão mais completa, navegando e simulando comportamentos dos componentes em conjunto. Verifica o comportamento da aplicação e também pode ser utilizado para medir desempenho.

(ref: https://flutter.dev/docs/testing)

Seguindo esta ordem, considere o seguinte: maior quantidade de testes unitários, seguido por testes de componentes e de integração.

Entrega

Quando você entrega seu trabalho testado para os outros profissionais revisarem (ex: 'code review'), isso economiza muito tempo das pessoas e o seu.

Com testes sua entrega sobe de nível e evita retorno de tarefas para correções (bugs).

Sem testes, além de ficar preocupado (despreocupado é pior), você terá a necessidade de alcançar mais rápido seus objetivos para não ser atropelado por falhas e anomalias em códigos sem testes.

TDD

Para escrever o primeiro teste e entender a vantagem de se testar, vamos utilizar uma técnica chamada TDD (ou desenvolvimento orientado a testes). O TDD, em resumo, é guiar seu desenvolvimento através de testes (vale pesquisar mais sobre o assunto).

Para chegarmos no resultado esperado, seguindo TDD, precisamos passar por três etapas principais:

Escrever o teste e vê-lo falhar 🔴
Desenvolver o método e ver o teste passar 🟢
Melhorar o método com a garantia dos testes 🤓

Repeat!

Primeiro teste

Em uma aplicação Flutter a primeira coisa que eu penso em testar é a 'main'. Será que tem o que testar lá?

Tem sim! Podemos executar funções antes do 'bootstrap' do nosso aplicativo e isso pode ser testado.

Considere o seguinte: precisamos que uma função seja executada antes do runApp do Flutter. Poderíamos ter colocado direto na 'main', mas alguém poderia alterar ou remover essa função e ela deixaria de ter o comportamento esperado.

A vantagem de um teste desse é justamente dele falhar se alguém alterar o código ou remover por engano. Outra vantagem é a descrição dos testes, que ajudam novos colaboradores a entender os casos de uso do código na aplicação.

Para entender as etapas deste primeiro teste é legal dar uma lida na documentação do Dart e no pacote mockito:

O que será testado:

A ideia é testar a execução do runner da aplicação com a condição de executar uma função antes com as configurações de inicialização do projeto.

O teste:

Antes de começar a escrever o teste em si, precisamos criar as classes de Mock para que apenas o método run seja executado no teste.

Dentro do teste executamos o método run (é o método que estamos testando) e o verifyInOrder para verificar a execução na ordem correta.

Ficou assim:

// imports...
// bootstrap file import

class FunctionsMock extends Mock {
  void runApp(dynamic widget) {}
  void before() {}
}

class ComponentMock extends Mock {}

void main() {
  test('App bootstrap method', () async {
    final fMock = FunctionsMock();
    final appMock = ComponentMock();

    await Bootstrap(appMock, fMock.before).run(fMock.runApp);
    verifyInOrder([fMock.before(), fMock.runApp(appMock)]);
  });
}

tests/bootstrap_test.dart

Chegou a hora de executar o teste e ver falhar:

$ flutter test

00:04 +0 -1: loading test/bootstrap_test.dart [E]
  Failed to load "test/bootstrap_test.dart":
  Unable to spawn isolate: test/bootstrap_test.dart:17:11: Error: Method not found: 'Bootstrap'.
      await Bootstrap(appMock, fMock.before).run(fMock.runApp);
            ^^^^^^^^^^^^
00:04 +0 -1: Some tests failed.

Escrevendo o método

Vamos criar uma classe Bootstrap que recebe um Widget e uma função before no construtor.

O método run recebe um runApp (do Flutter) e executa a função before antes do runner com a nossa app (Widget).

// imports...

class Bootstrap {
  final Widget app;
  final Function before;

  Bootstrap(this.app, this.before);

  Future<void> run(Function(Widget) runner) async {
    await before();
    await runner(app);
  }
}

lib/bootstrap.dart

Utilizando a classe:

// imports...

void main() {
  Bootstrap(MyApp(), () { ... }).run(runApp);
}

// MyApp Widget Implementation

lib/main.dart

Seguindo esta ordem, escrevendo o teste primeiro, podemos definir o que esperamos do método. Executando o teste esperamos sempre que ele falhe e está falha vai guiar o desenvolvimento do método. Faça o teste passar!

$ flutter test

00:02 +1: All tests passed!

Note que não testamos o método before, isso deverá ser feito em outra descrição de teste.

Agora sua implementação começa a ficar mais segura e em caso de mudanças seu teste vai quebrar para a felicidade de todos.

A ideia de aprender com os testes é que nos arquivos de testes vamos precisar lidar com a classe/método fora da sua aplicação e isso nos leva a melhorar essas classes/métodos, além de utilizar outras partes da linguagem.

É apenas o começo

No caso do Flutter você pode seguir para os testes de componentes (widgets). Para todos os casos, vale a leitura de toda documentação do Dart sobre testes.

Espero voltar com os próximos passos, mas não espere por mim, gogogo!

DEV Community: Enrique Marques Junior

Trabalhando com valores monetários em Apps Flutter

Evitando o Uso de double para Valores Monetários

Usar Inteiros para Representar Centavos

Usando a Biblioteca intl para Formatação Monetária

Exemplo de Formatação de Valores Monetários

3. Operações Seguras com Moeda

Exemplo de Adição de Valores Monetários

Exemplo: Aplicando Desconto

Exemplo de Arredondamento

Mascara de Valores

Conversão de Valores para Centavos

Armazenando a Moeda

Extra: packages

1. money2

Recursos principais:

Exemplo:

2. decimal

Recursos principais:

Exemplo:

3. money_formatter

Recursos principais:

Exemplo:

4. currency_formatter

Recursos principais:

Exemplo:

Flutter: Construindo apps temáticas!

Utilizando ThemeData

ColorSchemes e Material 3

Vantagens

Pontos principais:

NeoVim: init.lua, built in LSP e mais

init.lua

lua/settings.lua

lua/keymaps.lua

Plugins

Editor

Visual

Lsp: Install e Config

lua/plugins/lsp-config.lua

Lsp-cmp

Meu nvim-config

enriquesaid / nvim-config

my nvim config

nvim-config

requirements

color scheme

install

Neovim: Migrando do coc.vim para nvim-lsp

Migrando suas configurações para Lua

Configurando o LSP

Instalação, Inicialização e Comandos

Comandos:

[pt-BR] NeoVim para Typescript

Suporte a linguagem

React

Plugins

CoC

CoC: Popup de sugestão

CoC: Renomear Símbolo

CoC: Navegação de código

CoC: Ações de Código

CoC: Lista de comandos, extensões e diagnósticos

Meu setup

enriquesaid / nvim-config

my nvim config

nvim-config

requirements

color scheme

install

[pt-BR] Flutter no NeoVim

Suporte a linguagem

Setup & Configurações

CoC.vim & coc-flutter

Navegar para definição:

Ações de código

Flutter: Run, Reload, Restart & DevLog

Meu nvim config

enriquesaid / nvim-config

my nvim config

Evitando o Uso de `double` para Valores Monetários

Usando a Biblioteca `intl` para Formatação Monetária