如何在 Flutter 中制作圆形渐变颜色按钮扑

【问题标题】：How to make circle Gradient color button in Flutter | Flutter如何在 Flutter 中制作圆形渐变颜色按钮扑
【发布时间】：2021-05-07 08:46:09
【问题描述】：

ConstrainedBox(
                constraints: BoxConstraints.tightFor(width: 60, height: 60),
                child: ElevatedButton(
                  child: Text(
                    'GO',
                    style: TextStyle(fontSize: 18),
                  ),
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    shape: CircleBorder(),
                  ),
                ),
              ),

我正在尝试创建一个渐变圆形按钮，但在此代码中它创建了圆形按钮，但我如何为其添加渐变颜色。

【问题讨论】：

stackoverflow.com/questions/52243364/… 请检查这对你有用
您可能需要使用RadialGradient

标签： flutter dart button colors styles

【解决方案1】：

您可以为此使用FloatingActionButton：

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: FloatingActionButton(
        child: Container(
          width: 60,
          height: 60,
          child: Icon(Icons.add),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            gradient: LinearGradient(
              colors: [Color(0xff43cea2), Color(0xff185a9d)],
            ),
          ),
        ),
        onPressed: () {},
      ),
    );
  }
}

【讨论】：