Flutter: aplicaciones receptivas y adaptables

Siempre que desarrollamos una aplicación, generalmente la desarrollamos para un solo dispositivo, pero no está diseñada para usarse solo en un solo dispositivo, sino en diferentes dispositivos de diferentes tamaños y, en caso de flutter, también nos brinda la posibilidad de desarrollar para la web en al mismo tiempo. Así que tenemos que lidiar con una gama de diferentes tamaños. Aquí discutiremos cómo lidiar con este problema.

Para solucionar este problema, utilizaremos la clase MediaQuery de Flutter. Esta clase nos proporciona información relacionada con el tamaño de la pantalla en la que se ejecuta la aplicación. el atributo de tamaño nos proporciona el tamaño y tiene el ancho y alto del dispositivo.

Estaremos desarrollando una aplicación simple que nos dirá en qué plataforma estamos y el ancho del dispositivo. Es solo una aplicación simple que nos ayudará a comenzar con aplicaciones receptivas. Probaremos la aplicación en flutter para la web para verificar su capacidad de respuesta.

Primero, vamos a inicializar la aplicación en main.dart con un widget de inicio simple que desarrollaremos en un archivo dart separado llamado home.dart .

import 'package:flutter/material.dart';
import 'home.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'GeeksforGeeks',
      home: Home(),
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}

En home.dart estaremos escribiendo algunas funciones para definir los tamaños de los diferentes dispositivos. Hemos definido las funciones para comprobar el tamaño del dispositivo. MediaQuery.of(context).size.width requiere un contexto que es un contexto de compilación, por lo que usaremos estas funciones dentro de la función de compilación. 

import 'package:flutter/material.dart';
  
double deviceSize(BuildContext context) => MediaQuery.of(context).size.width;
  
class Home extends StatelessWidget {
  static bool isMobile(BuildContext context) =>
      MediaQuery.of(context).size.width < 800;
  
  static bool isTablet(BuildContext context) =>
      MediaQuery.of(context).size.width >= 800 &&
      MediaQuery.of(context).size.width < 1200;
  
  static bool isDesktop(BuildContext context) =>
      MediaQuery.of(context).size.width >= 1200;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              width: double.infinity,
              height: 50,
              color: Colors.green,
              child: Center(
                child: Text(
                  'GeeksforGeeks',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: isDesktop(context)
                  ? Desktop()
                  : isTablet(context)
                      ? Tablet()
                      : Mobile(),
            )
          ],
        ),
      ),
    );
  }
}

Después de esto, definimos tres widgets más para manejar diferentes tamaños. Hemos definido los widgets en el mismo archivo dart pero para desarrollar widgets complejos podemos crear archivos separados para estos widgets.

class Desktop extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Desktop ${deviceSize(context).toInt()}'));
  }
}

modo de escritorio

class Tablet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Tablet ${deviceSize(context).toInt()}'));
  }
}

Modo tableta

class Mobile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Mobile ${deviceSize(context).toInt()}'));
  }
}

Ejecute la aplicación y ajuste la ventana para ver las diferentes salidas.

Salida para el tamaño de la pantalla móvil: