DEV Community

loading...

Responsive in flutter

Ushieru Kokoran
Software engineer, entrepreneur, dance, theater and acrobatics enthusiast.
Updated on ・2 min read

La forma más sencilla de tener control en nuestros diseños es imaginar que dividimos nuestra pantalla entre 100 bloques iguales, a lo ancho y a lo alto. De esta manera podremos definir que widgets abarquen un 10% de ancho o un 35% de alto.

La siguiente clase me ayuda a definir los tamaños.

import 'package:flutter/widgets.dart';

class SizeConfig {
  static double screenWidth = 0;
  static double screenHeight = 0;
  static double _blockSizeHorizontal = 0;
  static double _blockSizeVertical = 0;
  static double _safeAreaHorizontal = 0;
  static double _safeAreaVertical = 0;
  static double _safeBlockHorizontal = 0;
  static double _safeBlockVertical = 0;

  SizeConfig(BuildContext context) {
    var mediaQueryContext = MediaQuery.of(context);

    screenWidth = mediaQueryContext.size.width;
    screenHeight = mediaQueryContext.size.height;
    _blockSizeHorizontal = screenWidth / 100;
    _blockSizeVertical = screenHeight / 100;
    _safeAreaHorizontal =
        mediaQueryContext.padding.left + mediaQueryContext.padding.right;
    _safeAreaVertical =
        mediaQueryContext.padding.top + mediaQueryContext.padding.bottom;
    _safeBlockHorizontal = (screenWidth - _safeAreaHorizontal) / 100;
    _safeBlockVertical = (screenHeight - _safeAreaVertical) / 100;
  }

  static double blockSizeHorizontal(double percentage) {
    return _blockSizeHorizontal * percentage;
  }

  static double blockSizeVertical(double percentage) {
    return _blockSizeVertical * percentage;
  }

  static double safeBlockSizeHorizontal(double percentage) {
    return _safeBlockHorizontal * percentage;
  }

  static double safeBlockSizeVertical(double percentage) {
    return _safeBlockVertical * percentage;
  }
}
Enter fullscreen mode Exit fullscreen mode

Para inicializarla solo debes inicializar el constructor de SizeConfig en tu initialRoute o en tu home, dependiendo que utilices. Solo recuerda inicializarlo en el primer Widget consecuente de tu MaterialApp.

class Ushieru extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ushieru 👨‍💻',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        IndexScreen.routeName: (context) => IndexScreen(),
      },
      initialRoute: IndexScreen.routeName,
      home: IndexScreen(),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo:

class IndexScreen extends StatelessWidget {
  static final routeName = "IndexScreen";

  @override
  Widget build(BuildContext context) {
    SizeConfig(context);
    return Container(
      width: SizeConfig.screenWidth, // Toma todo el ancho de la pantalla
      height: SizeConfig.blockSizeVertical(50), // Toma el 50% del alto de la pantalla
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Al ser estáticas las variables de clase estas podrán ser utilizadas por cualquier otro widget a partir solo del nombre de la clase SizeConfig.

class SecondScreen extends StatelessWidget {
  static final routeName = "SecondScreen";

  @override
  Widget build(BuildContext context) {
    // SizeConfig(context); No se necesita inicializar otra vez
    return Container(
      width: SizeConfig.screenWidth,
      height: SizeConfig.blockSizeVertical(50),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

¿Y que pasa si utilizo un SafeArea para mi aplicación? 

También ya está previsto solo cambias del método blockSizeVertical a safeBlockSizeVertical, asi de simple.

class ThirdScreen extends StatelessWidget {
  static final routeName = "ThirdScreen";

  @override
  Widget build(BuildContext context) {
    return SafeArea(
          child: Container(
        width: SizeConfig.screenWidth,
        height: SizeConfig.safeBlockSizeVertical(50), // Usamos el metodo safeBlockSizeVertical
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)