Desenvolvimento Mobile - Aplicativos multiplataforma com Dart e Flutter no Santander Dev Week 2023
Olá devs!
É emocionante ver como os aplicativos estão dominando nosso dia dia, mundo do desenvolvimento mobile é uma realidade. Mas com tantos sistemas operacionais (SO) fica a duvida de qual opção mergulhar para conhecer e crescer de fato no desenvolvimento de aplicativos? Ai que surgem os frameworks multiplataforma com as poderosas tecnologias, os mais conhecidos atualmente "Flutter" e "React Native". Vamos focar no primeiro mas mas ao longo do artigo falaremos sobre a concorrência. #VamosDeFlutter
Flutter é um framework [1] de desenvolvimento de aplicativos multiplataforma criado pelo Google. Ele permite que os desenvolvedores escrevam código uma vez e o executem em várias plataformas, incluindo Android, iOS, web, e dependendo da configuração funciona em com oaplicacao em Windows, macOS e Linux.
O que abordaremos:
- Introdução
- Flutter - Desenvolvimento Multiplataforma
- Flutter - Interface de Usuário com Widgets
- Dart - Linguagem de Programação
- Performance e Hot Reload
- Flutter vs React
- Conclusão
- Referências
Introdução
Como falamos anteriormente o Flutter, você poderá criar aplicativos de alta qualidade para varias plataformas, tudo a partir de um único código-fonte. A abordagem multiplataforma do Flutter permite que você alcance uma audiência mais ampla, economizando tempo e esforço no desenvolvimento, porque imagina ter que criar um código para cada plataforma para o mesmo aplicativo, são vários times para um mesmo objetivo.
O desenvolvimento mobile carece de uma celeridade por si só, não só os usuários mas os desenvolvedores podem configurar o framework de forma simples [2], e o "Visual Studio Code" é um dos frameworks mais usados para se trabalhar com o Flutter no desenvolvimento mobile, facilita usando extensões que agilizam e melhoram o fluxo de trabalho, sua fácil configuração esta detalhada em um artigo rápido e pratico de Gustavo Souza [3] que recomendo fortemente.
Flutter - Desenvolvimento Multiplataforma
Flutter é uma tecnologia incrível p,sua capacidade de criar aplicativos com um único código-fonte é realmente sensacional. Com o Flutter, os desenvolvedores têm a vantagem de evitar trabalho repetitivo ao escrever código separado para cada plataforma. Em vez disso, eles podem se concentrar em criar recursos inovadores e proporcionar experiências incríveis para os usuários. Isso é especialmente importante em um mundo onde os usuários têm dispositivos diferentes e esperam uma experiência consistente em todos eles.
Se eu tenho um iPhone e um Motorola 20 Edge eu espero que o aplicativo do banco Santander em meus dois aparelhos funcionem de forma parecidas, o mais próximo um do outro, gostaria de ver as mudanças e atualizações acontecendo nos dois em pouco tempo, e o Flutter nos permite isso.
Uma das coisas mais legais sobre o Flutter é que ele oferece uma experiência nativa em todas as plataformas. Isso significa que os aplicativos criados com o Flutter têm uma aparência e desempenho consistentes, independentemente do dispositivo em que são executados. É realmente um sonho se tornando realidade para os desenvolvedores que desejam atingir um público amplo e diversificado. E como falamos, ele não se limita em Android e IOS, o mesmo se repete para aplicações Windows, macOS e Linux, as 3 ultimas ainda não estão robustas quanto as duas primeiras mas estão crescendo e se consolidando aos poucos.
Flutter - Interface de Usuário com Widgets
No mundo do Flutter, praticamente tudo é um widget! Através dessa abordagem, você descobrirá como criar interfaces de usuário envolventes, fluidas e reativas. A vasta biblioteca de widgets prontos para uso proporciona flexibilidade na criação de layouts e designs atraentes para seus aplicativos. Ao aprender a combinar e personalizar widgets, você estará preparado para entregar uma experiência de usuário cativante e agradável.
Os widgets do Flutter são componentes reutilizáveis e personalizáveis que permitem construir layouts atraentes para seus aplicativos. Os widgets prontos para uso tornam a tarefa de projetar interfaces leves mesmo para um iniciante, a velha luta que muitos desenvolvedores têm com a interface final fica mais leve, importante lembrar que ainda se precisa de bom senso para apresentar uma tela final que brilhe os olhos.
Como vemos na imagem, é como um lego, cada parte é um widget, o cabeçalho, o corpo, o rodapé e outros, no site do flutter.dev temos acesso a biblioteca de widgets[4] e lá da pra testar ate códigos antes de incluímos no nosso código final como no exemplo abaixo.
import 'dart:math' as math;
import 'package:flutter/material.dart';
/// Flutter code sample for [AnimatedBuilder].
void main() => runApp(const AnimatedBuilderExampleApp());
class AnimatedBuilderExampleApp extends StatelessWidget {
const AnimatedBuilderExampleApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: AnimatedBuilderExample(),
);
}
}
class AnimatedBuilderExample extends StatefulWidget {
const AnimatedBuilderExample({super.key});
@override
State<AnimatedBuilderExample> createState() => _AnimatedBuilderExampleState();
}
/// AnimationControllers can be created with `vsync: this` because of
/// TickerProviderStateMixin.
class _AnimatedBuilderExampleState extends State<AnimatedBuilderExample>
with TickerProviderStateMixin {
late final AnimationController _controller = AnimationController(
duration: const Duration(seconds: 10),
vsync: this,
)..repeat();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
child: const Center(
child: Text('Whee!'),
),
),
builder: (BuildContext context, Widget? child) {
return Transform.rotate(
angle: _controller.value * 2.0 * math.pi,
child: child,
);
},
);
}
}
É um widget de animação, sugiro copiar o código e testar ele em seu framework ou no site com próprio flutter.dev [5].
Dart - Linguagem de Programação
A linguagem Dart é a base do Flutter, projetada para ser fácil de aprender e eficiente. A sintaxe limpa e organizada do Dart torna a leitura e a compreensão do código muito mais fáceis, o que é especialmente benéfico para estudantes iniciantes. Além disso, o fato de ser uma linguagem orientada a objetos permite que você crie classes e objetos para estruturar seu código de forma mais eficiente e modular.
A "tipagem" forte e estática do Dart é uma característica interessante porque deixa as regras mais claras. Você precise declarar explicitamente o tipo de suas variáveis, isso traz benefícios significativos em termos de detecção de erros e segurança do código. Essa abordagem garante que muitos erros comuns sejam evitados durante a execução do programa, tornando-o mais confiável e robusto.
Seus recursos avançados têm funções assíncronas e classes genéricas. Esses recursos adicionais do Dart permitirão que você aborde desafios maiores no desenvolvimento de aplicativos e expanda suas habilidades de programação para alcançar novos patamares.
Performance e Hot Reload
O desempenho e o recurso de Hot Reload no Flutter é impressionante! É encantador com a velocidade e a fluidez que essa tecnologia proporciona aos aplicativos. O Flutter é conhecido por oferecer uma experiência nativa, garantindo que os aplicativos sejam rápidos, responsivos e ofereçam uma sensação de alta qualidade aos usuários.
O recurso de Hot Reload é uma verdadeira dádiva para os desenvolvedores! Com ele, posso fazer alterações no código e ver as atualizações instantaneamente no aplicativo em execução, sem precisar reiniciá-lo. Isso economiza muito tempo durante o desenvolvimento, permitindo que seja testado rapidamente diferentes ideias e aprimore a interface do usuário de forma ágil. É como uma superpotência que me ajuda a criar aplicativos de forma mais eficiente e eficaz.
E falando de desenvolvedoer para desenvolvedoer, o Hot Reload permite visualizar instantaneamente as alterações feitas no código, agilizando o processo de desenvolvimento e permitindo uma experiência de programação mais fluida.
Flutter vs React
Chegamos num ponto bem curioso e que já rendeu muitas discussões e ainda renderá ao longo dos anos no mundo do desenvolvimento mobile.
Vamos comparar o Flutter com o React, outro framework popular para o desenvolvimento de aplicativos. É uma análise importante para os desenvolvedores que desejam escolher o framework mais adequado para seus projetos. Ambos são populares para o desenvolvimento de aplicativos, mas possuem diferenças significativas em termos de linguagem, arquitetura e desempenho.
O React é baseado em JavaScript e é amplamente utilizado para criar interfaces de usuário em aplicações web. Com o React, os desenvolvedores podem criar componentes reutilizáveis que são atualizados de forma reativa em resposta a mudanças nos dados, proporcionando uma experiência de usuário dinâmica e interativa. Além disso, o React Native, uma extensão do React, permite desenvolver aplicativos móveis para Android e iOS, compartilhando grande parte do código entre as plataformas.
Por outro lado, o Flutter usa a linguagem de programação Dart como já falamos e adota uma abordagem mais rica em widgets para a construção de interfaces de usuário. Com o Flutter, os desenvolvedores podem criar interfaces atraentes e fluidas, semelhantes às interfaces nativas dos dispositivos. O código Dart é compilado diretamente para código nativo, resultando em um desempenho excepcionalmente rápido e suave.
Uma das principais vantagens tambem já citadas do Flutter é o recurso de Hot Reload, que permite que os desenvolvedores vejam instantaneamente as alterações no código refletidas no aplicativo em execução, agilizando o processo de desenvolvimento e facilitando a experimentação e a depuração. Isso torna o Flutter uma excelente escolha para desenvolvedores que valorizam a produtividade e a rapidez durante o desenvolvimento de aplicativos.
A escolha entre Flutter e React dependerá das necessidades e objetivos específicos do projeto, mas vemos aqui alguns estudos feitos [6]:
e ainda temos esse aqui [7]:
Des forma mais aprofundada Michael Kapias nos deu um bom estudo sobre isso [8].
Conclusão
Em conclusão, exploramos os empolgantes temas do Flutter e da linguagem de programação Dart, bem como suas características distintas e benefícios. O Flutter se destaca como uma opção excepcional para o desenvolvimento multiplataforma, permitindo que os desenvolvedores criem aplicativos de alta qualidade para Android, iOS, web e desktop com uma base de código única. Sua abordagem baseada em widgets e o recurso de Hot Reload tornam o desenvolvimento de interfaces de usuário envolventes e o processo de iteração rápido e produtivo.
A linguagem de programação Dart demonstra sua eficiência e facilidade de aprendizado, oferecendo uma sintaxe clara e organizada. Com a tipagem forte e a compilação para código nativo do Flutter, a linguagem Dart contribui para um desempenho excepcional dos aplicativos, garantindo uma experiência fluida e responsiva para os usuários.
Adicionalmente, a comparação entre o Flutter e o React mostrou que o Flutter tem várias vantagens, como desempenho superior, interfaces de usuário nativas e desenvolvimento multiplataforma simplificado. O recurso de Hot Reload e o crescimento da comunidade do Flutter destacam ainda mais seu potencial como uma escolha promissora para o desenvolvimento de aplicativos modernos.
Em resumo, o Flutter e a linguagem Dart formam uma dupla poderosa que oferece aos desenvolvedores as ferramentas necessárias para criar aplicativos impressionantes e inovadores, que atendam às necessidades de uma audiência diversificada em várias plataformas. A jornada de aprendizado nesses tópicos nos abre as portas para um mundo emocionante de possibilidades no desenvolvimento de aplicativos multiplataforma, e estou ansioso para ver como essas tecnologias continuam moldando o futuro do desenvolvimento de software.
