如何在 Flutter 中設計這個自定義小部件形狀

Question

我正在使用 Flutter 設計一個移動應用程序，但我不知道如何設計一個自定義按鈕或listTile或任何類型的小部件，如下圖所示：

Answer 1

您可以通過組合 Widget 來創建該設計，這就是 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