🤹 🎚️ 🌁 Flutterアプリケーションのレスポンシブレイアウトを構築するための2つのステップ 👊🏽 👨‍👨‍👧‍👧 🏺

この記事では、さまざまな画面や向きに適応できるFlutterアプリケーションを作成する方法について説明します。この記事は、初心者と経験豊富なFlutterユーザーの両方に役立ちます。前者は調査するテンプレートを見つけ、後者は問題をもう一度検討します。

アダプティブレイアウトの問題ステートメントまたは問題

「好きなことをしてください。」フラッター

精神的に豊かな動機のように聞こえますが、これはこの問題に関するフレームワーク開発者の本当の見方です。Flutterには、「釘付け」という1つの解決策はありません。ここでは、開発者は完全な自由と、これらの問題を解決する方法を選択する能力を持っています（同時に、途中でレーキを収集します）。

現時点では、Flutterはモバイルプラットフォーム（Android、iOS）、Web（ベータチャネル）をサポートしており、デスクトップにはほとんど使用されていません。これは、アプリケーションが幅広いデバイス画面の解像度と向きをサポートする必要があることを意味します。また、モバイルデバイス（正方形でない場合）は、ユーザーが縦向きまたは横向きに回転させることができます。モバイルデバイスのユーザーは、画面の内容をより詳細に表示するために、アプリケーションの実行中にこれを行う方法を気に入って知っています。したがって、ユーザーを苛立たせないために、アプリケーションの実行中の画面の回転の問題に対処する必要があります。

そして、これらすべてを備えたアプリケーションは、それが持ち込まれたデバイスの特性とパラメーター、およびユーザーがそれを使用して実行できるアクションに関係なく、その重要なアクティビティに関する情報を表示して動作することが望ましいです。

«, ».

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