😇

スワイプするボタンをつくってみたい

に公開
Flutter
tech

やりたかったこと

作成中のアプリでクーポンをスワイプして使用する感じのUIにしたかった。
switchボタンだと何だか味気ないしな〜ということでslide_to_actパッケージを使ってみた

https://pub.dev/packages/slide_to_act

結果

SlideAction(
                height: 54,
                alignment: Alignment.centerRight,
                sliderButtonIcon: const Icon(Icons.chevron_right),//アイコンを設定
                sliderRotate: false,//スワイプ時にアイコンを回転させない
                animationDuration: const Duration(milliseconds: 400),//アニメーションの長さ
                text: 'スワイプしてクーポンをつかう',
                textStyle: const TextStyle(
                  fontSize: 14,
                  color: ColorName.primaryBase,
                  fontWeight: FontWeight.bold,
                ),
                innerColor: ColorName.primaryBase,
                outerColor: ColorName.primarySecondary,
                borderRadius: 10,
                onSubmit: () {print(1);},
              ),

いいかんじになった。最後のチェックマークをもう少し長く残しておきたいんだけど、どうすればいいんだろうか。
とりあえず今日はこれでいいや。

迷走

迷走してflutter_slidableでやってみたりもした。

pub.devのReadmeの例のコードをDismissだけ残して改造

Slidable(
          key: const ValueKey(0),
          startActionPane: ActionPane(
            motion: const ScrollMotion(),
            dismissible: DismissiblePane(onDismissed: () {
              print(1);
            }),
            children: const [
              SlidableAction(
                onPressed: null,
                backgroundColor: Color(0xFFFE4A49),
                foregroundColor: Colors.white,
                icon: Icons.delete,
                label: 'Delete',
              ),
            ],
          ),
          // DismissiblePaneを設定しているので、childは任意のWidgetでよい
          child: Row(
            children: [
              Container(
                color: ColorName.blueBase,
                height: MediaQuery.of(context).size.width * 0.2,
                width: MediaQuery.of(context).size.width * 0.2,
              ),
              Container(
                color: ColorName.blackBase,
                height: MediaQuery.of(context).size.width * 0.2,
                width: MediaQuery.of(context).size.width * 0.8,
              ),
            ],
          ),
        ),

当たり前だけどウィジェットごと存在が抹消してまう。ここで諦めてとってもよかった。

Discussion