flutter - 容器的对角线设计

Question

我想制作一个样式如下的容器: /image/ZPS6H.png

由于不知道如何做到这一点，我尝试合并 SVG，但渲染矩形所需的时间与显示 SVG 所需的时间不同。我尝试过 LinearGradient，但即使我定义了停止点，它看起来也不正确。

这是我现在拥有的:

Container(
  width: width,
  height: 0.7 * height,
  child: Row(
    children: [
      Container(
        height: 0.7 * height,
        width: width * 0.35,
        color: yellow,
        child: CircularPhoto(),
      ),
      Container(
        width: width * 0.15,
        decoration: BoxDecoration(
           image: DecorationImage(
             image: AssetImage('assets/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22464b544b46475062105a0c524c45" rel="noreferrer noopener nofollow">[email protected]</a>'),
             fit: BoxFit.fill,
           ),
        ),
      ),
      Container(
        width: width * 0.50,
        color: Colors.white,
        child: BannerInfo(),
      ),
    ],
  ),
);

Answer 1

这是一个例子!:也许可以将其复制并粘贴到此处尝试一下!:https://dartpad.github.io/

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height:200,
      width:500,
      child: Stack(
      children:[
        Container(
          color:Colors.white
        ),
        ClipPath(
          child: Container(
            width: MediaQuery.of(context).size.width,
            color: Colors.yellow,
          ),
          clipper: CustomClipPath(),
        )
      ]
    )
    )
      
      ;
      
      
  }
}

class CustomClipPath extends CustomClipper<Path> {
  var radius=10.0;
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, 200);
    path.lineTo(200,200);
    path.lineTo(260,0);
    path.lineTo(30, 0);
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}