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

Question

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

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

Answer 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: () {},
      ),
    );
  }
}

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

How to make circle Gradient color button in Flutter | Flutter

styles

colors

button

dart

flutter