如何改变颤振中激进渐变的形状?

时间:2020-12-26 07:03:23

标签: flutter flutter-layout

我正在尝试在 Flutter 应用中实现这个按钮。

????

The Button I was trying to Implement

但是有一个小问题。我会给你看我的 xd 文件。

implementation on xd file

在 xd 文件中,激进的渐变形状是日食,渐变颜色像日食一样发光。

这是另一张照片,看清楚了

another xd file

如您所见,渐变会像日食一样发光。我怎样才能实现这样的事情?

或者对于这种情况还有其他小部件吗?

我当前的颤振按钮看起来像这样

??????

My Current Button

这是代码

import 'package:flutter/material.dart';

import '../SizeConfig.dart';
import '../constants.dart';

class DefaultButton extends StatelessWidget {
  const DefaultButton({
    Key key,
    @required this.text,
    @required this.onPress,
  }) : super(key: key);
  final String text;
  final GestureTapCallback onPress;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
        margin: EdgeInsets.symmetric(
          horizontal: getProportionateScreenWidth(10),
        ),
        width: double.infinity,
        height: getProportionateScreenHeight(8),
        decoration: BoxDecoration(
            color: Colors.red,
            borderRadius:
                BorderRadius.circular(getProportionateScreenHeight(8) / 2.5),
            gradient: RadialGradient(
              center: Alignment(-0.5, -7),
              radius: getProportionateScreenHeight(1),
              colors: [
                gradientColour2,
                gradientColour1,
              ],
            ),
            boxShadow: [
              BoxShadow(
                blurRadius: 40,
                offset: Offset(15, 15),
                color: gradientColour1.withOpacity(0.21),
              )
            ]),
        child: Align(
          alignment: Alignment(0, 0),
          child: Text(
            text,
            style: Theme.of(context).textTheme.headline4,
          ),
        ),
      ),
    );
  }
}

0 个答案:

没有答案