Responsividade (Em desenvolvimento)


Você sabe como deixar seus apps responsíveis de modo que haja compatibilidade com diversos dispositivos?

.

Atualmente, existem dispositívos móveis com diversas resoluções, bem como tablets e IPads, portanto, o tema "responsividade" é o tema mais importante para o desenvolvimento para dispositívos móveis. 

Sendo assim, você se pergunta: como fazer um aplicativo que se adapte para a maioria, ou senão todos estes dispositivos?

É aí que entra a responsividade, ainda mais hoje em que há o Flutter Web e Flutter Desktop.

Para este artigo, iremos utilizar o flutter web para ficar mais prático.

ATIVANDO O FLUTTER WEB

De modo bem simples, para aqueles que não sabem como usá-lo, basta usar estes comandos:

flutter channel master
flutter upgrade
flutter config --enable-web

Pronto, agora você já pode começar um novo projeto que, em regra, é para estar funcionando a função web para o flutter.

O QUE É RESPONSIVIDADE?

É utilizado para que se possa reorganizar seus componentes de maneira a aproveitar todo o espaço da tela a cada vez que você muda o seu tamanho.

Para se montar um projeto, é necessário primeiramente se pensar em como ele ficaria no celular e, a partir daí, partir para o desktop ou web. Isso se chama de mobile first, que surgiu, mais ou menos, em 2014 quando os dispositivos móveis começaram a tomar espaço e se tornarem a tela principal.

Vamos iniciar um projeto simples com um Scaffold e um Container com largura e altura de 200px:

class _MyHomePageState extends StateMyHomePage {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Teste"),
),
body: Center(
child: Container(
height: 200,
width: 200,
color: Colors.black,
),
),
);
}
}

Você agora pode fazer o teste e verificar que, ao redimensionar a janela, o quadrado permanece do mesmo tamanho.

MediaQuery

É um objeto derivado do MaterialApp que auxilia informando a largura e altura da tela total e por meio disso é possível ter o valor exato do tamanho do dispositivo. 

Para utilizá-lo, para obter a largura e altura, deve-se utilizá-lo dentro do Widget build, pois é necessário o uso do context utilizando a propriedade size:

MediaQuery.of(context).size.width;
MediaQuery.of(context).size.height;

Nos exemplos acima, ele ocupará toda a tela da aplicação.

Iremos trabalhar com porcentagem para ficar mais prático a utilização da responsividade. Para isso, basta multiplicar o tamanho por 0.(porcentagem desejada):

Container(
height: MediaQuery.of(context).size.height * 0.30,
width: 200,
color: Colors.black,
),

No exemplo dado, eu defini o valor em 30% da tela.

 

ConstrainedBox

É um widget pronto que impõe uma restrição no tamanho do componente desejado.

Lembrando que o MediaQuery também pode realizar tal manobra, vejamos um exemplo:

double maxValue(double size, double max){
if (size max) {
return size;
} else {
return max;
}
}

Esta função irá retornar um double no qual verificará se o tamanho desejado size for menor do que o máximo max desejado, então ele retornará o próprio size, senão, retornará o tamanho max desejado. 

Container(
height: maxValue(MediaQuery.of(context).size.height * 0.50, 300),
width: 200,
color: Colors.black,
),

container irá redimensionar até o limite de 300px, a partir daí, não irá mais redimensionar.

Ok, mas existe o ConstrainedBox que torna essa função mais fácil:

Ele exige um parâmetro constraints que recebe um BoxConstraints onde é possível limitar o mínimo e máximo de crescimento do componente.

ConstrainedBox(
constraints: BoxConstraints(
minWidth: 50,
minHeight: 50,
maxWidth: 100,
maxHeight: 100
),
child: Container(
height: MediaQuery.of(context).size.height * 0.50,
width: MediaQuery.of(context).size.height * 0.25,
color: Colors.black,
),
)

Assim, fica muito mais fácil impor restrições.

Por hoje, é somente isso. Aguardem o próximo artigo que iremos tratar dos demais itens a respeito da responsividade.