UI中面临的问题[颤振]答案

【问题标题】：Facing issue in UI [ FLUTTER ]UI中面临的问题[颤振]
【发布时间】：2020-10-26 00:02:13
【问题描述】：

这是我想要创建的，但在构建到右上角的勾号/右图标时遇到了问题..

Container(
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
      decoration: BoxDecoration(
          border: Border.all(color: Color(0xFFFAD02E), width: 5),
          // color: Colors.green,
          borderRadius: BorderRadius.circular(20.0)),
      child: Column(
        children: <Widget>[
          Text(
            price,
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),
          ),
          SizedBox(
            height: 5,
          ),
          Text(
            duration,
            style: TextStyle(fontSize: 20),
          ),
        ],
      ),
    ),

【问题讨论】：

标签： flutter flutter-layout flutter-animation

【解决方案1】：

我试图实现它，它是这样的：

代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Draw Triangle'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Stack(children: <Widget>[
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
                decoration: BoxDecoration(
                    border: Border.all(color: const Color(0xFFFAD02E), width: 4),
                    // color: Colors.green,
                    borderRadius: BorderRadius.circular(20.0)),
                child: Column(
                  children: const [
                    Text(
                      "\$2.97",
                      style:
                          TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    Text(
                      "2days",
                      style: TextStyle(fontSize: 18),
                    ),
                  ],
                ),
              ),
              Positioned(
                right: -0.5,
                child: CustomPaint(
                  painter: TrianglePainter(
                    strokeColor: const Color(0xFFFAD02E),
                  ),
                  child: const SizedBox(
                    height: 28,
                    width: 35,
                    child: Padding(
                      padding: EdgeInsets.only(left: 12, bottom: 5),
                      child: Icon(Icons.check, size: 12, color: Colors.black),
                    ),
                  ),
                ),
              ),
            ])
          ],
        ),
      ),
    );
  }
}

class TrianglePainter extends CustomPainter {
  final Color strokeColor;

  TrianglePainter({this.strokeColor = Colors.black});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = strokeColor
      ..strokeWidth = 10
      ..style = PaintingStyle.fill;

    canvas.drawPath(getTrianglePath(size.width, size.height), paint);
  }

  Path getTrianglePath(double x, double y) {
    return Path()
      ..moveTo(y, 5)
      ..lineTo(0, 0)
      ..lineTo(y + 6, x - 6)
      ..lineTo(y, 6);
  }

  @override
  bool shouldRepaint(TrianglePainter oldDelegate) {
    return true;
  }
}

【讨论】：