如何在 flutter 的容器中創建曲線

Question

如何像這樣在容器中創建曲線

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;
}

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)),
    ),
  ),

Answer 3

我使用 CustomPainter 繪制了所需的容器並將其放置在堆棧的底部。 小部件的 rest 可以根據需要在頂部對齊。 通過填充 Column 小部件來完成屏幕的 rest。

output 的圖片如下所示： Output 設計圖片

代碼

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;
}

Answer 4

如何像這樣在容器中創建曲線