DEV Community 👩‍💻👨‍💻

Cover image for Android Studio e Flutter - Deixando a IDE mais bonita e produtiva
Tulio Calil
Tulio Calil

Posted on

Android Studio e Flutter - Deixando a IDE mais bonita e produtiva

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.

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

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

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

Fonte do código

Cascadia Code

A fonte do editor é algo que dá uma diferença muito grande também, aqui é agosto do freguês, eu utilizei a 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

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

Ícones da IDE

Icones de projeto

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, aqui a solução que eu encontrei foi o CodeGlance Pro.

Android Studio

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

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.

Top comments (0)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.