😽

【Flutter】Gradient Ripple Button

2023/07/19に公開

Flutter

MaterialButton と Container を利用するとよい。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: Center(
          child: Container(
        width: 300,
        height: 100,
        decoration: const ShapeDecoration(
          shape: StadiumBorder(),
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Colors.blue, Colors.orange, Colors.green],
          ),
        ),
        child: MaterialButton(
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          shape: const StadiumBorder(),
          child: const Text(
            'A Samll Button',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () {
            debugPrint('Hello!');
          },
        ),
      )),
    );
  }

Discussion