Os visitantes de seu aplicativo e site esperam uma experiência de usuário personalizada para seus dispositivos. Uma experiência de usuário ruim não proporcionaria a retenção de usuário necessária para atingir suas metas de marketing e vendas.
Os dispositivos disponíveis para os usuários têm especificações diferentes, por isso o design responsivo é importante.
Neste artigo, abordaremos como criar designs responsivos no Flutter para dispositivos móveis, começando com uma rápida recapitulação de por que o design responsivo é importante para o Flutter.
Por que o design responsivo é importante no Flutter?
Algumas vantagens vêm com a criação de um aplicativo Flutter com design responsivo.
A consistência em seu aplicativo em diferentes tamanhos de tela garante que você tenha uma gama maior de usuários. Tablets e dispositivos móveis menores podem desfrutar de uma experiência de usuário sob medida.
Além disso, a taxa de retenção em seu aplicativo tende a ser mais alta depois que você considera o design responsivo.
Desde Flutter é uma boa escolha para aplicativos da web e móveis , o design responsivo garante que o apelo de seu O aplicativo é consistente e oferece aos usuários uma experiência perfeita, independentemente do tamanho do dispositivo em uso.
Nem é preciso dizer que, se você levar em consideração a capacidade de resposta em seu aplicativo, também evita avaliações negativas. Existem mais de dois milhões de aplicativos na App Store e mais de três milhões a mais na Google Play Store . A maioria dos usuários decide quais aplicativos baixar com base nas análises.
Você deve gostar dessas análises. Portanto, você deve considerar a capacidade de resposta em sua lista de verificação de desenvolvimento de aplicativos.
Opções para design responsivo no Flutter
O design responsivo no Flutter não tem uma solução única para todos. Existem diferentes abordagens para obter capacidade de resposta em seu aplicativo Flutter.
Algumas das maneiras populares de fazer isso, de acordo com documentação oficial , inclui o seguinte:
LayoutBuilder
LayoutBuilder tem uma propriedade builder que pode nos fornecer o objeto BoxConstraint, que contém as informações de restrição do widget específico. Podemos usar informações como maxWidth e maxHeight para determinar como queremos renderizar nossa exibição.
Esses valores nos ajudariam a ajustar nossa exibição com base nas restrições de tamanho alocadas para nosso widget. Mais importante, quando esses valores mudam devido a eventos como a rotação da tela, LayoutBuilder chama nossa função de construção, que reconstrói o widget com base nas novas restrições que temos.
MediaQuery
O
Sempre que essas configurações forem alteradas, nosso método de construção também será chamado, o que garante que nossa árvore de widgets seja reconstruída para refletir as alterações mais recentes.
AspectRatio
AspectRatio é um widget que tenta dimensionar a criança para uma proporção de aspecto específica.
O widget primeiro tenta a maior largura permitida pelas restrições de layout. A altura do widget é determinada aplicando a proporção dada à largura, expressa como uma proporção da largura para a altura.
Uma abordagem mais fácil para a capacidade de resposta no Flutter
Enquanto os documentos oferecer boas opções, este artigo explorará uma abordagem mais fácil para o design responsivo. É aconselhável que você avalie isso adequadamente para saber se pode ser a abordagem certa para seu aplicativo.
Graças à natureza de código aberto do Flutter e aos esforços colaborativos da comunidade Flutter, existem dois pacotes para você pode usar para obter capacidade de resposta:
FlutterScreenUtil Sizer responsivo
Vamos cobrir FlutterScreenUtil neste tutorial.
Primeiros passos
Para começar, vamos construir uma tela de interface de usuário simples que se parece com a imagem abaixo:
Ao criar interfaces de usuário para aplicativos móveis, é sempre melhor não codificar valores para os tamanhos de nossos widgets e, em vez disso, usar porcentagens para nossos tamanhos. No Flutter, isso pode ser feito usando a classe MediaQuery.
Para criar a tela acima, aqui está o trecho de código que estamos usando:
import’package: flutter/material.dart’; class HomePage extends StatelessWidget {const HomePage ({Key key}): super (key: key); @override Widget build (BuildContext context) {return SafeArea (child: Scaffold (body: Padding (padding: EdgeInsets.all (20), child: SingleChildScrollView (child: SizedBox (width: double.infinity, child: Column (children: [ Container (height: MediaQuery.of (context).size.height/2, width: MediaQuery.of (context).size.width/2, decoração: BoxDecoration (image: DecorationImage (image: AssetImage (‘assets/family.png’), fit: BoxFit.cover)),), Text (“Lorem Ipsum”, style: TextStyle (fontSize: 40, fontWeight: FontWeight.w700)), SizedBox (height: 20,), Text (“Lorem Ipsum is simplesmente texto fictício da indústria de impressão e composição. Lorem Ipsum tem b até mesmo o texto fictício padrão da indústria desde os anos 1500, quando um impressor desconhecido pegou uma galé de tipos e embaralhou para fazer um livro de amostras de tipos. Ele sobreviveu não apenas cinco séculos, mas também ao salto para a composição eletrônica, permanecendo essencialmente inalterado. Foi popularizado na década de 1960 com o lançamento de folhas de Letraset contendo passagens de Lorem Ipsum e, mais recentemente, com software de editoração eletrônica como Aldus PageMaker incluindo versões de Lorem Ipsum. ,],),),),)),);}}
Como você pode ver na imagem acima, nosso texto seria difícil de ler em telas maiores.
Simplesmente prosseguimos adicionando as dependências para o pacote que queremos nosso arquivo pubspec.yaml.
Para fazer isso, execute o seguinte comando em seu terminal:
flutter pub add flutter_screenutil
Inicializando o pacote
Para usar o pacote FlutterScreenUtil, você primeiro precisa inicializar o widget pai em seu aplicativo, que em nosso caso é o MaterialApp.
Isso seria parecido com este:
@override Widget build (BuildContext contexto) {return ScreenUtilInit (designSize: Size (360, 690), b uilder: ()=> MaterialApp (título:’Demonstriveness Demo’, debugShowCheckedModeBanner: false, theme: ThemeData (primarySwatch: Colors.blue,), home: HomePage ()),); }
O widget de tamanho de design é opcional e, se não for fornecido, o padrão será usar os valores abaixo:
static const Size defaultSize=Size (360, 690);
Adoro usar as funções de extensão do pacote FlutterScreenUtil. Para fazer isso, basta importar o pacote para sua biblioteca:
import’package: flutter_screenutil/flutter_screenutil.dart’;
Para locais onde temos valores de altura, adicionaríamos a função de extensão para ele. O mesmo para valores de largura e tamanhos de texto também.
Isso seria parecido com o código abaixo:
Container (largura: 70, altura: 250, filho: Texto (“Design responsivo”, estilo: TextStyle (fontSize: 18))) Container (padding: EdgeInsets.all (10), height: MediaQuery.of (context).size.height/2, width: MediaQuery.of (context).size.width/2, decoração: BoxDecoration (image: DecorationImage (image: AssetImage (‘assets/family.png’), fit: BoxFit.cover)),), Container (largura: 70.w,//Escalonado com base na largura da tela; altura: 250.h,//Escalonado com base na altura da tela; child: Text (“Responsive Design”, style: TextStyle (fontSize: 18.sp))//Fonte adaptada) Container (padding: EdgeInsets.all (10.r) ,///Adapte de acordo com o menor de largura ou altura altura: 0.5.sh,//50% de nossa altura de tela largura: 0.5.sw,//50% de nossa largura de tela decoração: BoxDecoration (imagem: DecorationImage (imagem: AssetImage (‘assets/family.png’), fit: BoxFit.cover)) ,),
Uma vez que incluímos as alterações necessárias em nosso código inicial, usando os valores de extensão do pacote FlutterScreenUtil, nossa classe HomePage agora deve ter a seguinte aparência:
import’package: flutter/material.dart’; import’package: flutter_screenutil/flutter_screenutil.dart’; class HomePage extends StatelessWidget {const HomePage ({Key key}): super (key: key); @override Widget build (BuildContext context) {return SafeArea (child: Scaffold (body: Padding (padding: EdgeInsets.all (20.r), child: SingleChildScrollView (child: SizedBox (width: double.infinity, child: Column (children): [Container (height: 0.5.sh, width: 0.5.sw, decoration: BoxDecoration (image: DecorationImage (image: AssetImage (‘assets/family.png’), fit: BoxFit.cover)),), Text (“Lorem Ipsum”, style: TextStyle (fontSize: 40.sp, fontWeight: FontWeight.w700)), SizedBox (height: 20.h,), Text (“Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição. Lorem Ipsum tem sido o texto fictício padrão da indústria desde o Anos 1500, quando um impressor desconhecido pegou uma galé de tipos e embaralhou para fazer um livro de espécimes de tipos. Ele sobreviveu não apenas cinco séculos, mas também ao salto para a composição eletrônica, permanecendo essencialmente inalterado. Ele foi popularizado na década de 1960 com o lançamento de folhas de Letraset contendo passagens de Lorem Ipsum e, mais recentemente, com software de editoração eletrônica como Aldus PageMaker incluindo versões de Lorem Ipsum. )),],),),),)),);}}
Se executarmos nosso aplicativo, teremos os seguintes resultados:
Antes
Depois
Nas imagens acima, você pode ver como os widgets se redimensionam com base no tamanho do dispositivo para caber perfeitamente em cada um dos dispositivos, e a principal conclusão é que isso foi conseguido usando poucas linhas de código.
O Sizer responsivo funciona de maneira semelhante ao FlutterScreenUtil, e o processo de instalação também é semelhante ao do pacote acima. Você só precisa adicionar a importação para ele e usar as mesmas extensões para largura e altura adaptadas.
Considerações finais
O design de IU consistente precisa de capacidade de resposta. Esses pacotes tornam mais fácil conseguir muito a esse respeito, sem muitas linhas de código.
Esperamos que você explore isso em seu próximo aplicativo e faça o trabalho com muito mais facilidade, caso não tenha tentado isso antes.
