Cree una interfaz de usuario receptiva con Flutter

En este artículo, repasaremos los diferentes widgets con los que podemos crear aplicaciones receptivas con Flutter.

1. El Creador de diseño:

Crea un árbol de widgets que puede depender del tamaño del widget principal. Esto es útil si queremos cambiar u ocultar algo dependiendo del tamaño principal.

LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
            
         // constraints provide us with maxWidth,maxHeight etc, using 
         // which we can show different widgets accordingly
         if (constraints.maxWidth > 600) {
             
            // as the width is greater than 600px,
            // we'll show wide screen container
            return _buildWideScreenContainers();
          } else {
            return _buildPortraitContainer();
          }
        },
),

Veamos eso en una interfaz de usuario real.

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(
      home: Home(),
    );
  }
}
  
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:
          AppBar(title: Text("Geeks for Geeks"), backgroundColor: Colors.green),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
            
          // constraints provide us with maxWidth,maxHeight etc, using
          // which we can show different widgets accordingly
            
          if (constraints.maxWidth > 600) {
            // as the width is greater than 600px, we'll show wide screen container
            // with two containers in a row
              
            return _buildWideScreenContainers();
          } else {
            return _buildPortraitContainer();
          }
        },
      ),
    );
  }
  
  Widget _buildPortraitContainer() {
      
// here we're returning a single container since the phone
// doesn't has the required width (600px)
    return Center(
      child: Container(
        height: 100.0,
        width: 100.0,
        color: Colors.red,
      ),
    );
  }
  
  Widget _buildWideScreenContainers() {
      
// here we're returning double containers since the phone
// has the required width (600px)
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            height: 100.0,
            width: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            width: 100.0,
            color: Colors.yellow,
          ),
        ],
      ),
    );
  }
}

Cuando ejecutamos el código escrito arriba, esto es lo que obtenemos.

Observe cómo vemos un solo cuadro cuando está en modo vertical y cuadros dobles cuando giramos el teléfono.

2. MediaQuery

MediaQuery también nos permite tener las restricciones. Sin embargo, MediaQuery no tomará restricciones del widget principal, sino que las tomará de todo el diseño. Veamos un ejemplo usando MediaQuery(), donde ocultamos AppBar() dependiendo del ancho de la pantalla.

class MediaQueryExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenW = MediaQuery.of(context).size.width;
    print(screenW);
  
    return Scaffold(
        
      // when screen's width is less than 600px, 
      // it shows a appbar, when it's over 600px,
      // it hides it.
      appBar: screenW <= 600
          ? AppBar(
              title: Text("Geeks for Geeks"), backgroundColor: Colors.green)
          : null,
      body: Center(
        child: Text("Mediaquery example"),
      ),
    );
  }
}

Usando MediaQuery(), podemos tener el tamaño de la pantalla, la relación de aspecto y otros datos útiles.

final query = MediaQuery.of(context); // provide us with the query
    print(query.size.aspectRatio); //aspect ratio
    print(query.size.height);//screen height
    print(query.size.width);//screen width

3. Puntos de ruptura

BreakPoint también se puede usar para desarrollar interfaces de usuario receptivas en aplicaciones flutter.

const kTabletBreakpoint = 768.0; //breakpoint for a tablet (a tablet's width is 768 px)
const kDesktopBreakPoint = 1440.0;  //breakpoint for desktop (a desktop screen's width is 1440 px)

const kSideMenuWidth = 300.0; // for sidemenu
const kNavigationRailWidth = 72.0; // for navigation rail

const kMaxWidth = 1180.0; // maximum width

Podemos usar los puntos de interrupción escritos anteriormente para mostrar diferentes UI para diferentes dispositivos. Por ejemplo,

class ResponsiveWidget extends StatelessWidget {
  const ResponsiveWidget({
    Key? key,
    required this.mobileBody,
    this.tabletBody,
    this.desktopBody,
  }) : super(key: key);
  
  final Widget mobileBody;
  final Widget? tabletBody;
  final Widget? desktopBody;
  
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, dimens) {
          
        // check if the device is a phone
        if (dimens.maxWidth < kTabletBreakpoint) {
          return mobileBody;
        } else if (dimens.maxWidth >= kTabletBreakpoint && dimens.maxWidth < kDesktopBreakPoint)
        {
         // returns mobileBody if tabletBody is null
          return tabletBody ?? mobileBody;
        } else {
            
          // returns mobileBody if desktopBody is null
          return desktopBody ?? mobileBody;
        }
      },
    );
  }
}

Producción: 

 Muestra y oculta la AppBar dependiendo del ancho de la pantalla usando MedaQuery().

Muestra y oculta la barra de aplicaciones según el ancho de los padres usando LayoutBuilder().

Para obtener más información sobre cómo manejar diferentes interfaces de usuario para diferentes dispositivos, lea amablemente este artículo . Eso es todo. Esto es todo lo que necesitamos para comenzar a crear aplicaciones receptivas con flutter.