🙌

【Flutter】slide_to_actのスライドボタンの形を変更

2025/03/02に公開

slide_to_actのスライドボタンの形を変更

タイトルの通りでiPhoneの起動時などでボタンをスライドするのがあるかと思いますが、
そのスライドボタンの作成とボタンの大きさを変える必要になりました。

その際に下記で実現できたので備忘録でかきこ。

https://pub.dev/packages/slide_to_act

他のパッケージではボタンの変更ができかねたので上記使用しています。

他の使用方法は下記で確認できます。
https://blog.flutteruniv.com/package-slide_to_act/

実際のコード


class MyWidget extends StatelessWidget {
  final VoidCallback? onPressed;

  const MyWidget({
    Key? key,
    required this.onPressed, 
  }) : super(key: key);

  
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 13),
      child: SlideAction(
        elevation: 0,
        sliderButtonIcon: Container( ///  ※ここでボタンの形を変える
          width: 62,
          height: 25,
          alignment: Alignment.center,
          child: Icon(
            Icons.arrow_forward,
          ),
        ),
        height: 48,
        innerColor: Theme.of(context).colorScheme.primary, // 内側ボタン
        outerColor: Theme.of(context).colorScheme.tertiary, // 外側ボタン
        sliderButtonIconPadding: 8, // ボタンの余白を変える

        // スライドしきった時に onPressed を呼び出す
        onSubmit: () async {
          // onPressed が null でなければ実行
          onPressed?.call();
        },

        child: const Padding(
          padding: EdgeInsets.only(left: 77),
          child: Text(
            '右にスライドして使用',
            textAlign: TextAlign.right,
            style: TextStyle(
              fontWeight: FontWeight.w400,
            ),
          ),
        ),
      ),
    );
  }
}

重要なのは、sliderButtonIconのプロパティ。
このプロパティでボタンの変更できる。

以上!!!

Discussion