Fluth|OverlayEntryを直接使用してDropdownを作成

Dropdown Button
Dropdownボタンは、アクティブ化時にサブリストを表示するボタンです.
Fluthには、デフォルトで提供されているDropdown Buttonコンポーネントもあります.
DropdownButton
プロジェクトリストから選択するための[外観デザイン]ボタン.
ドロップダウン・ボタンを使用すると、ユーザーは複数のアイテムから選択できます.ボタンには、現在選択されているアイテムとは異なるアイテムを選択するためのメニューが表示されます.
タイプTは、各ドロップダウン項目が表す値のタイプである.メニュー内のすべての項目が一致するタイプの値を表す必要があることを指定します.通常は列挙が使用されます.プロジェクト内の各DropdownMenuItemは、同じタイプの引数に特化する必要があります.
しかし、Flutterが提供するDropdownButtonにはいくつかの問題があります.
1設計は自由に変更できません.
29601;サブリストを選択した場合、ドロップダウンリストの位置を固定できません.

以上のため、Flutterが提供する部品ではなくDropdownを直接作成することにしました.
OverlayEntry
Dropdownボタンを直接作成するには、OverlayEntryコンポーネントを理解する必要があります.
OverlayEntryはStackで、Stackのように画面に表示できます.
また、OverlayEntryのchildは画面から独立していてもよい.
OverlayEntry
カバー層の位置は、コンポーネントを含むことができます.
上書き項目は、1回に1つの上書きレイヤに含めることができます.オーバーライド項目からアイテムを除去するには、オーバーライド項目でremove関数を呼び出します.
📌 OverlayEntryでDropdown Buttonを作成する方法は次のとおりです.
1」OverlayEntryコンポーネントを作成します.
2πDropdownButtonが必要な場合にOverlayEntryを追加します.
3πDropdownButtonリストを選択します.
4π除去OverlayEntry.
Custom Dropdown
OverlayEntryコンポーネントの作成
OverlayEntryを使う方法は簡単です.
OverlayEntryで目的の部品を生成できます.

Widget _customDropdown(){
  return OverlayEntry(
    builder: (context) => Positioned(
      width: _dropdownWidth,
      child: ...
    ),
  );
}

📌 Positionedを囲む理由は、OverlayEntryがStackレイアウトであるため、サイズと位置を指定するために使用されます.

▼上のコードでOverlayEntryを追加すると左上に!
では、自分が望む場所を指定する必要がありますか?全然そうじゃない.
CompositedTransformFollowerを使用すると、座標を入力せずに必要な場所にDropdownを表示できます.
CompositedTransformFollower
CompositedTransformTargetのコンポーネントに従います.
このコンポーネントが合成フェーズ(WidgetBind.drawFrame)で説明されているように、塗装フェーズの後に合成を開始する場合、変換が適用され、接続された複合TransformTargetAnchorとそのコンポーネントのfollowerAnchorが同時にインポートされます.オフセット量はOffsetです.ゼロでない場合、2つのアンカーポイントは同じグローバル座標を有します.
リンクとして使用されるLayer Linkオブジェクトは、一致するCompositeTransformTargetで提供されるオブジェクトと同じである必要があります.

final LayerLink _layerLink = LayerLink();

// 드롭다운 버튼. 
CompositedTransformTarget(
  link: _layerLink,
  child: ...
);

// OverlayEntry.
OverlayEntry(
  builder: (context) => Positioned(
    width: _dropdownWidth,
    child: CompositedTransformTarget(
      link: _layerLink,
    ),
  ),
);

ドロップダウンボタンとドロップダウンボタンをLayer Linkに接続することで、同じ位置で出力できます.
詳細座標を調整するには、CompositedTransformTargetのパラメータにoffset: const Offset(0, 0)を指定します.


OverlayEntryの追加
上で作成したOverlayEntryをOverlayに設定するには、ドロップダウンボタンをクリックします.of(context)に追加すると、画面に表示されます.

// 드롭다운 생성.
void _createOverlay() {
  if (_overlayEntry == null) {
    _overlayEntry = _customDropdown();
    Overlay.of(context)?.insert(_overlayEntry!);
  }
}

OverlayEntryの削除
リストをクリックするか、ドロップダウンボタン以外の画面をクリックすると、出力されたドロップダウンメニューを非表示にすることができます.

// 드롭다운 해제.
void _removeOverlay() {
  _overlayEntry?.remove();
  _overlayEntry = null;
}

🔥 Fluterが提供するデフォルトのDropdown Buttonのすべての欠点を解決しました.デザインは任意に設定でき、どんな値を選択してもDropdownリストは同じ位置に固定されます.
自動推奨入力ウィンドウ
🔥 Dropdownコンポーネントを適用すると、TextFieldの入力時に自動推奨機能を作成することもできます.
それ以外にも、Tooltipなどの異なる場所で多くの機能を実現することができます.

Github
https://github.com/CHOI-YOOBIN/custom_dropdown