轮廓透明的按钮，在飘动中带有渐变边框

Question

是否可以在飘动中创建带有渐变边框的轮廓（透明）按钮？我试图在BorderSide样式中使用LinearGradient，但不允许这样做。

Answer 1

您可以通过简单的技巧来实现此目的

您必须定义两个容器。 第一个外部容器具有渐变背景，第二个内部容器具有白色背景。作为内部容器的子代，您可以放置​​任何东西，例如Auth，TextField，另一个按钮，等等。

Text

现在这是您的视图

final kInnerDecoration = BoxDecoration(
  color: Colors.white,
  border: Border.all(color: Colors.white),
  borderRadius: BorderRadius.circular(32),
);

final kGradientBoxDecoration = BoxDecoration(
  gradient: LinearGradient(colors: [Colors.black, Colors.redAccent]),
  border: Border.all(
    color: kHintColor,
  ),
  borderRadius: BorderRadius.circular(32),
);

完成

Answer 2

我花了大约两个小时：）

使用方法：

async function getSomeNames() {
  try {
    const data = await Recipe.find();
    // docs is an array of promises
    const docs = data.map((item, index) => {
      Recipecat.findOne({_id: item})
    });
    // items is an array of documents returned by findOne
    const items = await Promise.all(docs);
    // now you can map and get the names
    const names = items.map(item => item.name);
  } catch (e) {
    // handle error
    console.error(e);
  }
}
getSomeNames()

和类本身：

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                UnicornOutlineButton(
                  strokeWidth: 2,
                  radius: 24,
                  gradient: LinearGradient(colors: [Colors.black, Colors.redAccent]),
                  child: Text('OMG', style: TextStyle(fontSize: 16)),
                  onPressed: () {},
                ),
                SizedBox(width: 0, height: 24),
                UnicornOutlineButton(
                  strokeWidth: 4,
                  radius: 16,
                  gradient: LinearGradient(
                    colors: [Colors.blue, Colors.yellow],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  ),
                  child: Text('Wow', style: TextStyle(fontSize: 16)),
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

使用 OutlinedButton（推荐）

---

创建这个类（空安全代码）

class MyOutlinedButton extends StatelessWidget {
  final VoidCallback onPressed;
  final Widget child;
  final ButtonStyle? style;
  final Gradient? gradient;
  final double thickness;

  const MyOutlinedButton({
    Key? key,
    required this.onPressed,
    required this.child,
    this.style,
    this.gradient,
    this.thickness = 2,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(gradient: gradient),
      child: Container(
        color: Colors.white,
        margin: EdgeInsets.all(thickness),
        child: OutlinedButton(
          onPressed: onPressed,
          style: style,
          child: child,
        ),
      ),
    );
  }
}

用法：

MyOutlinedButton(
  onPressed: () {},
  gradient: LinearGradient(colors: [Colors.indigo, Colors.pink]),
  child: Text('OutlinedButton'),
)

Answer 4

要更改大小，您可以插入一个容器：

OutlineGradientButton(
  child: Container(
    constraints: BoxConstraints(maxWidth: 300, maxHeight: 50),
    height: 50,
    alignment: Alignment.center,
    child: Text(
      'Text',
      textAlign: TextAlign.center,
      style: TextStyle(
          color: Colors.white, fontSize: 20, fontWeight: FontWeight.w500),
    ),
  ),
  gradient: LinearGradient(
    colors: [Color(0xfff3628b), Color(0xffec3470)],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
  ),
  strokeWidth: 3,
  radius: Radius.circular(25),
),

Answer 5

我尝试了很多方法来做到这一点，但所有方法都有其局限性，然后我找到了一个符合我预期的软件包：https://pub.dev/packages/outline_gradient_button