DEV Community: Beatriz Herculano

Flutter and the basics on Widgets

Beatriz Herculano — Fri, 25 Dec 2020 23:17:24 +0000

What is Flutter?

Flutter is a SDK, created by Google, to build cross platform mobile apps and web applications.
Flutter é um SDK para desenvolvimento de aplicativos multiplataforma e aplicações web criada pela Google.

I started studding flutter without ever programing with components, because of that a lot of concepts were strange to me, mainly the concept and usage of Widgets

If you read the documentation for Flutter you will find the following definition for widgets:

Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.

This "explains" the concept of widget but not their usage. How it is used to build a flutter app?

Render Tree

The first thing to learn is that every visual component in a Flutter App is a widget or a Widget inside another:
If I want a centered text, I use a Text Widget inside a Center Widget. Actually, your entire app will be a Widget with others inside it.

When, for whatever reason, a widget have to load again, it will reload its children and itself. If you are worried about performance thinking about how you could rebuild your entire app, flutter was built thinking about it and there ar several guidelines and best practices to avoid a "render hell".

State and behavior

Ok, another thing about components, they can have behavior and a state.
The behavior can be simply described as what your widget do. If you are building a button that changes colors when you click it, there you have a method to do it, a behavior!

The state is what the behavior can change.

One very important concept is that you widget is in function of you state.

Going back to my button that changes color, the color can be represented as a variable in the state, if I click it the state changes and the appearance of the widget should change too.

The state is like a save file for a game, but for your widget.

You can bring this concept to any of the component style frameworks like React, Vue, SwiftUI and others.

How does state and behavior work in Flutter?

So the state can change, but is not necessary. Flutter separates widgets that changes and the ones that do not. They can be Stateless and Stateful.

This something that can be good or bad. This makes clear from the beginning how your widget will behave, if will be able to rebuild the render tree bellow it or if will be only modified if its parent do, but it can create verbose code and it will force you to adapt some code sometimes because suddenly you want behavior in that widget.

Another thing that this difference do is to block the "render hell", and can help you to use stateful widgets only when necessary.

Stateless Widgets

A Widget that is built once and cannot rebuild itself, only their parent can do it for them. A good example is the Text Widget:

Text( 'This is a immutable text',);

This widget is once created and it has not more behavior than this.
I could stack stateless widgets to build my own for example.

Container(
    color: Colors.red,
    child: Center(
        child: Text( 'This is a immutable text',)
    ));

This does not have a state or a behavior.

Stateful Widgets

This widget can change after is built and rebuild itself. A example is the raised button Widget, when the button is idle, it have the "raised" effect, during the click the effect is removed and if you let the click out the effect returns.

Another example is the following:

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            )
          ],
        ),
      ),
      color: Colors.white,
    );
  }
}

We have a widget that is visually composed by a Column, a Center, a Text and a FloatingActionButton, but it also has a state, that is a integer named counter that starts with 0.

When you press the FloatActionButton the _incrementCounter is called, this private method uses the setState and inside it changes the counter value, incrementing one to this number.

Now, in flutter, if you are inside a Stateful widget and you use the setState, you will rebuild the widget, because you are telling that you are changing the state, since your visual is a representation of the state it has to render again.

Finishing this up

I used React, Flutter and SwiftUI, learning the basics teach me that they are far more similar that you expect. You still is confused with this concept and you think flutter is making things worse I recommend you learn a little about SwiftUI, i used the (100 days of SwiftUI)[https://www.hackingwithswift.com/100/swiftui] to learn it.

Hope this can help if you want to learn Flutter and you can ping me for help.

As pessoas realmente fazem TDD?

Beatriz Herculano — Tue, 03 Nov 2020 19:00:48 +0000

Muitos sabem o que é TDD e que ele pode mudar a sua vida, mas muitas pessoas se fazem a pergunta:

Será que as pessoas realmente fazem TDD? Ou é só coisa de artigo?

É bem estranho pensar que seu chefe vai deixar você trabalhar em testes e não em código. Existe a mentalidade que melhorar as coisas para os desenvolvedores não traz valor ao cliente.

Vamos aos básicos primeiro.

TDD, o que é?

TDD é um técnica de programação onde você codifica o teste antes da funcionalidade. Isso envolve que o teste sempre começa falhando, você codifica apenas o necessário para o teste passar (isso de qualquer jeito, não precisa ser da melhor forma), depois refatora o código e o teste tem que funcionar novamente.

Esse comportamento é representado com os estados:

vermelho -> teste falha
verde -> teste passa com o mínimo de código possível
azul -> código é refatorado
verde -> teste passa

Qual o poder mágico que o TDD tem?

TESTES

TDD não é magico. A magia está nos testes!

O TDD te força a fazer testes pro seu código inteiro. Se você modificar seu código sem testes, como você sabe que ainda está tudo bem?

Como você sabe que não quebrou o código que seu colega fez? Quem ja trabalhou com código legado entende muito bem essa dor, essa incerteza de fazer uma modificação e estragar alguma coisa.

Isso é uma ótima vantagem para times com uma pessoa com menos experiencia, onde ela sabe que fez algo de errado por que o teste quebrou, o que deve evitar o código ir pra produção.

Testar manualmente é uma opção, mas vai ocupar cada vez mais tempo. Os testes automatizados são a melhor forma de garantir que você não estragou nada.

Muitas pessoas fazem testes, nem tantas fazem TDD

Muitas pessoas vão falar com seus chefes e lideres de time sobre fazer TDD, isso é muito legal, mas a maior parte das vezes vai ser levado como utopia e não será implementado.

O argumento mais comum é:

TDD é muito custoso, deixa o time mais lento, esse código nem é uma funcionalidade. No final vai ser tempo perdido.

Existem algumas coisas certas nesses argumentos:

Seu time pode ficar mais lento.
Esse código não tem contato direto com o cliente.

Mas não é tempo perdido.

É criar uma melhor experiencia de desenvolvimento, trazer mais qualidade para o produto e ajudar os desenvolvedores do time a serem melhores.

Experiência no desenvolvimento traz valor!

Quem nunca pegou um projeto, pra resolver uma coisa bem pequena e simples e demorou o triplo do esperado para concluir a tarefa? Ou então construiu uma funcionalidade e a colocou em produção para perceber que tinha uma regra de negócio errada?

Trabalhar com código é difícil, ainda mais se ele é de outra pessoa e ainda por cima está incompreensível. Se o código estivesse melhor, você ia demorar tanto pra fazer modificações nele?

A sua experiencia no desenvolvimento, como programador, é importante. Sempre pensam que os testes "atrasam" o desenvolvimento, mas nunca olham para quanto um código ruim pode fazer uma tarefa de dois dias demorar um mês.

Com modificações sendo feitas de forma mais rápida, mais valor é entregue em menos tempo!

Qualidade

Garantir a qualidade não é um trabalho exclusivo do QA. A qualidade tem que estar em todos os processos do desenvolvimento, desde a analise da tarefa e suas regras de negócio, o desenvolvimento e o processo de validação do que foi desenvolvido.

Fazer testes unitários automatizados é a ferramenta usada pelos desenvolvedores para garantir a qualidade durante o desenvolvimento, no presente e no futuro.

Esses testes estão na base da pirâmide, sendo eles os menos custosos de executar e criar. Se você está tendo problemas de qualidade dentro do seu time/projeto, TDD é um dos melhores passos a se dar.

Dica bonus
Uma coisa que pode ajudar muito também é uma conversa mais próxima de desenvolvedores e analistas de negocio.

Finalizando aqui

Você vai encontrar dificuldades de implementar o TDD, seja por falta de costume ou por que o time não esta aberto pra isso. Comece aos poucos, tente um pouco de TDD de cada vez, assim você fica mais rápido e vai entender melhor suas vantagens.

Esse é um tema que a leitura não te trará conhecimento suficiente e que a pratica é a parte mais importante.

Flutter no CodePen!!

Beatriz Herculano — Sat, 25 Apr 2020 20:37:29 +0000

Oi pessoal, hoje foi anunciado que o CodePen agora tem suporte para flutter!

Esse anúncio é super importante para crescer a comunidade de flutter ainda mais. Alem de nos termos mais um espaço para divulgar nossas ideias, designs e dicas.

Como criar um Pen em flutter

Para criar um design com flutter no CodePen voce deve acessar o a pagina de tópico de flutter nela voce pode escolher um template dentre os vários disponíveis ou então clicar em "Open flutter editor" para começar com um projeto limpo.

Por que eu estou tão animada?

Esse novo espaço para se descobrir pens de flutter é perfeito para uma característica da comunidade: A divulgação de designs e animações!

Todo dia aparece mais um video de um aplicativo lindo feito em flutter, ou um clone do nuBank, agora voce vai poder ver como essas pessoas fizeram essas coisas, além de colocar as coisas que voce fez e acha que a comunidade pode gostar!

Se quiser dar uma olhada no meu CodePen

Voce pode ver o meu perfil, agora vou sempre colocar widgets e designs que eu gostei de fazer e user para outras pessoas usarem também.
Ja ate mesmo coloquei alguns =D

Um estudo sobre Flutter Expanded

Beatriz Herculano — Tue, 04 Feb 2020 14:09:41 +0000

Esse artigo faz parte de uma série chamada "Widgets da Semana", para saber mais sobre essa ela leia nossa introdução.

Expaned

O video do Widget da semana postado no dia 21 de agosto de 2018, fala sobre Expanded.

Esse widget é usado para organizar o espaço ocupado por itens em Rows, Columns e Flex. Ele faz com que esse item ocupe o espaço vago dentro do seu pai.

Quando a renderização acontece, primeiro é construido os filhos que não são flexiveis e depois os que são flexíveis vão ser calculados com o espaço restante.

Você pode pensar como se fosse um display flex no CSS, onde essa caixa vai se expandir ocupando o todo espaço restate ou então em uma proporção indicada.

Como um exemplo de uso temos o código:

 Column(
    children: <Widget>[
       Container(
           color: Colors.black,
               height: 100,
           ),
       Expanded(
           child: Container(color: Colors.indigo),
       ),
       Expanded(
           child: Container(color: Colors.pinkAccent),
       )
    ],
),

Que produz o segunte resultado:

Você pode ver que sem indicar o tamanho ocupado pelos retangulos azul e rosa eles se organizaram baseado nas regras de expanded.
Mas e se eu quiser que um seja de um tamanho diferente do outro?

É so usar o atributo de flex e indicar a proporção de espaço a ser ocupado:

Column(
    children: <Widget>[
       Container(
           color: Colors.black,
               height: 100,
           ),
       Expanded(
           child: Container(color: Colors.indigo),
           flex: 2,
       ),
       Expanded(
           child: Container(color: Colors.pinkAccent),
       )
    ],
),

Assim obtemos o seginte resultado

O retângulo azul com o flex de 2 esta tomando o dobro de espaço que o rosa (o valor default/padrão do flex é 1).

Sobre Nós

Eu e o pessoal da Flutter Nation estamos em uma página e um grupo no Facebook.
Também estamos no Meetup e no GitHub!

#100DaysOfCode - Ano novo, novas metas

Beatriz Herculano — Thu, 02 Jan 2020 14:34:43 +0000

É 2020 e quais são seus objetivos? O meu é ser uma Dev melhor

Durante 2019 teve um sentimento que não saiu de dentro de mim: Eu tenho que melhorar como dev. Melhorar em qualidade de código, design patterns e design de codigo e arquitetura.
Esse tipo de sensação aparece quando eu me comparo com outros devs (algo que não se deve fazer com muita frequência) e tambem quando almejo vagas de nivel maior que o meu (hoje eu sou jr, almejo vagas de pleno).
Quando se trata desse tipo de mudança, de Jr para Pleno, a maior diferença é em coisas que são ultilizadas em todas as linguagens:

Dry code
SOLID
DDD
TDD

Alem desses existem habilidades que trazem um diferencial para o desenvolvedor no mercado de trabalho como a cultura DevOps.

Para eu alcançar esse objetivo eu vou participar do desafio de 100 dias de codigo.

O desafio de 100 dias de código - como começar

Esse desafio foi criado com base no estilo de desafio dos 100 dias de X. Voce pode olhar as regras completas no site oficial do desafio, voce pode acessar as regras em português aqui.

As regras são claras:

Codifique durante uma hora do seu dia durante 100 dias seguidos.
Divulgue publicamente no twitter seu progresso diario usando a #100DaysOfCode

Existem mais algumas regras, mas essas duas são as principais.

No repositorio do github voce pode ver como usar os arquivos de log para manter um acompanhamento do seu desenvolvimento no desafio.

Pra começar, de um fork no repositorio, leia as regras e então: publicamente
1. Codifique uma hora por dia
2. Publique seu progresso diario de forma pública
3.faça um commit no arquivo de log no repositorio. **
**Repita uma vez por dia, durante 100 dias.

Obs: O desafio tem outras regras, eu estou aqui simplificando elas, mas eu vou seguir todas elas :)

No que foi que eu me meti?

Mas por que esse desafio? Qual o problema de ler sobre os assuntos e pronto? Desenvolver mais codigo te torna um dev melhor

Por mais que os assuntos que eu vou abordar nesse chalange não sejam puramente de códigio como fazer uma API, fazer uma Rede convolutiva, criar um aplicativo assim. Esses conceito so podem ser aplicados, treinados e absorvidos enquato se desenvolve. São conceitos que devem ser praticados e experimentados.

Não adianta ler sobre TDD, voce precisa fazer TDD.

E o mesmo vale para todos esses conceitos, principalmente quando falamos de DevOps.

Qual a diferença da minha jornada?

Muitas vezes esses desafios são concentrados para pessoas iniciantes na programação, fazendo projetos para aprender tecnologias, mas focar em qualidade de codigo te tira da mediocridade e te eleva como desenvolvedor. Esse tipo de desafio pode ser usado por desenvolvedores em qualquer nivel e pode ser muito bom para quando voce quer simplemente melhorar seu codigo.

Se voce é um(a) desenvolvedor(a) Jr e que hoje quer crescer na sua carreira, eu espero que minha visão e minha tragetória te ajude a crescer também. Você não está mais no zero ou no básico, chegou a hora de se desafiar com coisas mais complexas. O mesmo vale pra mim

Finalizando, esse não vai ser o meu unico desafio, apenas o primeiro. Fique atento que vou postar mais

Criar hábitos é uma habilidade. Com o ano novo, vida nova nos sempre ficamos com a mente cheia de novas possibilidades.
Não tente muitos desafios por vez, se concentre em um e os proximos ficam mais faceis.
Eu tenho varias metas esse ano:

Melhorar como Dev (esse desafio é apenas a primeira parte disso)
Melhorar minha capacidade fisica para fazer varias trilhas (sim, a classica academia)
Crescer a comunidade de Flutter que eu sou community manager (um meetup por mês)
Um projeto bem grande e de cunho social que eu vou falar mais depois (misteeeeeriooo)

Estou ansiosa para 2020, tambem estou concentrada em não deixar essa animação morrer.

Esse artigo vai estar numa série de artigos, que será uma das minhas forma de manter o acompanhamento do meu progresso. Não bastando uma hora por dia de codigo, vai ter tambem um artigo por dia aqui.

Aos que me acompanharem nessa jornada, me desejem sorte.

Um estudo sobre Flutter SafeArea

Beatriz Herculano — Mon, 09 Dec 2019 17:59:03 +0000

Esse artigo faz parte de uma série chamada "Widgets da Semana", para saber mais sobre essa ela leia nossa introdução.

SafeArea

O video do Widget da semana postado no dia 14 de agosto de 2018, fala sobre a SafeArea. Esse widget inspeciona o modelo da tela do celular e ajusta a conteúdo para que ele fique formatado dentro dos limites.

Não so o modelo/formato da tela é importante, mas como hoje aparecem varias notificações e também existem os recortes de tela, seu aplicativo pode ficar assim:

Para resolver esse tipo de incompatibilidade nós podemos usar o SafeArea.

SafeArea(
    child: //Seus Widgets
);

Para entender a diferença entre usar ou não usar o SafeArea veja o exemplo a baixo:

Esse aplicativo tem o seguinte código:

Container(
      color: Colors.white,
      child: Text(
        'Esse texto invade a barra de notificação',
        style: TextStyle(color: Colors.black),
      ),
    );

Sem usar a SafeArea o texto invade a barra de notificação e, ao olhar no celular, o texto é cortado pelo formato das pontas da tela que é arredondado.

Se você apenas adicionar a SafeArea:

SafeArea(
        child: Container(
      color: Colors.white,
      child: Text(
        'Esse texto nao invade a barra de notificação',
        style: TextStyle(color: Colors.black),
      ),
    ));

O resultado é bem melhor:

Sobre Nós

Eu e o pessoal da Flutter Nation estamos em uma página e um grupo no Facebook.
Também estamos no Meetup e no GitHub!

Flutter - Um estudo semanal sobre Widgets

Beatriz Herculano — Wed, 27 Nov 2019 16:36:22 +0000

Widget Of The Week - Videos legendados em português, mas a documentação esta em inglês

O canal oficial do flutter no youtube posta semanalmente um vídeo falando de diferentes Widgets e como eles são usados no desenvolvimento de apps com flutter.

Os videos são curtos e super interessantes, porém no seu formato não passam tantas informações e referenciam a documentação oficial do flutter como uma fonte mais aprofundada nos widgets e códigos.

Com legendas em Português e varias outras línguas, esses videos são bem acessíveis, mas a documentação está apenas em inglês. Barrando varias pessoas a procurarem a fundo sobre esses widgets e sobre o Flutter.

O que nos vamos fazer? Um Artigo por semana sobre um dos Widgets!

Então nós, pessoas apaixonadas por flutter e com tempo sobrando, decidimos aumentar o alcance de informações sobre o flutter e seus Widgets da semana.

Nós vamos criar um artigo para cada widget da semana lançado e pros que vão lançar. Sabemos que será um desafio, já que até o dia atual já foram lançados 60 videos nesse formato, mas nossa força de vontade nos cega e nos guia.

Sobre quais Widgets nos vamos escrever?

Segue a lista de Widgets da semana, essa lista será atualizada conforme mais videos e artigos forem lançados:

SafeArea
Expanded
Wrap
AnimatedContainer
Opacity
FutureBuilder
FadeTransition
FloatingActionButton
PageView
Table
SliverAppBar
SliverList e SliverGrid
FadeInImage
StreamBuilder
InheritedModel
ClipRRect
Hero
CustomPaint
Tooltip
FittedBox
LayoutBuilder
AbsorbPointer
Transform
BackdropFilter
Align
Positioned
AnimatedBuilder
Dismissible
SizedBox
ValueListenableBuilder
Draggable
Flexible
MediaQuery
Spacer
InheritedWidget
AnimatedIcon
AspectRatio
LimitedBox
Placeholder
RichText
ReorderableListView
AnimatedSwitcher
AnimatedPositioned
AnimatedPadding
IndexedStack
Semantics
ConstrainedBox
Stack
AnimatedOpacity
FractionallySizedBox
ListView
ListTile
Container
SelectableText
DataTable
Slider, RangeSlider e CupertinoSlider
AlertDialog
AnimatedCrossFade
DraggableScrollableSheet
ColorFiltered

Sobre Nós

Eu e o pessoal da Flutter Nation estamos em uma página e um grupo no Facebook.
Também estamos no Meetup e no GitHub!

Iniciando com Flutter: Widgets

Beatriz Herculano — Thu, 12 Sep 2019 18:31:15 +0000

Introdução

O que é flutter?

Flutter é um SDK para desenvolvimento de aplicativos multiplataforma e aplicações web criada pela Google.

Eu comecei estudando flutter sem nunca ter programado com componentes, então vários conceitos eram estranhos para mim, o principal foi o conceito e uso de Widgets.

Ao ler a documentação do flutter, me deparei com a seguinte definição de widget:

Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.

Em uma tradução livre:

Widgets são estruturas que descrevem como a sua visualização deve ser, conforme o sua configuração e estado atual. Quando o estado de um widget muda, o ele reconstrói sua descrição, a qual o framework compara com a diferença da descrição anterior, para determinar as mudanças mínimas na árvore de renderização ao transitar de um estado para outro.

O trecho traz o conceito de widget, porém não traz a informação de como ele é usado para a construção do app em flutter.

O objetivo desse artigo é trazer de forma clara o conceito de widgets, sejam eles imutáveis ou mutáveis. E passar uma visão do que é construir um aplicativo em flutter usando eles.

Árvore de Renderização

A primeira coisa para se entender é que todo item visual em um app em flutter é um widget dentro do outro:
Se eu quiser um texto centralizado eu coloco um widget Text dentro de um Center. Inclusive, seu app em si vai ser um Widget com outros dentro dele.

Quando o Widget exterior tem seu estado modificado, ele reconstrói os Widgets interiores a ele, ou seja, sua árvore de renderização.

Imutáveis

Chamados de “StatelessWidgets” é um objeto que se constrói uma vez e não tem informações de como se reconstruir. Então ele não vai afetar a sua árvore de renderização.

Um exemplo de um widget imutável ou Stateless é o Text. Ele é um widget que recebe um parâmetro string/texto e monta um objeto visual onde esse valor é transformado em uma label e exibido na tela.

Text( 'Esse é um texto imutável',);

Ele, por si só nunca muda seu texto sozinho, se ele foi construído uma vez, ele não tem capacidade de se reconstruir com um valor de texto novo.

Mutáveis

O chamado de “StatefulWidget” é um objeto que tem objeto de State. Esse objeto representa situação atual do widget, que pode ser modificada conforme o tempo ou conforme coisas acontecem no seu app. Esse estado sabe se reconstruir, afetando todos os Widgets dentro dele, ou seja, sua árvore de renderização.

Se eu tenho um aplicativo onde um botão é clicado para mudar o valor do Widget, deve ser indicado que o estado dele mudou, usando o método setState. Assim nos forçamos o objeto a se reconstruir e, também, a todos os Widgets que tem dentro dele, inclusive os imutáveis. Se você quiser saber mais em como o setState afeta o desempenho do app veja a documentação.

Você pode entender melhor com o exemplo:

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            )
          ],
        ),
      ),
      color: Colors.white,
    );
  }
}

Nos temos um StatefulWidget que tem tem uma variável int, um objeto Text e um botão. Quando eu clico no botão a eu somo 1 ao meu número, e sinalizo que o estado do meu widget foi modificado, usando o setState. Assim ele força e reconstrução do meu objeto Text dentro dele com o novo valor do meu número.

Conclusão

No final, construir um app em flutter é usar StatefulWidgets que forçam a reconstrução de StatelessWidgets.

Meus agradecimento a Filipe Pereira, um grande amigo.