flutter - How to make a raised button that has a gradient background?

后端 未结 10 1666
野性不改
野性不改 2021-01-31 14:52

Is there a way to change the raised button background color to a gradient? if not, how can I achieve something like this?

10条回答
  •  说谎
    说谎 (楼主)
    2021-01-31 15:33

    I know this question is a bit old.. But I've found myself with this requirement and I wanted to share my solution. It uses a Card and animates the elevation when the button is pressed.

    import 'package:flutter/material.dart';
    
    class GradientButton extends StatefulWidget {
      final String label;
      final VoidCallback onPressed;
      final Gradient gradient;
      final double elevation;
      final double height;
      final TextStyle labelStyle;
    
      GradientButton({
        @required this.label,
        @required this.onPressed,
        @required this.gradient,
        this.elevation,
        this.height,
        this.labelStyle,
      })  : assert(label != null && onPressed != null),
            assert(gradient != null);
    
      @override
      _GradientButtonState createState() => _GradientButtonState();
    }
    
    class _GradientButtonState extends State with TickerProviderStateMixin {
      AnimationController _animationController;
      Animation _animation;
    
      elevateUp(TapDownDetails details) {
        _animationController.forward();
      }
    
      elevateDown() {
        _animationController.reverse();
      }
    
      @override
      void initState() {
        super.initState();
        _animationController = AnimationController(duration: Duration(milliseconds: 50), vsync: this);
        _animation = Tween(begin: widget.elevation ?? 2.0, end: 12.0).animate(_animationController);
      }
    
      @override
      Widget build(BuildContext context) {
        return AnimatedBuilder(
          animation: _animation,
          builder: (c, w) {
            return GestureDetector(
              onTapDown: elevateUp,
              onTapCancel: elevateDown,
              onTapUp: (value) {
                elevateDown();
                widget.onPressed();
              },
              child: Card(
                elevation: _animation.value,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(25.0),
                ),
                child: Container(
                  width: double.infinity,
                  height: widget.height ?? 50.0,
                  decoration: BoxDecoration(
                    gradient: widget.gradient,
                    borderRadius: BorderRadius.circular(25.0),
                  ),
                  child: Center(
                    child: Text(
                      widget.label,
                      style: widget.labelStyle ?? Theme.of(context).textTheme.button,
                    ),
                  ),
                ),
              ),
            );
          },
        );
      }
    }
    

    There's room for improving it (maybe you don't want those rounded borders by default), but hope can be useful for some of you :D

提交回复
热议问题