Flutter - Usando o widget MediaQuery


Este artigo apresenta um resumo dos principais Widgets básicos usados nas aplicações Flutter.

O que é o Flutter ?

O Flutter é um SDK de aplicativo móvel do Google que ajuda a criar aplicativos móveis modernos para iOS e Android usando uma única (quase) base de código.

Se você não conhece o Flutter veja o meu artigo :  Flutter - Primeiros contatos e impressões

Usando o widget MediaQuery

No Flutter, existe apenas uma unidade de medida: o pixel lógico. Como conseqüência, a maioria dos problemas de layout e dimensionamento são resolvidos usando a matemática, e grande parte dessa matemática esta baseada no tamanho da tela.

Por exemplo, se você quiser que um widget tenha um terço da largura da tela, como não há uma unidade de medial percentual, você vai precisar pegar o tamanho da tela via código usando o widget MediaQuery.

O MediaQuery é um widget semelhante ao Theme, no qual você pode usar o BuildContext para acessá-lo em qualquer lugar do aplicativo. Isso é feito por meio de um método da classe MediaQuery chamado of.

Nota: Os widgets MediaQuery e Theme são widgets herdados.(InheritedWidgets)

O método of consulta a árvore, localiza a classe MediaQuery mais próxima e fornece uma referência a essa instância do MediaQuery em qualquer lugar do seu aplicativo.

Desta forma a classe MediaQuery é uma ótima forma de obter informações do tamanho da tela na qual seu aplicativo esta sendo renderizado. Você acessa essas informações chamando o método estático MediaQuery.of(context).size, que retorna um objeto Size com o tamanho da largura e altura do dispositivo.

Depois de capturar as informações, você pode usá-las para determinar o tamanho de um widget, com base no tamanho da tela. Por exemplo, para obter 80% da largura do dispositivo, você poderia escrever um código assim:


  
final width = MediaQuery.of(context).size.width * 0.8;
 

Assim, você usa o widget MediaQuery se estiver tentando obter informações específicas sobre o seu dispositivo físico ou se deseja manipular o dispositivo. Algumas das tarefas que podemos fazer usando este widget:

Abaixo temos uma tabela contendo as principais propriedades do MediaQuery:

Opção Descrição
bool accessibleNavigation Indica se o usuário esta usnado um serviço de acessabilidade;
bool alwaysUse24HourFormat Indica se a hora usa o formato de 24 horas;
bool boldText Indica se a plataforma solicita fonte em negrito;
double devicePixelRatio Indica o numero de pixels no dispositivo para cada pixel lógico;
bool disableAnimations Indica se a plataforma solicita desabilitar animações;
bool invertColors Indica se as cores estão sendo invertidas;
Orientation orientation Indica a orientação : retrato ou paisagem
EdgeInsets padding Indica as partes do display que estão parcialmente sendo obscurecidas pela UI do sistema, como a barra de status;
Brightness platformBrightness Rteorna o nível de brilho do display;
Size size Retorna Tamanho da mídia em pixels lógicos;
double textScaleFactor Indic ao numero de pixels da fonte para cada pixel lógico
EdgeInsets viewInsets Indica as partes do display que estão completamente obscurecidos pela UI do sistema, como o teclado;

A seguir veremos alguns exemplos práticos da utilização deste widget.

recursos :

Usando o widget MediaQuery na prática

No Visual Studio Code tecle CTRL+ SHIFT+P para abrir a paleta de comandos e a seguir selecione a opção : Fluter:New Project



A seguir informe o nome do projeto : flut_mediaquery e tecle ENTER

Na janela de diálogo a seguir selecione a pasta onde o projeto vai ser salvo e clique em :
Select a folder to create the project in

O Flutter vai criar um projeto padrão onde todo o código da aplicação vai estar no arquivo main.dart dentro da pasta lib do projeto.

A seguir substitua o código gerado no arquivo main.dart na pasta lib.

vamos iniciar definindo o código padrão usando o MaterialApp onde estamos desabilitando a label de Debug e definindo o Widget MyApp() no parâmetro home que é a porta de entrada da aplicação:

import 'package:flut_mediaquery/usando_mediaquery.dart';
import 'package:flutter/material.dart';

void main(){
  runApp(  MaterialApp(
    debugShowCheckedModeBanner: false,
    home:   UsandoMediaQuery(),
  ));
}

A seguir vamos criar o StatefulWidget UsandoMediaQuery() onde usamos o Scaffold definindo a AppBar, o título centralizado, e em body definimos um widget Column onde estamos usando o widget Text para exibir os valores das propriedades do MediaQuery obtidas.

import 'package:flutter/material.dart';
class UsandoMediaQuery extends StatefulWidget {
  @override
  _UsandoMediaQueryState createState() => _UsandoMediaQueryState();
}
class _UsandoMediaQueryState extends State<UsandoMediaQuery> {
  @override
  Widget build(BuildContext context) {
    MediaQueryData deviceInfo = MediaQuery.of(context);
        return Scaffold(
	        appBar: AppBar(
	          title: Text('Media Query - Exemplo'),
            	centerTitle: true,
	        ),
	        body: Padding(
	           padding: const EdgeInsets.all(10.0),
	           child: Column(
            	crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Text('Tamanho    : ${deviceInfo.size}', style: TextStyle(fontSize: 20.0)),
                        Text('Orientação : ${deviceInfo.orientation}',style: TextStyle(fontSize: 20.0)),
                        Text('Hora(24 h) : ${deviceInfo.alwaysUse24HourFormat}',style: TextStyle(fontSize: 20.0)),
                        Text('Brilho     : ${deviceInfo.platformBrightness}',style: TextStyle(fontSize: 20.0)),
                        Text('Padding    : ${deviceInfo.padding}',style: TextStyle(fontSize: 20.0)),
                     ],
                ),
            ),
        );
     }
}

Aqui estamos usando o MediaQuery dentro do Widget build(BuildContext context), pois ele requer um BuildContext como argumento.

A seguir estamos exibindo algumas das propriedades obtidas a partir da instãncia do MediaQuery.

Como vemos a utilização do MediaQuery usando o método of é bem simples e nós abre um leque de possibilidades. Em outro artigo veremos mais exemplos práticos usando este widget.

Para saber mais acompanhe os artigos na seção Flutter e as vídeo aulas do meu canal no Youtube : Jose Carlos Macoratti - YouTube

E estamos conversados...

Pegue o código dos arquivos dart aqui: usando_mediaquery.txt

"Levando ele mesmo(Jesus) em seu corpo os nossos pecados sobre o madeiro, para que, mortos para os pecados, pudéssemos viver para a justiça; e pelas suas feridas fostes sarados."
1 Pedro 2:24

Referências:


José Carlos Macoratti