【Flutter】RRectでgradationalなButtonの実装

背景

デザイナーさんに
「角っこが丸く、グラデーションがかかったボタンが欲しいな」
と言われた。

ElevatedButtonは角っこが丸くなっている。
Containerはグラデーションできる。

でも、上記2つの組合せは出来なかった。

だけど、デザイナーの意向を汲んでボタンを実装する必要が僕にはあった。

やりたかったこと

実装

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Button1(),
              SizedBox(height: 20),
              Button2(),
            ],
          ),
        ),
      ),
    );
  }
}

class Button1 extends StatelessWidget {
  const Button1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {/* action */},
        child: ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Container(
                height: 100,
                width: 100,
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      begin: FractionalOffset.topLeft,
                      end: FractionalOffset.bottomRight,
                      // colorsとstopsの項目数を合わせましょう
                      colors: [
                        Colors.deepOrangeAccent,
                        Colors.orangeAccent,
                        Colors.amberAccent,
                        Colors.black
                      ],
                      // 右下隅っこに黒をクッキリと
                      stops: [
                        0.1,
                        0.5,
                        0.9,
                        0.9
                      ]),
                ),
                child: const Center(child: Icon(Icons.favorite, size: 40)))));
  }
}

class Button2 extends StatelessWidget {
  const Button2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {/* action */},
        child: ClipRRect(
            borderRadius: BorderRadius.circular(100.0),
            child: Container(
                height: 200,
                width: 90,
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      begin: FractionalOffset.topCenter,
                      end: FractionalOffset.bottomCenter,
                      colors: [Colors.tealAccent, Colors.lightBlueAccent],
                      stops: [0.1, 0.9]),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    Icon(Icons.psychology, size: 40),
                    Text("考えるのをやめた", style: TextStyle(fontSize: 20)),
                  ],
                ))));
  }
}

ElevatedButtonを使わないで実現する方法しかわからなかったよ。。。

以上