flutter - 如何制作本设计中的弯曲和有角度的容器？

Question

我正在创建一个 Flutter 应用程序，我需要创建一个有角度的屏幕设计。如何创建一个有角度的设计，如下图所示。

标签： flutter

Answer 1

这是使用 ClipPath 的解决方案：

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipPath(
        child: Container(
          color: Colors.red,
          width: 300,
          height: 400,
        ),
        clipper: MyClipper(),
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  final double _borderRadius; // percentage of the shortest side
  final double _angle;

  MyClipper({
    double borderRadius,
    double angle,
  })  : _borderRadius = borderRadius ?? .1,
        _angle = angle ?? degToRad(80);

  @override
  Path getClip(Size size) {
    final borderRadius = _borderRadius * size.shortestSide;
    final dx = borderRadius * cos(_angle);
    final dy = borderRadius * sin(_angle);
    final dX = size.height / tan(_angle);
    Path path = Path()
      ..moveTo(borderRadius, size.height)
      ..quadraticBezierTo(0, size.height, dx, size.height - dy)
      ..lineTo(dX - dx, dy)
      ..quadraticBezierTo(dX, 0, dX + borderRadius, 0)
      ..lineTo(size.width - borderRadius, 0)
      ..quadraticBezierTo(size.width, 0, size.width - dx, dy)
      ..lineTo(size.width - dX + dx, size.height - dy)
      ..quadraticBezierTo(size.width - dX, size.height,
          size.width - dX - borderRadius, size.height)
      ..close();

    return path;
  }

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

num degToRad(num deg) => deg * (pi / 180.0);

关于变量的快速解释dx，dy和dX：