Crie seu design e gere código para Flutter — Conheça o Adobe Xd
Compartilhe sua história com designs realistas. Wireframe, animações, prototipagem, colaboração e muito mais. Tudo isso em uma ferramenta de design de UI/UX.
Isso é o que a ferramenta do Adobe Xd propõe mas, e se eu te disser que ela pode gerar código Dart pronto para seu projeto? Legal né? Então vamos conhecer melhor essa ferramenta.
Onde quero chegar…
Já se perguntou quanto tempo leva a parte de codificação de telas em um aplicativo? É preciso muito esforço, pois você precisa pensar sobre a cor adequada que corresponde ao seu layout de IU, acessibilidade, contraster, componentes reaproveitáveis e muito mais. Às vezes, tudo isso pode levar tempo que saía do seu cronograma . É ai que entra uma técnica simples e inteligente para agilizar esse processo e você pode dobrar a velocidade de sua codificação de front-end, deixando até mesmo para especialistas na área de UI/UX trabalharem.
Produtividade pode ser dividido em duas coisas importantes que são de extrema importância durante o desenvolvimento de um projeto. Para atingir a eficiência máxima, o tempo deve ser mínimo e a produtividade deve ser alta.
Conhecendo o Adobe XD
O plug-in do Adobe XD gera o código Dart para elementos de design que podem ser colocados diretamente na base de código de seu projeto. Você pode gerar código para Widgets individuais em seu projeto ou até mesmo o design de sua tela em minutos. Ao fazer alterações em seus designs no XD, você pode executar o plug-in e atualizar o código do seu aplicativo instantaneamente. Além disso, se você estiver usando um IDE que suporte Flutter, como Visual Studio Code, Android Studio, você pode executar e testar seu aplicativo Flutter e observar instantaneamente as mudanças em seu aplicativo com o recurso hot reload do Flutter. Dessa forma, leva apenas alguns minutos para chegar a um código real desde o design.
Usando um desenho aleatório, criamos uma tela de login para o aplicativo. Em primeiro lugar, perceba que rapidamente o design ja fica atrativo e pronto para virar código.
Instalando o Plug-in
Com o design pronto para teste, acesse a página Plug-in no XD no canto inferior esquerdo e procure por Flutter.
Após a instalação, você pode enxergar o painel da IU abaixo selecionando Plugin> XD to flutuar> Painel da IU. Para acessar o projeto Flutter que criamos antes, você pode exportar os códigos selecionando a pasta e clicando em Export All widgets e você pode definir as opções adicionais que deseja no mesmo painel.
Como você pode ver na imagem abaixo, em vez de converter todo o nosso design em código, você pode exportá-lo selecionando os objetos um por um.
Agora sim! Vamos importar esse design para o Flutter
Para que possamos adicionar os códigos de design que criamos e vê-los na tela exatamente como os projetamos é preciso adicionar o pacote adobe_xd em nosso arquivo pubspec.yaml.
dependencies:
adobe_xd: ^1.1.0+1
Sem muito mistério, afinal código gerado é exatamente uma pagina que você faria se desenvolvesse do zero. Quando transferimos todos os códigos para o projeto Flutter, obtemos resultados como a que está acima.
É tão simples de usar quanto ao exemplo abaixo:
import 'Home.dart';
import 'package:flutter/material.dart';void main() {
runApp(MyApp());
}class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'XD to Flutter example',
theme: ThemeData(
visualDensity: VisualDensity.adaptivePlatformDensity,
),// Home is an artboard exported from Adobe XD
home: Home(
// This assigns a handler to a "Tap Callback Name" that was defined
// on the "Latest Adventures" card in the XD file:
onTapAdventure: () => print("You tapped the Latest Adventure."),
),);
}
}
É empolgante pensar que, com o aumento e o desenvolvimento de tais complementos no futuro, podemos traduzir nossos designs em código de forma mais completa com o XD to Flutter. Esse é um add-on muito útil para aqueles que desejam criar protótipos que podem funcionar com o que você projetou, ter uma visão básica do seu código e uma visão melhor de como o aplicativo ficará em nossos dispositivos.
Esse artigo foi inspirado e traduzido nos artigos de Merve Arslan e Hemshree Madaan