如何制作带有渐变背景的提升按钮？

Question

我正在尝试创建一个具有渐变背景的Elevated按钮，但它提供了一些不太适合它的参数，并且您可能知道，在Flutter 2.0版本之后，大多数Button类已被弃用，例如Raising Button，Flat Button， ...等等

ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
  primary: Colors.teal,
  onPrimary: Colors.white,
  onSurface: Colors.grey,
),
onPressed: () {
  print('Pressed');
},
)

有没有办法创建带有渐变背景的

ElevatedButton

？

Answer 1

屏幕截图（空安全）

---

创建此类（可定制）

class MyElevatedButton extends StatelessWidget {
  final BorderRadiusGeometry? borderRadius;
  final double? width;
  final double height;
  final Gradient gradient;
  final VoidCallback? onPressed;
  final Widget child;

  const MyElevatedButton({
    Key? key,
    required this.onPressed,
    required this.child,
    this.borderRadius,
    this.width,
    this.height = 44.0,
    this.gradient = const LinearGradient(colors: [Colors.cyan, Colors.indigo]),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final borderRadius = this.borderRadius ?? BorderRadius.circular(0);
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        gradient: gradient,
        borderRadius: borderRadius,
      ),
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.transparent,
          shadowColor: Colors.transparent,
          shape: RoundedRectangleBorder(borderRadius: borderRadius),
        ),
        child: child,
      ),
    );
  }
}

用途：

像普通的一样使用它

ElevatedButton

：

MyElevatedButton(
  width: double.infinity,
  onPressed: () {},
  borderRadius: BorderRadius.circular(20),
  child: Text('SIGN IN'),
)

Answer 2

import 'package:flutter/material.dart';

class RoundedButtonWidget extends StatelessWidget {
  final String buttonText;
  final double width;
  final Function onpressed;

  RoundedButtonWidget({
    required this.buttonText,
    required this.width,
    required this.onpressed,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Container(
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
                color: Colors.black26, offset: Offset(0, 4), blurRadius: 5.0)
          ],
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            stops: [0.0, 1.0],
            colors: [
              Colors.deepPurple.shade400,
              Colors.deepPurple.shade200,
            ],
          ),
          color: Colors.deepPurple.shade300,
          borderRadius: BorderRadius.circular(20),
        ),
        child: ElevatedButton(
          style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
              ),
              minimumSize: MaterialStateProperty.all(Size(width, 50)),
              backgroundColor:
                  MaterialStateProperty.all(Colors.transparent),
              // elevation: MaterialStateProperty.all(3),
              shadowColor:
                  MaterialStateProperty.all(Colors.transparent),
                  ),
          onPressed: () {
            onpressed();
          },
          child: Padding(
            padding: const EdgeInsets.only(
              top: 10,
              bottom: 10,
            ),
            child: Text(
              buttonText,
              style: TextStyle(
                fontSize: 18,
                // fontWeight: FontWeight.w700,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6.0),
                  gradient: LinearGradient(
                    begin: Alignment(-0.95, 0.0),
                    end: Alignment(1.0, 0.0),
                    colors: [const Color(0xff667eea), const Color(0xff64b6ff)],
                    stops: [0.0, 1.0],
                  ),
                ),
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(primary: Colors.transparent,
                      onSurface: Colors.transparent,
                      shadowColor: Colors.transparent,),

                  onPressed: (){},

                  child: Center(
                    child: Text(
                      'Log in',
                      style: TextStyle(
                        fontFamily: textFontFamilySegoeUI,
                        fontSize: 16,
                        color: const Color(0xffffffff),
                        letterSpacing: -0.3858822937011719,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),

Answer 4

Container(
                    width: 1120.w,
                    height: 180.h,
                    margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [Color(0xFF0379C6), Color(0xFF1298EF)]),
                        
                        borderRadius: BorderRadius.circular(25.r),
                        boxShadow: <BoxShadow>[
                          BoxShadow(
                              color: Color.fromRGBO(16, 142, 233, 0.57),
                              blurRadius: 13)
                        ]),
                    child: ElevatedButton(
                      style: ButtonStyle(
                        backgroundColor: MaterialStateProperty.all(
                            Colors.transparent), 
                      ),
                      onPressed: () => setState(() {
                        // _launched = _makePhoneCall('tel:$_phone');
                      }),
                      child: Text(
                        'Submit',
                        style:
                            TextStyle(color: Colors.white, fontSize: 64.sp),
                      ),
                    ),
                  )

Answer 5

波涛

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text('Priscila Dev'),
  ),
  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(
        'ENCERRAR[enter image description here][1]',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      onPressed: () {
        print('Hello!');
      },
    ),
  )),
);

}

Answer 6

试试这个

Container(
  padding: EdgeInsets.fromLTRB(10.0, 6.0, 10.0, 6.0),
  decoration: BoxDecoration(
      gradient:
          LinearGradient(colors: [Color(0xff3b8594), Color(0xff59a6b6)]),
      borderRadius: BorderRadius.circular(25.0)),
  child: Text(
    'View more',
    style: TextStyle(color: Colors.white, fontSize: 16.0),
  ),
)

结果

Answer 7

使用这个包https://pub.dev/packages/gradient_elevated_button 这是性能优化的包。

GradientElevatedButton(
  onPressed: () {

  },
  style: GradientElevatedButton.styleFrom(
    gradient: const LinearGradient(colors: [
      Color.fromARGB(255, 166, 206, 57),
      Color.fromARGB(255, 0, 175, 173),
    ],
      disabledGradient: const LinearGradient(colors: [
        Colors.grey.withAlpha(200),
        Colors.grey,
        Colors.grey.withAlpha(200),
      ],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ),
    ),
  ),
  child: const Text("This is Gradient Elevated Button"),
)