如何在flutter中创建渐变按钮

0sgqnhkj 于 2022-12-30 发布在 Flutter

关注(0)|答案(3)|浏览(215)

我试图创建一个按钮类似于这一个，我没有确切的颜色，所以使用黄色和黑色。
"想要这个"

- 我的代码输出**

下面是我代码：

class CustomButton extends StatelessWidget {
  final String? text;
  double width;
  final Function()? onPressed;
  CustomButton({this.width = 0.8, this.text, this.onPressed});
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        child: Center(
            child: CustomTextWidget(
          text: text!,
          textColor: AppColors.BLACK_COLOR,
          fontWeight: FontWeight.bold,
          fontSize: 1.1,
        )),
        height: ScreenSize.heightSize * 0.08,
        width: width.sw,
        decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Colors.yellow, Colors.black],
              begin: Alignment.topRight,
              end: Alignment.topRight,
              stops: [0.7, 0.8],
              tileMode: TileMode.repeated,
            ),
            borderRadius: BorderRadius.circular(4)),
      ),
    );
  }
}

请帮助如何做到这一点。

flutter

来源：https://stackoverflow.com/questions/74927997/how-to-create-a-gradient-button-in-flutter

3条答案

按热度按时间

j9per5c41#

尝试下面的代码希望它能帮助你和使用FractionalOffset

GestureDetector(
  onTap: () {},
  child: Container(
    alignment: Alignment.center,
    height: 44.0,
    width: 100,
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: [
          Colors.yellow,
          Colors.black,
        ],
        begin: FractionalOffset.bottomCenter,
        end: FractionalOffset.topCenter,
      ),
    ),
    child: const Text('SIGN UP'),
  ),
),

结果-〉

赞(0）回复(0）举报 2022-12-30

vsaztqbk2#

您可以像这样修改您的Linear Gradient：

LinearGradient(
   colors: [
       Color.fromARGB(100, 137, 90, 11),
       Color.fromARGB(255, 252, 208, 72)
   ],
   begin: Alignment.topCenter,
   end: Alignment.center,
   stops: [0.0, 0.3],
),

- 输出：**

IMO，它看起来更好。
P.S.您可以根据需要更改colors和stops属性。

赞(0）回复(0）举报 2022-12-30

mfuanj7w3#

使用此代码为梯度颜色在高架按钮

Container(
        height: 44.0,
        decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.orange, Colors.green])),
        child: ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(primary: Colors.transparent, shadowColor: Colors.transparent),
          child: Text('Elevated Button'),
        ),
      )

赞(0）回复(0）举报 2022-12-30

我来回答

如何在flutter中创建渐变按钮

3条答案

相关问题

热门标签

最新问答