如何在Flutter容器中创建曲线

Question

如何在容器中创建类似于此的曲线。

- Prince Singh

---

你能明确一下你需要实现的是哪个部分吗？因为容器中的曲线可能指图片中的红色弧形部分，或者是圆形图像，或者是在弯曲容器上的圆形图像等等。 - Lunedor

Answer 1

如果您需要为存放个人资料图片的容器创建曲线，您最好使用带有自定义剪切器的ClipPath。

以下类似代码可以解决问题：

ClipPath(
  clipper: CurveClipper(),
  child: Container(
    color: Colors.red,
    height: 200.0,
  ),
);

我们定制的CurveClipper需要我们绘制一个包含贝塞尔曲线的路径，以获得容器底部的曲线形状:

class CurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    int curveHeight = 40;
    Offset controlPoint = Offset(size.width / 2, size.height + curveHeight);
    Offset endPoint = Offset(size.width, size.height - curveHeight);

    Path path = Path()
      ..lineTo(0, size.height - curveHeight)
      ..quadraticBezierTo(controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy)
      ..lineTo(size.width, 0)
      ..close();

    return path;
  }

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

- d3raymon

Answer 2

实际上，在这张图片中使用的是圆角的AppBar。要实现这个效果：

AppBar(
    title: Text('Anything'),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        bottom: Radius.circular(30),
      ),
    ),
  ),

如果您想要这种形状的容器：

Container(
    height: 200.0,
    decoration: new BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.vertical(
          bottom: Radius.elliptical(
              MediaQuery.of(context).size.width, 100.0)),
    ),
  ),

- Lunedor

---

迄今为止最简单、最优雅的解决方案。 - Vadim

最干净和优化的解决方案！致敬 - Java Nerd

Answer 3

我使用CustomPainter来绘制所需的容器，并将其放置在堆栈底部。其余的小部件可以按需要对齐在顶部。通过填充Column widget完成屏幕的其余部分。

输出图像如下所示：设计的输出图像 代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ProfileScreen(),
    );
  }
}

// class to draw the profile screen
class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          elevation: 0.0,
          backgroundColor: const Color(0xffea5d49),
          leading: Icon(
            Icons.menu,
            color: Colors.white,
          ),
        ),
        body: Stack(
          alignment: Alignment.center,
          children: [
            CustomPaint(
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
              ),
              painter: HeaderCurvedContainer(),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Text(
                    'Profile',
                    style: TextStyle(
                      fontSize: 35.0,
                      letterSpacing: 1.5,
                      color: Colors.white,
                      fontWeight: FontWeight.w600,

                    ),
                  ),
                ),
                Container(
                  width: MediaQuery.of(context).size.width / 2,
                  height: MediaQuery.of(context).size.width / 2,
                  padding: const EdgeInsets.all(10.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.white,
                    // image: DecorationImage(
                    //   image: AssetImage(null),
                    //   fit: BoxFit.cover,
                    // ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// CustomPainter class to for the header curved-container
class HeaderCurvedContainer extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = const Color(0xffea5d49);
    Path path = Path()
      ..relativeLineTo(0, 150)
      ..quadraticBezierTo(size.width / 2, 250.0, size.width, 150)
      ..relativeLineTo(0, -150)
      ..close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

- Abhay V Ashokan

---

完美，运行正常！ - Aziz