Drag a UI element
Drag and drop is a common mobile app interaction.
ドラッグアンドドロップは、一般的なモバイルアプリの操作です。
As the user long presses (sometimes called touch & hold) on a widget, another widget appears beneath the user’s finger, and the user drags the widget to a final location and releases it.
ユーザーがウィジェットを長押し（タッチアンドホールドと呼ばれることもあります）すると、ユーザーの指の下に別のウィジェットが表示され、ユーザーはウィジェットを最終的な場所にドラッグして離します。
In this recipe, you’ll build a drag-and-drop interaction where the user long presses on a choice of food, and then drags that food to the picture of the customer who is paying for it.
このレシピでは、ユーザーが食べ物の選択肢を長押ししてから、その食べ物を支払いをしている顧客の写真にドラッグするドラッグアンドドロップ操作を構築します。
The following animation shows the app’s behavior:
次のアニメーションは、アプリの動作を示しています。
This recipe begins with a prebuilt list of menu items and a row of customers. The first step is to recognize a long press and display a draggable photo of a menu item.
このレシピは、事前に作成されたメニュー項目のリストと顧客の列から始まります。 最初のステップは、長押しを認識し、メニュー項目のドラッグ可能な写真を表示することです。
Press and drag
Flutter provides a widget called LongPressDraggable that provides the exact behavior that you need to begin a drag-and-drop interaction.
Flutterは、ドラッグアンドドロップ操作を開始するために必要な正確な動作を提供するLongPressDraggableと呼ばれるウィジェットを提供します。
A LongPressDraggable widget recognizes when a long press occurs and then displays a new widget near the user’s finger.
LongPressDraggableウィジェットは、長押しが発生したことを認識し、ユーザーの指の近くに新しいウィジェットを表示します。
As the user drags, the widget follows the user’s finger.
ユーザーがドラッグすると、ウィジェットはユーザーの指の動きを追跡します。
LongPressDraggable gives you full control over the widget that the user drags.
LongPressDraggableを使用すると、ユーザーがドラッグするウィジェットを完全に制御できます。
Each menu list item is displayed with a custom MenuListItem widget.
各メニューリストアイテムは、カスタムのMenuListItemウィジェットで表示されます。
MenuListItem(
name: item.name,
price: item.formattedTotalItemPrice,
photoProvider: item.imageProvider,
)
参考