image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image

VT

Vicente Tuma01/08/2023 17:59
Compartilhe
Microsoft Certification Challenge #3 DP-100Recomendados para vocêMicrosoft Certification Challenge #3 DP-100

Desenvolvimento Mobile - Aplicativos multiplataforma com Dart e Flutter no Santander Dev Week 2023

  • #Dart
  • #Flutter

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:

  1. Introdução
  2. Flutter - Desenvolvimento Multiplataforma
  3. Flutter - Interface de Usuário com Widgets
  4. Dart - Linguagem de Programação
  5. Performance e Hot Reload
  6. Flutter vs React
  7. Conclusão
  8. 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.

image

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.

image

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.

image

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

image

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]:

image

e ainda temos esse aqui [7]:

image

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.

Referências:

[1] Noronha, Christiano B; O que é um framework; Disponível <https://balta.io/blog/o-que-e-um-framework> Acesso em: 1 Ago. 2023

[2] Site Flutter.dev; Install; Disponível <https://docs.flutter.dev/get-started/install> Acesso em: 1 Ago. 2023

[3] Souza, Gustavo; Desenvolvimento Mobile: Criando Projetos em Flutter mais leves e otimizados; Disponível <https://web.dio.me/articles/desenvolvimento-mobile-ESHMPA?back=%2Farticles&page=1&order=oldest> Acesso em: 1 Ago. 2023

[4] Site Flutter.dev; Widget catalog; Disponível <https://docs.flutter.dev/ui/widgets> Acesso em: 1 Ago. 2023

[5] Site Flutter.dev; AnimatedBuilder class; Disponível <https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html> Acesso em: 1 Ago. 2023

[6] Site treinaweb.com; Disponível <https://www.treinaweb.com.br/blog/react-native-ou-flutter-por-qual-comecar> Acesso em: 1 Ago. 2023

[7] Site tabline.comTeam Tabline ; Disponível <https://www.tabnine.com/blog/flutter-vs-react-native/> Acesso em: 1 Ago. 2023

[8] Kapias, Michael; O que é um framework; Disponível <https://fireart.studio/blog/flutter-vs-react-native-what-app-developers-should-know-about-cross-platform-mobile-development/> Acesso em: 1 Ago. 2023

Compartilhe
Recomendados para você
XP Inc. - Cloud com Inteligência Artificial
Microsoft AI for Tech - Azure Databricks
Microsoft Certification Challenge #3 DP-100
Comentários (0)
Recomendados para vocêMicrosoft Certification Challenge #3 DP-100