↘️ ⏺️ 🖱️ 2 pasos para crear un diseño receptivo para una aplicación Flutter 🧑🏾‍🤝‍🧑🏼 😞 😶

Este artículo discutirá cómo crear una aplicación Flutter que pueda adaptarse a diferentes pantallas y orientaciones. El artículo será útil tanto para principiantes como para usuarios experimentados de Flutter. El primero encontrará una plantilla para estudiar, el segundo volverá a analizar el tema.

Enunciado del problema o problema de diseño adaptativo

" Haz lo que quieras ". Aleteo

Suena como un motivador enriquecido espiritualmente, pero esta es la visión real de los desarrolladores de framework sobre este tema. Flutter no tiene una solución, "clavada", aquí el desarrollador tiene total libertad y la capacidad de elegir una forma de resolver estos problemas (al mismo tiempo y cobrar un rastrillo en el camino).

Por el momento, Flutter es compatible con plataformas móviles (Android, iOS), Web (en canal beta), que rara vez se utilizan para escritorio. Esto significa que la aplicación debe admitir una amplia gama de orientaciones y resoluciones de pantalla del dispositivo. Además, el usuario puede girar el dispositivo móvil (si no es cuadrado) a orientación vertical u horizontal. A los usuarios de dispositivos móviles les encanta y saben cómo hacer esto mientras la aplicación se está ejecutando para ver el contenido de la pantalla con más detalle. Entonces, para no frustrar al usuario, debemos ocuparnos del problema de la rotación de la pantalla mientras se ejecuta la aplicación.

Y con todo ello, es deseable que la aplicación funcione, mostrando información sobre su actividad vital, a pesar de las características y parámetros del dispositivo al que fue llevada, y qué acciones puede realizar el usuario con él.

«, ».

, . Flutter- — , .

- UX , . , FAB (floating action button in material design) , , , — , , .

. , . , , .

Android

. Android (responsive) . : Responsive UI - Layout ( ), Support different screen sizes.

? , , . , ( ) .

, . — master/detail flow Android Studio. , in android way.

, . BDD.

, :

( dpi ).
( landscape — , , portrait — , ).
Android Studio landscape, portrait, , .
.
.
, , / .
.

, , , :

: https://pub.dev/packages/sizer_mod

example: https://github.com/NickZt/sizer_mod/tree/master/example

. MaterialApp dpi :

@override
Widget build(BuildContext context) {
 return LayoutBuilder(
   builder: (context, constraints) {
     return OrientationBuilder(
       builder: (context, orientation) {
         SizerUtil().init(constraints, orientation);
         return MaterialApp(

example lib\main.dart

1.

. sizer .

, SizerUtil.orientation . :

appBar: AppBar(
 title: SizerUtil.orientation == Orientation.portrait
     ? const Text('portrait')
     : const Text('landscape'),
),

AppBar . example lib\screens\home_screen.dart

1 , : «1. ( dpi )».

2.

() ResponsiveWidget. () /. ( default xml in android) landscapeLargeScreen. / , . :

landscapeMediumScreen
landscapeSmallScreen
portraitMediumScreen
portraitSmallScreen
portraitLargeScreen

WelcomePage landscape , portrait , :

body: ResponsiveWidget(
 landscapeLargeScreen: WelcomePage(
   pageIndex: 0,
   scrollDirection: Axis.vertical,
   children: listOfPages,
 ),
 portraitLargeScreen: WelcomePage(
   pageIndex: 0,
   scrollDirection: Axis.horizontal,
   children: listOfPages,
 ),
),