Flutterでグラデーションを持つアウトラインされたボタンを作成する方法

まず、必要なパッケージをインポートします。

import 'package:flutter/material.dart';

次に、以下のコードを使用してアウトラインされたボタンを作成します。

class GradientOutlineButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  GradientOutlineButton({required this.text, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return OutlineButton(
      onPressed: onPressed,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20.0),
      ),
      borderSide: BorderSide(
        color: Colors.blue, // アウトラインの色
        width: 2.0, // アウトラインの太さ
      ),
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.blue, Colors.purple], // グラデーションの色
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
          borderRadius: BorderRadius.circular(20.0),
        ),
        child: Text(
          text,
          style: TextStyle(
            color: Colors.white, // ボタンのテキストの色
          ),
        ),
      ),
    );
  }
}

このGradientOutlineButtonウィジェットは、与えられたテキストとコールバック関数に基づいてアウトラインされたボタンを作成します。ボタンのアウトラインの色、幅、グラデーションの色などをカスタマイズすることができます。

使用例:

GradientOutlineButton(
  text: 'ボタン',
  onPressed: () {
    // ボタンが押された時の処理
  },
),

このコード例では、青から紫へのグラデーションを持つアウトラインされたボタンが作成されます。ボタンが押された時には、指定したコールバック関数が実行されます。

このようにして、Flutterでグラデーションを持つアウトラインされたボタンを作成することができます。必要に応じて、カスタマイズして使ってみてください。