颤振 |如何创建具有以下内容的容器，以及如何在小部件周围/容器内绘制自定义边框

Question

我正在尝试实现一个外观与此图相似的 Flutter 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),
                ]),
          ),
        ]),

  );
}

MyTri 类扩展 CustomPainter {}

类 CustomShapeBorder 扩展 ShapeBorder {}

使用小部件时，我遇到此错误。

Answer 1

此代码将为您提供类似开头的内容：

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

  }
}