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

Question

I am designing a mobile app using Flutter, but I don't know how to design a custom button or listTile or any type of widget to look like the following image:

Answer 1

You can create that design by composing Widgets, that's the beauty of Flutter, this is a sample I made:

            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),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              }
            }

Usage

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

Result

You can find more info here: https://flutter.dev/docs/development/ui/layout