フリック入力 Flick Input
キーを押すと上下左右に候補が十字に出て、払った向きの文字が入る。日本のスマホの文字入力。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
どんなもの？
日本語キーボードの「あ」を押して左に払うと「い」、上に払うと「う」が入る、あの操作です。
アプリの中に独自の入力パッドを作りたいとき（ゲームの文字入力・子ども向けアプリなど）の作り方です。
各キーで onPanDown（押した）・onPanUpdate（どちらへ動いたか）・onPanEnd（離した）を受け取り、
押した点からのずれが小さければ中央、大きければ横と縦のどちらに大きく動いたかで向きを決めます。
動かさずに離したとき（タップ）は onPanCancel に届くので、そこで中央の文字を入れます。
押している間は Stack で十字の候補を重ねて、今どの文字が選ばれているかを見せます。
こんなときに
- ゲームや子ども向けアプリなど、OS のキーボードではなく独自の入力パッドを置きたい
避けたい場面
- 普通の文字入力欄（OS のキーボードを使えばフリックも予測変換も付いてくる）
最小コード
const keys = {'あ': ['あ', 'い', 'う', 'え', 'お']}; // 中央・左・上・右・下
int directionOf(Offset d) {
if (d.distance < 18) return 0; // 中央
return d.dx.abs() > d.dy.abs()
? (d.dx < 0 ? 1 : 3) // 左 / 右
: (d.dy < 0 ? 2 : 4); // 上 / 下
}
GestureDetector(
onPanDown: (_) => setState(() => dir = 0),
onPanUpdate: (d) => setState(() => dir = directionOf(d.localPosition - keyCenter)),
onPanEnd: (_) => input(keys['あ']![dir]),
onPanCancel: () => input('あ'), // 動かさずに離した
child: const Key(label: 'あ'),
)使うウィジェット
GestureDetector(onPan)StackPositioned