【Flutter】スライド操作ボタン(slide_to_act)を実装し、カスタマイズするまでの完全ガイド！

dependencies:
  flutter:
    sdk: flutter
  slide_to_act: ^2.0.2

import 'package:flutter/material.dart';
import 'package:slide_to_act/slide_to_act.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey<SlideActionState> _sliderKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('スライド操作ボタンのデモ'),
        ),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(20.0),
            child: SlideAction(
              key: _sliderKey,
              text: 'スライドして解除', // スライダーに表示されるテキスト
              onSubmit: () {
                print("解除"); // スライド完了時のアクション
                // スライダーをリセットする
                Future.delayed(Duration(seconds: 1), () {
                  _sliderKey.currentState?.reset();
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}

SlideAction(
  key: _sliderKey,
  text: 'スライドして解除',
  innerColor: Colors.red, // スライダーの色を赤に設定
  outerColor: Colors.yellow, // 背景色を黄色に設定
  borderRadius: 24, // 角の丸みを設定
  elevation: 4, // 影の高さを設定
  onSubmit: () {
    print("解除");
    Future.delayed(Duration(seconds: 1), () {
      _sliderKey.currentState?.reset();
    });
  },
)