Flutter ElevatedButtonにグラデーションを追加する方法

1. ElevatedButtonの背景色をグラデーションに設定する方法:

import 'package:flutter/material.dart';
class GradientButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
        overlayColor: MaterialStateProperty.all<Color>(Colors.transparent),
        elevation: MaterialStateProperty.all<double>(0),
        padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
          EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        ),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.transparent),
          ),
        ),
        shadowColor: MaterialStateProperty.all<Color>(Colors.transparent),
        minimumSize: MaterialStateProperty.all<Size>(Size(0, 0)),
        textStyle: MaterialStateProperty.all<TextStyle>(
          TextStyle(fontSize: 16),
        ),
        visualDensity: VisualDensity.adaptivePlatformDensity,
        tapTargetSize: MaterialTapTargetSize.padded,
        animationDuration: Duration(milliseconds: 200),
        enableFeedback: true,
        alignment: Alignment.center,
      ),
      onPressed: () {},
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xFF00FF00), Color(0xFF0000FF)],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(18.0),
        ),
        child: Text('グラデーションボタン'),
      ),
    );
  }
}

この例では、ElevatedButtonの背景色を透明に設定し、その代わりにContainerを使用してグラデーションを定義します。

2. ElevatedButtonのテキストにグラデーションを適用する方法:

import 'package:flutter/material.dart';
class GradientButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
        overlayColor: MaterialStateProperty.all<Color>(Colors.transparent),
      ),
      onPressed: () {},
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xFF00FF00), Color(0xFF0000FF)],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Text(
          'グラデーションボタン',
          style: TextStyle(
            fontSize: 16,
            foreground: Paint()
              ..shader = LinearGradient(
                colors: [Color(0xFF00FF00), Color(0xFF0000FF)],
              ).createShader(
                Rect.fromLTWH(0.0, 0.0, 200.0, 70.0),
              ),
          ),
        ),
      ),
    );
  }
}

この例では、ElevatedButtonのテキストにグラデーションを適用するために、Textウィジェットのstyleプロパティでforegroundを設定します。

以上の方法で、FlutterのElevatedButtonにグラデーションを追加できます。必要に応じて、色やグラデーションの設定をカスタマイズしてください。