容器的对角线设计

Question

我想制作一个样式如下的容器： https://i.stack.imgur.com/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/divider@2x.png'),
             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;
}

容器的对角线设计

Diagonal design of a container

containers

shapes

web

flutter