如何为下图所示的按钮添加效果？

Question

我想在按钮上添加效果，比如当我们按下按钮时，按钮的背景颜色应该变为透明并且按钮边框颜色应该启用，然后我们释放按钮，背景颜色变回黄色并且边界颜色应该被禁用。

这是我试过按钮但不能正常工作的一些代码。

class CustomButton extends StatefulWidget {
  final void Function()? onPressed;
  final String lable;
  final int backgroundColor;
  final Color textColor;
  final FontWeight fontWeight;
  final EdgeInsetsGeometry margin;
  const CustomButton(
      {Key? key,
      required this.onPressed,
      required this.lable,
      required this.backgroundColor,
      this.textColor = Colors.black,
      this.fontWeight = FontWeight.bold,
      this.margin = EdgeInsets.zero})
      : super(key: key);

  @override
  State<CustomButton> createState() => _CustomButtonState();
}

class _CustomButtonState extends State<CustomButton> {
  bool isColorChanged = false;
  @override
  Widget build(BuildContext context) {
    AppSize appSize = AppSize(context);
    return GestureDetector(
      onLongPress: () {
        setState(() {
          isColorChanged = true;
        });
      },
      onLongPressCancel: () {
        setState(() {
          isColorChanged = false;
        });
      },
      onTap: widget.onPressed,
      child: Container(
        margin: widget.margin,
        height: isMobile(context) ? appSize.scaledHeight(0.065) : 80,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: isColorChanged
                ? Colors.transparent
                : Color(widget.backgroundColor),
            borderRadius: BorderRadius.all(Radius.circular(isMobile(context)
                    ? 8
                    : 15) //                 <--- border radius here

                ),
            border: Border.all(
                color:
                    isColorChanged ? Color(themeColor) : Colors.transparent)),
        padding: EdgeInsets.fromLTRB(20, 1, 20, 1),
        child: Text(
          widget.lable,
          style: TextStyle(
              fontSize: isMobile(context)
                  ? MyFontSize().mediumTextSizeMobile
                  : MyFontSize().mediumTextSizeTablet,
              color: widget.textColor,
              fontWeight: widget.fontWeight),
        ),
        // child:
      ),
    );
  }
}

使用按钮：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomButton(
            onPressed: () {},
            lable: StringFile.service_provider.toUpperCase(),
            backgroundColor: colorYellowBtn),
      ),
    );
  }
}

之前：

当我们按下按钮时：

当我们释放按钮时:

Answer 1

您可以创建自定义小部件并使用 GestureDetector（onTapDown、onTapUp 事件来更改颜色）和 AnimatedContainer（动画颜色）

Answer 2

试试这个：

        RaisedButton(
          onPressed: () {},
          child: Text("Test"),
          highlightColor: YOUR_PRESSED_COLOR, //Replace with actual colors
          color: IDLE_STATE_COLOR,
        ),

Answer 3

试试下面的代码希望对你有帮助。

参考ElevatedButton

参考MaterialStateProperty

ElevatedButton(
  child: Text(
    'Service Provider'.toUpperCase(),
    style: TextStyle(
      color: Colors.black,
    ),
  ),
  onPressed: () {
    print('Pressed');
  },
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) return Colors.teal;
        return Colors.yellow;
      },
    ),
  ),
),

按下结果前后->

当你按下按钮结果->

Answer 4

ElevatedButton(
          child: Text('Elevated Button', style: TextStyle(color: Colors.black),),
          onPressed: () {
          },
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                if (states.contains(MaterialState.pressed)) return Colors.white;
                return Colors.yellow;
              },
            ),
          ),
        )

你可以这样使用。

如何为下图所示的按钮添加效果？

How do I add effect on button like below image?

flutter

dart

flutter-layout

effect