User interface flatter |如何创建包含以下内容的容器，以及如何在小部件周围/容器内部绘制自定义边框

我正在尝试实现一个外观类似于此图的颤振UI

我想创建如下内容，但我无法正确划分。希望大家帮忙

final colorEnvelope = Color(0xff444444);


Widget getSellWidget(Sell product, {double width = 180}) {

  final Color borderColor = Colors.blueGrey.shade900;
  final BorderStyle borderStyle = BorderStyle.solid;

  return Container(
    width: width,
    height: productContainerHeight,
    margin: EdgeInsets.all(8),
    child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            //padding: EdgeInsets.all(10),
            alignment: Alignment.center,
            decoration: ShapeDecoration(
              shape: CustomShapeBorder(),
              /*border: Border(
                      top: BorderSide(color: borderColor)
                      color: borderColor,
                    ),*/
              color: Colors.white,
            ),
            margin: const EdgeInsets.all(20.0),
            child:
            Stack(children: <Widget>[
              Positioned(
                right: 0,
                top: 0,
                child: CustomPaint(
                    size: Size(20,20),
                    painter: MyTri()),
              ),
              Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      SizedBox(height: 10),
                      Image.network(
                        "https://flutter.dev/assets/flutter-lockup-c13da9c9303e26b8d5fc208d2a1fa20c1ef47eb021ecadf27046dea04c0cebf6.png",
                        fit: BoxFit.fitHeight,
                      ),
                      SizedBox(height: 10),
                      Text("Living a hectic life"),
                    ]),),]),  // stack
          ),
          Container(
            alignment: Alignment.topCenter,
            margin: const EdgeInsets.all(10.0),
            child:
            Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Text("Living a hectic life"),
                        Text("Living a hectic life"),
                        Text("Living a hectic life"),
                      ]),
                  Icon(Icons.photo),
                ]),
          ),
        ]),

  );
}

最终颜色信封=颜色（0xFF4444）；
Widget getSellWidget（销售产品，{double width=180}）{
最终颜色边框颜色=Colors.blueGrey.shade900；
最终BorderStyle BorderStyle=BorderStyle.solid；
返回容器(
宽度：宽度，
高度：产品容器高度，
保证金：全部（8），
子：列(
mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.min，
儿童：[
容器(
//填充：边缘设置。全部（10），
对齐：对齐.center，
装饰：造型装饰(
形状：CustomShapeOrder（），
/*边界：边界(
顶部：BorderSide（颜色：borderColor）
颜色：边框颜色，
),*/
颜色：颜色，白色，
),
边距：所有常数边集（20.0），
儿童：
堆栈（子对象：[
定位(
右:0,，
排名：0，
孩子：定制油漆(
尺寸：尺寸（20,20），
画家：MyTri（）），
),
填充物(
填充：边缘设置。全部（10），
子：列(
mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.min，
儿童：[
尺寸箱（高度：10），
图像网络(
"https://flutter.dev/assets/flutter-lockup-c13da9c9303e26b8d5fc208d2a1fa20c1ef47eb021ecadf27046dea04c0cebf6.png",
适合度：BoxFit.fit高度，
),
尺寸箱（高度：10），
文本（“过着忙碌的生活”），
])，），]，//堆栈
),
容器(
对齐：alignment.topCenter，
边距：所有常数边集（10.0），
儿童：
划船(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
纵队(
mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.min，
儿童：[
文本（“过着忙碌的生活”），
文本（“过着忙碌的生活”），
文本（“过着忙碌的生活”），
]),
图标（Icons.photo），
]),
),
]),
);
}

类MyTri扩展了CustomPainter{}

类CustomShapeOrder扩展了ShapeOrder{}

当使用小部件时，我有这个错误。

---

此代码将为您提供与以下类似的功能：

导入“包装：颤振/材料.省道”；
最终颜色信封=颜色（0xFF4444）；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
debugShowCheckedModeBanner:false，
家：脚手架(
正文：中(
child:Sell（），
),
),
);
}
}
类控件{
最终颜色边框颜色=Colors.blueGrey.shade400；
最终BorderStyle BorderStyle=BorderStyle.solid；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：Text（'border:border'）），
正文：中(
子：容器(
宽度：180，
装饰：盒子装饰(
颜色：颜色。透明，
边界半径：边界半径。圆形（20），
边界：边界(
颜色：边框颜色，
样式：边框样式，
),
),
子：列(
mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.min，
儿童：[
容器(
//填充：边缘设置。全部（10），
对齐：对齐.center，
装饰：造型装饰(
形状：CustomShapeOrder（），
/*边界：边界(
顶部：BorderSide（颜色：borderColor）
颜色：边框颜色，
),*/
颜色：颜色，白色，
),
边距：所有常数边集（20.0），
儿童：
堆栈（子对象：[
定位(
右:0,，
排名：0，
孩子：定制油漆(
尺寸：尺寸（20,20），
画家：MyTri（）），
),
填充物(
填充：边缘设置。全部（10），
子：列(
mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.min，
儿童：[
尺寸箱（高度：10），
图像网络(
"https://flutter.dev/assets/flutter-lockup-c13da9c9303e26b8d5fc208d2a1fa20c1ef47eb021ecadf27046dea04c0cebf6.png",
适合度：BoxFit.fit高度，
),
尺寸箱（高度：10），
文本（“过着忙碌的生活”），
])，），]，//堆栈
),
容器(
对齐：alignment.topCenter，
边距：所有常数边集（10.0），
儿童：
划船(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
上校
import 'package:flutter/material.dart';

final colorEnvelope = Color(0xff444444);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Sell(),
        ),
      ),
    );
  }
}

class Sell extends StatelessWidget {
  final Color borderColor = Colors.blueGrey.shade400;
  final BorderStyle borderStyle = BorderStyle.solid;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('border: Border')),
      body: Center(
        child: Container(
          width: 180,
          decoration: BoxDecoration(
            color: Colors.transparent,
            borderRadius: BorderRadius.circular(20),
            border: Border.all(
              color: borderColor,
              style: borderStyle,
            ),
          ),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[

                  Container(
                  //padding: EdgeInsets.all(10),
                  alignment: Alignment.center,
                  decoration: ShapeDecoration(
                    shape: CustomShapeBorder(),
                    /*border: Border(
                      top: BorderSide(color: borderColor)
                      color: borderColor,
                    ),*/
                    color: Colors.white,
                  ),
                  margin: const EdgeInsets.all(20.0),
                  child: 
                    Stack(children: <Widget>[
                  Positioned(
                    right: 0,
                    top: 0,
                    child: CustomPaint(
                      size: Size(20,20),
                      painter: MyTri()),
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      SizedBox(height: 10),
                    Image.network(
                    "https://flutter.dev/assets/flutter-lockup-c13da9c9303e26b8d5fc208d2a1fa20c1ef47eb021ecadf27046dea04c0cebf6.png",
                    fit: BoxFit.fitHeight,
                  ),
                      SizedBox(height: 10),
                    Text("Living a hectic life"),
                    ]),),]),  // stack
                ),
                Container(
                    alignment: Alignment.topCenter,
                    margin: const EdgeInsets.all(10.0),
                    child: 
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                  Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Text("Living a hectic life"),
                          Text("Living a hectic life"),
                          Text("Living a hectic life"),
                        ]),
                  Icon(Icons.photo),
                  ]),),
                Container(
                  padding: EdgeInsets.all(20),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        color: borderColor,
                        style: borderStyle,
                      ),
                    ),
                  ),
                  child: Text("11:11:11"),
                ),
              ]),
        ),
      ),
    );
  }
}

class MyTri extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {

    Path path = Path();

    path.moveTo(size.width-20, 0);
    path.lineTo(size.width-20, 20);
    path.lineTo(size.width, 20);
    path.close();

    canvas.drawPath(path, Paint()..color = colorEnvelope);

  }

  @override
  bool shouldRepaint(MyTri mytri) => true;

}

class CustomShapeBorder extends ShapeBorder {
  const CustomShapeBorder();

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) => _getPath(rect);

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) => _getPath(rect);

  _getPath(Rect rect) {
    return Path()
      ..moveTo(rect.topLeft.dx, rect.topLeft.dy)
      ..lineTo(rect.bottomLeft.dx, rect.bottomLeft.dy)
      ..lineTo(rect.bottomRight.dx, rect.bottomRight.dy)
      ..lineTo(rect.topRight.dx, rect.topRight.dy + 20)
      ..lineTo(rect.topRight.dx - 20, rect.topRight.dy)
      ..close();
  }

  @override
  EdgeInsetsGeometry get dimensions {
    return EdgeInsets.all(0);
  }

  @override
  ShapeBorder scale(double t) {
    return CustomShapeBorder();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {

    Path path = Path()
      ..moveTo(rect.topLeft.dx, rect.topLeft.dy)
      ..lineTo(rect.bottomLeft.dx, rect.bottomLeft.dy)
      ..lineTo(rect.bottomRight.dx, rect.bottomRight.dy)
      ..lineTo(rect.topRight.dx, rect.topRight.dy + 20)
      ..lineTo(rect.topRight.dx - 20, rect.topRight.dy)
      ..close();

    canvas.drawPath(path, Paint()..color = colorEnvelope..style = PaintingStyle.stroke);

  }
}