Tutorial: Como Usar MediaQuery no Flutter
O que é MediaQuery?
O MediaQuery é um recurso poderoso do Flutter que permite acessar informações sobre o tamanho e a orientação da tela. Ele é essencial para criar interfaces responsivas que se adaptam a diferentes tamanhos de dispositivos.
Quando usar MediaQuery?
O MediaQuery pode ser usado sempre que você precisar ajustar o layout com base no tamanho da tela ou em outras propriedades, como largura, altura ou orientação. Exemplos comuns incluem:
- Redimensionar widgets dinamicamente.
- Ajustar espaçamento com base na largura da tela.
- Alterar a orientação de elementos entre paisagem e retrato.
Configurando MediaQuery para Obter Tamanhos
A partir de versões recentes do Flutter, é possível usar MediaQuery.sizeOf(context) para obter as dimensões da tela de maneira mais direta e intuitiva.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MediaQueryExample(),
);
}
}
class MediaQueryExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
final size = MediaQuery.sizeOf(context);
return Scaffold(
appBar: AppBar(
title: const Text("Exemplo MediaQuery"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Largura: \${size.width.toStringAsFixed(2)}"),
Text("Altura: \${size.height.toStringAsFixed(2)}"),
if (size.width > 600)
const Text("Modo Tablet")
else
const Text("Modo Celular"),
],
),
),
);
}
}
Ajustando Layouts com Base na Orientação
class OrientationExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
final orientation = MediaQuery.orientationOf(context);
return Scaffold(
appBar: AppBar(
title: const Text("Exemplo de Orientação"),
),
body: Center(
child: orientation == Orientation.portrait
? const Text("Modo Retrato")
: const Text("Modo Paisagem"),
),
);
}
}
Personalizando o Layout com Tamanhos Relativos
class ResponsiveLayoutExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
final size = MediaQuery.sizeOf(context);
return Scaffold(
body: Padding(
padding: EdgeInsets.all(size.width * 0.05), // 5% da largura
child: Text(
"Texto Responsivo",
style: TextStyle(fontSize: size.width * 0.04), // 4% da largura
),
),
);
}
}
Conclusão
O MediaQuery continua sendo uma ferramenta essencial no Flutter para criar aplicações responsivas. Com o advento de novos métodos como MediaQuery.sizeOf(context), ficou ainda mais simples e intuitivo acessar informações sobre o tamanho da tela e adaptar os layouts dinamicamente.
