在 Flutter 中使用貝塞爾曲線塑造容器

Question

到目前為止，我還不知道我們可以在 Flutter 中做出選擇，因此我對此完全陌生。 我想將我的容器塑造成類似於下面的設計，但我完全不知道如何做到這一點。 我做了一些閱讀以了解貝塞爾曲線的概念，但在嘗試將這些知識應用於下面的容器時，我最終得到了一些非常可怕的東西。 截圖和代碼如下：

這就是我最終得到的：

class ProfilePage extends StatefulWidget {
  ProfilePageState createState() => ProfilePageState();
}

class ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;

    // TODO: implement build
    return Scaffold(
      body: Container(
        height: height * 1,
        width: width * 1,
        color: Colors.red,
        child: Column(
          children: [
            Stack(
              children: [
                ClipPath(
                  clipper: CurvedAppBar(),
                  child: Container(
                    height: height * 0.2,
                    width: double.infinity,
                    color: Colors.white,
                  ),
                ),
                Positioned(child: Image.asset('assets/images/logo-with-bg.png'))
              ],
            )
          ],
        ),
      ),
    );
  }
}



import 'package:flutter/material.dart';
    
    class CurvedAppBar extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        var path = Path();
        path.lineTo(0, size.height);
        var firstStart = Offset(size.width / 5, size.height);
        var firstEnd = Offset(size.width / 2.25, size.height - 50);
        path.quadraticBezierTo(
            firstStart.dx, firstEnd.dy, firstEnd.dx, firstEnd.dy);
    
        var secondStart =
            Offset(size.width - (size.width / 3.24), size.height - 105);
        var secondEnd = Offset(size.width, size.height - 10);
        path.quadraticBezierTo(
            secondStart.dx, secondStart.dy, secondEnd.dx, secondEnd.dy);
        path.lineTo(size.width, 0);
    
        path.close();
        return path;
      }
    
      @override
      bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
        // TODO: implement shouldReclip
        return false;
      }
    }

任何想法如何塑造它？

Answer 1

看一下這個：

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Center(
          child: Container(
            color: Colors.grey,
            child: ClipPath(
              clipper: Clipp(),
              child: Container(
                width: 500,
                height: 500,
                color: Colors.pink,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class Clipp extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(150, 0);
    path.quadraticBezierTo(120, 150, 0, 150);
    path.lineTo(0, 380);
    path.quadraticBezierTo(size.width / 4, size.height, size.width, 270);
    path.lineTo(size.width, 0);
    return path;
  }

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

output：