🍎 🚚 🍡 2 Schritte zum Erstellen eines reaktionsschnellen Layouts für eine Flutter-Anwendung 🏝️ 🔸 ♋️

In diesem Artikel wird erläutert, wie Sie eine Flutter-Anwendung erstellen, die sich an verschiedene Bildschirme und Ausrichtungen anpassen lässt. Der Artikel ist sowohl für Anfänger als auch für erfahrene Flutter-Benutzer nützlich. Ersterer findet eine Vorlage zum Studieren, letzterer befasst sich erneut mit dem Thema.

Problemstellung oder Problem des adaptiven Layouts

" Mach was du willst ." Flattern

Klingt nach einem spirituell bereicherten Motivator, aber dies ist die wirkliche Ansicht der Framework-Entwickler zu diesem Thema. Flutter hat keine einzige Lösung, die "festgenagelt" ist. Hier hat der Entwickler völlige Freiheit und die Möglichkeit, einen Weg zur Lösung dieser Probleme zu wählen (gleichzeitig und dabei einen Rechen zu sammeln).

Derzeit unterstützt Flutter mobile Plattformen (Android, iOS), Web (im Beta-Kanal), die nur selten für Desktops verwendet werden. Dies bedeutet, dass die Anwendung eine Vielzahl von Bildschirmauflösungen und -ausrichtungen unterstützen muss. Das mobile Gerät (wenn es nicht quadratisch ist) kann vom Benutzer auch im Hoch- oder Querformat gedreht werden. Benutzer mobiler Geräte lieben und wissen, wie dies zu tun ist, während die Anwendung ausgeführt wird, um den Bildschirminhalt detaillierter anzuzeigen. Um den Benutzer nicht zu frustrieren, müssen wir uns um das Problem der Bildschirmrotation kümmern, während die Anwendung ausgeführt wird.

Bei alledem ist es wünschenswert, dass die Anwendung funktioniert und Informationen über ihre wichtige Aktivität anzeigt, trotz der Eigenschaften und Parameter des Geräts, auf das sie gebracht wurde, und welche Aktionen der Benutzer damit ausführen kann.

«, ».

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