Semelhanças entre o Flutter e o Jetpack Compose

1. Declarative UI: Ambos Flutter e Jetpack Compose adotam o paradigma de desenvolvimento de interfaces de usuário declarativo, permitindo definir a aparência da interface com base no estado da aplicação.
2. Widgets/Composables: Tanto no Flutter quanto no Jetpack Compose, os elementos visuais são compostos por widgets (no caso do Flutter) ou composables (no caso do Jetpack Compose), que são componentes reutilizáveis para construir interfaces de usuário.
3. Hot Reload: Ambas as plataformas oferecem suporte ao hot reload, permitindo que os desenvolvedores vejam instantaneamente as mudanças feitas no código refletidas na interface do usuário durante o desenvolvimento.
4. Suporte multiplataforma: Flutter e Jetpack Compose são frameworks multiplataforma que permitem desenvolver aplicativos para Android, iOS e, em alguns casos, até mesmo para a web.

Declarative UI: Exemplos em Ambos Flutter e Jetpack Compose

• Flutter:
  No Flutter, você pode criar uma interface de usuário declarativa usando widgets. Por exemplo, para criar um botão, você usaria o widget ElevatedButton e definiria suas propriedades, como texto e cor de fundo, de forma declarativa.

Exemplo:

ElevatedButton(
  onPressed: () {
    // Ação a ser executada quando o botão é pressionado
  },
  child: Text('Pressione-me'),
)

• Jetpack Compose:
  Da mesma forma, no Jetpack Compose, você cria uma interface de usuário declarativa usando composables. Por exemplo, para criar um botão, você usaria o composable Button e definiria suas propriedades, como texto e cor de fundo, de forma declarativa.

Exemplo:

Button(
    onClick = { /* Ação a ser executada quando o botão é pressionado */ },
    modifier = Modifier.padding(16.dp)
) {
    Text("Pressione-me")
}

Widgets/Composables Exemplos em Flutter e Jetpack Compose

• Flutter (Widgets):
  Um exemplo de widget em Flutter seria o Container, que é um elemento de layout que pode conter outros widgets e permite definir propriedades como cor de fundo, margens e preenchimento.

Exemplo:

Container(
  color: Colors.blue,
  margin: EdgeInsets.all(16.0),
  padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
  child: Text('Exemplo de Container em Flutter'),
)

• Jetpack Compose (Composables):
  Um exemplo de composable em Jetpack Compose seria o Text, que é usado para exibir texto na tela. Você pode definir propriedades como texto, estilo e cor.

Exemplo:

Text(
    text = "Exemplo de Text em Jetpack Compose",
    style = TextStyle(color = Color.Blue),
    modifier = Modifier.padding(16.dp)
)

Abaixo um depoimento de como comecei com Flutter, e as dificuldades etc

Consegui um projeto do Flutter, mas não entendia o Flutter, Então, comecei com os pontos em comum entre o Android e o Flutter, Um aspecto comum que mais me interessa é a arquitetura de aplicativos, Então, aqui está o que aprendi sobre arquitetura de aplicativos.

Eis como estou estruturando os aplicativos Flutter:

-> Util
-> Features
-> Core
-> Commons
-> Apis

– Cada recurso é dividido em:

-> View
-> Controller
-> Widgets

Erros que cometi na arquitetura de aplicativos:

– Quando estamos criando aplicativos escaláveis que serão usados por milhões de pessoas.

Nossa principal preocupação não são os recursos, mas como esses recursos interagirão entre si.

É importante dividir as telas como recursos para que possamos removê-las e adicioná-las sempre que quisermos

Quando tentamos dividir a arquitetura do aplicativo em pequenas partes que têm preocupações separadas e que podem ser facilmente separadas, essa é uma boa prática

Anteriormente, eu costumava definir todas as telas em camadas de apresentação

Mas isso é um grande erro para um aplicativo escalável.

Portanto, divida-as em recursos

Estruturas de aplicativos:

–> Utils – Usado para constantes, modelos ou outras classes utilitárias.

-> Features – São telas de aplicativos

-> Core – Contém classes que estão sendo usadas no aplicativo, como DI

-> Communs – São widgets que estão sendo copiados em todo o aplicativo

Apis

É reservada para chamadas de API e classes relacionadas à rede

Cada tela de recurso é dividida em:

– View – Tela

– Controller – Semelhante ao ViewModel

– Widgets – Semelhante a Reusable Composables

Isso é por enquanto

Obrigado por ler

Se eu tiver escrito algo errado, por favor, me perdoe