💈 👼 👨‍🎤 2 etapas para construir um layout responsivo para um aplicativo Flutter 🛣️ ✖️ 💛

Este artigo irá discutir como criar um aplicativo Flutter que pode se adaptar a diferentes telas e orientações. O artigo será útil para iniciantes e usuários experientes do Flutter. O primeiro encontrará um modelo para estudar, o último examinará novamente o problema.

Declaração do problema ou problema de layout adaptativo

" Faça o que quiser ." Flutter

Parece um motivador enriquecido espiritualmente, mas esta é a visão real dos desenvolvedores de framework sobre este assunto. Flutter não tem uma solução, "pregada", aqui o desenvolvedor tem total liberdade e a possibilidade de escolher uma forma de resolver esses problemas (ao mesmo tempo e coletar um rake ao longo do caminho).

No momento, o Flutter suporta plataformas móveis (Android, iOS), Web (em canal beta), raramente usadas para desktop. Isso significa que o aplicativo deve oferecer suporte a uma ampla gama de resoluções e orientações de tela do dispositivo. Além disso, o dispositivo móvel (se não for quadrado) pode ser girado pelo usuário para a orientação retrato ou paisagem. Os usuários de dispositivos móveis adoram e sabem fazer isso enquanto o aplicativo está em execução para visualizar o conteúdo da tela com mais detalhes. Portanto, para não frustrar o usuário, devemos cuidar do problema de rotação da tela durante a execução do aplicativo.

E com tudo isso, é desejável que o aplicativo funcione, exibindo informações sobre sua atividade vital, independentemente das características e parâmetros do dispositivo para o qual foi trazido, e quais ações o usuário pode realizar com ele.

«, ».

, . 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,
 ),
),