E aí!
Faz um tempo que não publico nada, mas fico feliz que até hoje os tutoriais de formik ainda são bem acessados e tem ajudado bastante gente.
Estive procurando algum outro tema para escrever, mas ainda não tinha encontrado nenhum legal, ou que não fose algo "já batido". Nesse meio termo, estive (e estou ainda) estudando Flutter! Estava meio fadado de javascript mais de 12 horas por dia, então queria estudar alguma coisa nova.
Como na época não via muita graça com backend - agora eu já tô numa fase Pythonista - acabei me voltando para o Flutter. Bom, de forma bem resumida foi isso haha.
Disclaimer 1 - Esse artigo não vai ser uma introdução a dart / flutter. Caso se interesse de um artigo assim, comenta aí
Disclaimer 2 - Ainda tô no começo do estudo dessa parada, então se tu já manja de flutter, seja educado :D
Os tópicos que eu consegui listar até agora, são:
- Widgets / Components
- Stateful e stateless widgets
- build e render
- State
- Props / Constructor
Widget / Components
Quando você começa a procurar por conteúdo inicial de Flutter, você descobre que tudo - TUDO - no flutter é um Widget.
Pra você, frontender, basicamente traduza "Widget" para "Component". É isso, só.
Stateful e stateless widgets
Um outro conceito que você precisa entender logo no começo, é que existem - basicamente - dois tipos de componentes. Eles são: Stateful e Stateless. Se você é reactzero, ou se olhar a documentação, vai ver esses termos lá.
Na prática, o princípio é o mesmo do React: você cria componentes/widgets com estado e alguns outros que são apenas para apresentação, você faz com stateless - que são mais rápidos e simples - pois apenas recebem os estados via props e renderizam.
No Flutter todos os componentes devem ser baseados em classe, igual como a gente fazia antigamente com React. Os métodos que chamam os componentes de UI são: build() em Flutter e o render() no React. Se você forçar um pouco, vai ver uma similaridade semântica :D
State
No Flutter, da mesma forma que no React, temos gerencia de estado local e global.
Para a gerência de estado local no flutter, temos o setState! Isso te lembra alguma coisa?
O conceito é exatamente o mesmo: Quando esse método for chamado, ele atualiza os valores descritos e redesenha a tela.
setState(() {
name = newValue
})
this.setState({
name: newValue
})
Props / Constructor
No React, se você quer passar um valor de um componente pai para um filho, você usa props. Até aqui beleza.
No Flutter, você faz o mesmo processo, com alguns detalhes:
Como todos os Widgets são classes, você pode passar um valor para um filho através do constructor: Quando um filho recebe um valor novo através do constructor, ele redesenha o componente, da mesma forma que você já está acostumado a fazer com React. Olha como fica:
class Container extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MyButton(title: 'Titulo do button');
}
}
class MyButton extends StatelessWidget {
String title;
// Esse é o construtor, prazer
Button({this.title});
@override
Widget build(BuildContext context) {
return Button(title);
}
}
Ufa!
Existem algumas semelhanças a mais, mas esse artigo vai ficando por aqui.
Estou com ideia de escrever alguns artigos de flutter, trazendo a minha experiência e até descrevendo passo a passo, um app de time tracking que estou fazendo! Fala aí, se estiver interessado!
Valeu!
Top comments (0)