如何在 Flutter 中设计这个自定义的小部件形状答案

【问题标题】：How to design this custom widget shape in Flutter如何在 Flutter 中设计这个自定义的小部件形状
【发布时间】：2019-04-26 16:23:10
【问题描述】：

我正在使用 Flutter 设计一个移动应用程序，但我不知道如何设计自定义按钮或 listTile 或任何类型的小部件，使其看起来像下图：

【问题讨论】：

您可以使用Stack 小部件来创建这个。
@RubensMelo 是的，它可以通过堆栈创建，但我无法做到，因为我需要我在回复中找到了最佳答案，非常感谢

标签： flutter flutter-layout

【解决方案1】：

您可以通过编写 Widgets 来创建该设计，这就是 Flutter 的美妙之处，这是我制作的一个示例：

            class MyCustomButton extends StatelessWidget {
              final String title;
              final Color color;
              final IconData icon;
              final radius = 35.0;
              final VoidCallback onTap;

              const MyCustomButton({
                Key key,
                this.title,
                this.color,
                this.icon,
                this.onTap,
              }) : super(key: key);

              @override
              Widget build(BuildContext context) {
                return Material(
                  color: Colors.transparent,
                  clipBehavior: Clip.hardEdge,
                  child: InkWell(
                    onTap: onTap,
                    child: SizedBox(
                      height: 2 * radius,
                      child: Stack(
                        fit: StackFit.expand,
                        children: [
                          Positioned(
                            top: 0.0,
                            left: radius,
                            right: 0.0,
                            bottom: 0.0,
                            child: Align(
                              child: Container(
                                height: radius + 10,
                                color: color,
                                alignment: Alignment.center,
                                child: Text(
                                  title,
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    fontSize: 22,
                                    color: Colors.white,
                                    fontWeight: FontWeight.w400,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Container(
                              height: 2 * radius,
                              width: 2 * radius,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: color,
                              ),
                              child: Center(
                                child: Container(
                                  height: 2 * radius - 5,
                                  width: 2 * radius - 5,
                                  decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: Colors.white,
                                  ),
                                  child: Icon(icon),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              }
            }

用法

        SizedBox(
                  width: 300,
                  child: MyCustomButton(
                    title: "Click to Login",
                    color: Colors.orange,
                    icon: Icons.lock_open,
                    onTap: () {
                      print("Tapped here");
                    },
                  ),
                ),

结果

您可以在这里找到更多信息：https://flutter.dev/docs/development/ui/layout

【讨论】：