Flutter TwoPane ウィジェット

このレイアウトには 2 つの子ウィンドウがあり、2 つの子ウィンドウを並べて表示することも、上と下に表示することも、1 つのペインに優先順位を付けることもできます。 2 つのペイン ウィジェットの相対サイズは比例して調整でき、デュアルスクリーン デバイスでは境界がヒンジ領域にスナップされます。

［インストール中］

を含むTwoPaneパッケージdual_screenにプロジェクトを依存させるために、次のコマンドを実行できます。

flutter pub add dual_screen

これにより、このような行がパッケージの pubspec.yaml に追加されます (暗黙的な を実行します flutter pub get)。

dependencies:
  dual_screen: ^1.0.2+2

依存関係を pubspec.yaml に手動で追加した場合は、 も実行 flutter pub getする必要があります。

これで、dart ファイルでウィジェットの TwoPane 使用を開始できます。ここで、依存関係もインポートする必要があります。

import 'package:dual_screen/dual_screen.dart';

折りたたみ型デバイスのレンダリング

アプリが Surface Duo にまたがると、各ウィジェットが画面全体に表示されます。

クロスプラットフォーム レンダリング

アプリがタブレット、デスクトップ アプリ、Web ページなどの大きな画面でレンダリングされると、ペインは表示されますが、サイズは比例して設定されます。

TwoPane API

class TwoPane {
  const TwoPane({
    Widget startPane,
    Widget endPane,
    double paneProportion,
    TwoPanePriority panePriority,
    Axis direction,
    TextDirection? textDirection,
    VerticalDirection verticalDirection,
    EdgeInsets padding,
  });
}

ウィジェットの TwoPane プロパティ:

• startPane - 開始ウィンドウ。左から右のレイアウトの場合は左に、上から下のレイアウトの場合は上部に配置できます。 が start で、ヒンジがない場合panePriorityは、これが唯一の表示ウィンドウです。
• endPane - 終了ウィンドウ。左から右のレイアウトの場合は右側に、上から下のレイアウトの場合は下部に配置できます。 が endで、ヒンジがない場合panePriorityは、これが唯一の表示ウィンドウです。
• paneProportion - スタート ウィンドウが占める画面の割合。 最後のウィンドウは、残りの領域を引き継ぎます。 値が 0.5 の場合、2 つのペインが等しくなります。 このプロパティは、ヒンジ付きの表示では無視されます。この場合、各ウィンドウは 1 つの画面を引き継ぎます。
• panePriority - 開始ウィンドウ、終了ウィンドウ、またはその両方を 1 つだけ表示するかどうか。 このプロパティは、ヒンジ付きの表示では無視され、その場合 both はペインが表示されます。
• direction - Flex 方向と同様に、2 つのペインを垂直方向または水平方向に積み重ねるかどうか。 このプロパティは、ヒンジ付きのディスプレイでは無視されます。その場合、方向は垂直ヒンジ用、vertical水平ヒンジの場合はhorizontal無視されます。
• textDirection - ウィンドウが水平方向にレイアウトされている場合、どちらが左側に配置されているかが決まります。 Flex textDirection と同じように動作します
• verticalDirection - ウィンドウを垂直方向に配置すると、どちらが上部に配置されているかが決まります。 Flex verticalDirection と同じように動作します
• padding - TwoPane と画面の端の間のパディング。 TwoPane とルート MediaQuery の間に間隔がある場合は、 padding を使用して、2 つのペインをヒンジに正しく配置します。

ヒント

に指定された TwoPane パラメーターのほとんどは、デバイスにヒンジがある場合は無視されます。 つまり、タブレットやデスクトップなどの大きな画面でレイアウトがどのように動作するかに集中しながら、既定ではデュアルスクリーン フォーム ファクターにうまく適応させることができます。

使用例

Widget build(BuildContext context) {
  return TwoPane(
    startPane: BlueA(),
    endPane: OrangeB(),
    paneProportion: 0.3,
    panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both : TwoPanePriority.start,
  );
}

このサンプル コードは、この記事の冒頭で結果を生成します。

• Surface Duo では、ウィジェット A とウィジェット B の両方に 1 つの画面が表示されます。
• タブレットまたはデスクトップでは、ウィジェット A は画面の 30% を占め、ウィジェット B は残りの 70% を占めます。
• 幅が 500 ピクセル未満の 小さな電話 では、ウィジェット A のみが表示されます。