Android Studio e Flutter - Deixando a IDE mais bonita e produtiva
Tags: flutter, dart, android, ios
Published: 2022-11-27 22:24:06

Como desenvolvedores criamos certos costumes/rituais para ficarmos confortáveis no ambiente de desenvolvimento.
Eu não consigo escrever uma linha de código sem antes configurar e estilizar todo o meu ambiente, temas, fontes, ícones, plugins/extensões, ferramentas etc. Eu tenho inclusive [posts sobre isso](https://tuliocalil.blogspot.com/2019/09/meu-ambiente-linux.html).

Recentemente compartilhei minha tela no trabalho e alguns colegas ficaram admirados com meu Android Studio "diferente", então parei pra refletir que realmente não é tão comum vermos tanta personalização assim na IDE (ao menos na minha bolha), e como estamos acostumados com VScode, temos dezenas de coisinhas instaladas para nos ajudar de alguma forma.

Vou demonstrar como eu personalizei e como você também pode deixar a sua IDE bonitona!

![Android Studio personalizado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gowygmfxh7aiyxdnav59.png)

## Escolhendo um tema

A primeira coisa que fiz foi mudar o tema da IDE, não gosto nada das cores do dark theme padrão (parecem não encaixar) então fui correndo atrás de um tema que atualmente é o meu queridinho, o `Palenight Theme`.

Para isso vamos nas preferencias do Android Studio e ir na opção "Plugins":

![Configurações do Android Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy2eypt12mct31ilhtzg.png)

Agora basta buscar pelo tema desejado, no meu caso o `Palenight Theme`. Aqui, caso queira ver outros temas, sugiro que busque apenas por "Theme".

Com o tema selecionado clique em `Install`, depois clique em `Apply` e por fim `Ok`, pode ser que a IDE solicite que seja reiniciada, permita para que o tema aplique.

## Color Scheme

O esquema de cores do nosso codigo é outra coisa que precisamos mudar, normalmente um tema vem com um schema, vamos apenas aplica-lo, para isso vamos em `Preferencias` > `Editor` > `Color Scheme`:

![Android Studio color scheme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8drf30zqa5j5m395gva.png)

## Fonte do código

![Cascadia Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9sbo5gd8rpq2odcnqgf.png)

A fonte do editor é algo que dá uma diferença muito grande também, aqui é agosto do freguês, eu utilizei a [Cascadia Code](https://github.com/microsoft/cascadia-code) da Microsoft, é uma fonte super bonita e tem ligature, arrows e stylistics super legais.
Você pode escolher outra fonte também como a Fira Code, lembre-se apenas que deve ser `monoespaced`.

A fonte você instala direto no seu sistema operacional e apenas mudar nas preferencias do Android Studio:

![Android Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qu93a75tawvsr4odyosj.png)

> Caso tenha escolhido uma fonte com suporte a ligature, ative a opção.

## Imagem de fundo

Aqui é bem simples, basta ir em `Preferencias` > `Appearence & Behavior` > `Appearence`:

![Imagem de fundo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no7fj7l0b620ot4zr8nq.png)

## Ícones da IDE

![Icones de projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsabnefjgrjg2xah0krq.png)

Outra coisa da interface que me deixa incomodado são os icones, eles são bem sem vida e parecem não ter um padrão, para isso eu usei o `Atom material Icons`, basta buscar nos plugins da loja e aplicar.

## Minimapa

Eu amo a função de minimapa nos editores de código, inclusive utilizo no meu setup do [LunarVim](https://www.lunarvim.org/), aqui a solução que eu encontrei foi o `CodeGlance Pro`.

![Android Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzc9q3dsnsq6eqdqpurz.png)

> A instalação segue o padrão > Plugins > Install > Apply.

## Versão das dependências no Pubspec

Uma feature que sou muito acostumado em projetos Nodejs no VScode é a de listar a versão mais recente da dependência ao encostar o cursor do mouse em alguma dentro do `package.json`.
Para essa tarefa eu encontrei o plugin `Flutter Pub Version Checker` aqui no Android Studio.

## Markdown

Uma outra extensão que instalei foi a de Markdown, tanto para validar a sintaxe do arquivo quanto para fazer uma previa do que estou editando, outra coisa que uso muito no VScode.
 
## Limpando a UI da IDE

Outra coisa que fiz foi remover alguns itens da interface da IDE para deixar tudo mais limpo, eu não vou listar todos aqui, mas dá pra ver quais eu removi pelo print da minha IDE.
Isso eu fiz indo em `Preferencias` > `Appearence & Behavior` > `Menus and Toolbars` > `Main Toolbar`:

![Android Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osoryn2zhs9y35cb1rq8.png)

## Finalizando

Isso é tudo que fiz para deixar o meu ambiente Flutter muito mais legal para trabalhar e super produtivo! 
E você, conhece algum plugin e personalização legal? comenta aqui!

Não esquece de passar no [meu Blog pra ver outras postagens como essa](https://www.tuliocalil.com.br/).