Flutter

Question

看到边缘如何褪色并与按钮的颜色合并了吗？你如何在 flutter 中得到这样的东西？

我有按钮，不知道怎么弄出那种效果。

  @override
Widget build(BuildContext context) {
 return Padding(
   padding: const EdgeInsets.only(top: 30),
    child: Column(
     children: [

      //OUTER CIRCLE (BUTTON INSIDE)
      Container(
        height: 275,
        width: 275,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(150),
          border: Border.all(
            width: 3,
            color: Colors.grey.withOpacity(0.6),
            style: BorderStyle.solid,
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(40),

          //SHADOW (Button inside)
          child: Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              boxShadow: [
                BoxShadow(
                  color: const Color(0xfffd194b).withOpacity(0.7),
                  spreadRadius: 10,
                  blurRadius: 40,
                  offset: const Offset(0, 25),
                ),
              ],
            ),
            //BUTTON
            child: RecordButtonWithText(
              buttonText: _buttonText,
              startStopRecording: startStopRecording,
            ),
          ),
        ),
      ),
    ],
  ),
);


class RecordButtonWithText extends StatelessWidget {
const RecordButtonWithText({
  Key? key,
  required String buttonText,
  required this.startStopRecording,
})  : _buttonText = buttonText,
      super(key: key);

final String _buttonText;

final VoidCallback startStopRecording;

@override
Widget build(BuildContext context) {
  return ElevatedButton(
    onPressed: () {
      startStopRecording();
    },
    style: ElevatedButton.styleFrom(
      elevation: 10,
      padding: const EdgeInsets.all(30),
      shape: const CircleBorder(),
      shadowColor: const Color(0xfffd194b),
      primary: const Color(0xfffd194b),
    ),
    child: Text(
      _buttonText.toUpperCase(),
      style: const TextStyle(fontSize: 22, letterSpacing: 3),
    ),
  );
 }
}

Answer 1

如果您不必使用“ElevatedButton”小部件，您可以像这样实现您想要的：

 class RecordButtonWithText extends StatelessWidget {
  final String _buttonText;
  final VoidCallback startStopRecording;
  final EdgeInsets padding;
  final double size;

  const RecordButtonWithText({
    Key? key,
    required String buttonText,
    required this.startStopRecording,
    this.padding = const EdgeInsets.all(30.0),
    this.size = 275.0,
  })  : _buttonText = buttonText,
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: size,
      width: size,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(
          width: 2,
          color: Colors.grey.withOpacity(0.4),
          style: BorderStyle.solid,
        ),
      ),
      child: Padding(
        padding: EdgeInsets.all(size * 0.145),

        //SHADOW (Button inside)
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            boxShadow: [
              BoxShadow(
                color: const Color(0xfffd194b).withOpacity(0.7),
                spreadRadius: size * 0.03,
                blurRadius: size * 0.145,
                offset: Offset(0, size * 0.09),
              ),
            ],
          ),
          //BUTTON
          child: InkWell(
            borderRadius: BorderRadius.circular(size / 2),
            onTap: () {
              startStopRecording();
            },
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(size * 0.1),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.black,
                gradient: RadialGradient(colors: [
                  const Color(0xfffd194b),
                  const Color(0xfffd194b),
                  const Color(0xfffd194b).withOpacity(0.5),
                ], stops: const [
                  0,
                  0.8,
                  1
                ]),
              ),
              child: Text(
                _buttonText.toUpperCase(),
                style: TextStyle(
                  color: Colors.white,
                  fontSize: size * 0.08,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Flutter - 如何沿着圆圈获得褪色的颜色边框？

Flutter - How to get faded color border along a circle?

gradient

colors

button