如何在flutte中创建圆形标题背景？

Question

我一直在尝试设计一个如图所示的 flutter 应用程序屏幕。但作为一个颤振的初学者，我不知道如何创建那些蓝色圆形背景，如附图所示。 我在某处读到 ClipRRect 可用于创建圆角矩形，但这是在背景的 flutter 中执行此操作的最有效方法，还是有其他更好的小部件专门用于创建此类背景？

Answer 1

为了实现这个 UI，我们需要使用自定义 Clipper 和 Stack 小部件。下面是代码：

@override
  Widget build(BuildContext context) {

    Size size = MediaQuery.of(context).size;
  

    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          ClipPath(
            clipper: CustomShape(),
            child: Container(
              height: size.height*0.5,
              width: size.width,
              color: Colors.blue,
            ),
          ),
          SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                'Gear Up your \nConfidence!',
                                style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.normal,
                                    fontSize: (size.height*0.01)*3.5
                                ),
                              ),

                              TextButton(
                                style: ElevatedButton.styleFrom(
                                  padding: EdgeInsets.symmetric(horizontal: size.width * 0.04, vertical: 10),
                                  backgroundColor: Colors.white.withOpacity(0.1),
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(size.width * 0.03),
                                  ),
                                ),
                                onPressed: (){},
                                child: Text(
                                  'SKIP',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                      fontSize: (size.height*0.01)*1.5
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      )
                  ),

                 Expanded(
                     child: Column(
                       mainAxisAlignment: MainAxisAlignment.spaceAround,
                       children: [
                         Text(
                           'LOGO',
                           style: TextStyle(
                               color: Colors.black,
                               fontWeight: FontWeight.bold,
                               fontSize: (size.height*0.01)*5.5
                           ),
                         ),

                         Text(
                           'Learn with the best',
                           style: TextStyle(
                               color: Colors.black,
                               fontWeight: FontWeight.bold,
                               fontSize: (size.height*0.01)*2.0
                           ),
                         ),


                         Text(
                           "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
                           textAlign: TextAlign.center,
                           style: TextStyle(
                               color: Colors.black,
                               fontWeight: FontWeight.bold,
                               fontSize: (size.height*0.01)*1.5
                           ),
                         ),
                       ],
                     )
                 ),
                  
                  const Expanded(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.circle, color: Colors.blue,),
                          Icon(Icons.circle, color: Colors.grey,),
                          Icon(Icons.circle, color: Colors.grey,),
                          Icon(Icons.circle, color: Colors.grey,),
                        ],
                      )
                  ),

                ],
              ),
            ),
          )
        ],
      ),
    );
  }


class CustomShape extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    double height = size.height;
    double width = size.width;

    var path = Path();
    path.lineTo(0, height);
    path.quadraticBezierTo(width*0.25, height, width, height-(height*0.5));
    path.lineTo(width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }

}