Flutter：直到卡片列表样式的一侧

Question

嗨，

我正在寻找一种在卡片列表样式上将一侧倾斜一定程度的方法。基本上我试图复制这个形状：

我不知道要实现这个....

Answer 1

输出

希望能让您满意。如果你想改变一些，请遵循这个：modifyCorner

import 'package:flutter/material.dart';

class COntainerStyle extends StatefulWidget {
  @override
  _COntainerStyleState createState() => _COntainerStyleState();
}

class _COntainerStyleState extends State<COntainerStyle> {
  @override
  Widget build(BuildContext context) {
    final boxWidth = 300.0;
    final boxHeight = 200.0;
    return Scaffold(
      body: Column(
        children: [
          Container(
            width: boxWidth,
            height: boxHeight,

            ///* second color
            color: Colors.blue.shade300,
            child: Stack(
              clipBehavior: Clip.hardEdge,
              children: [
                Positioned(
                  left: -boxWidth * .7,
                  child: Transform.rotate(
                    angle: .7,
                    child: Container(
                      ///* 2nd color of border
                      color: Colors.orange.shade800,
                      height: boxHeight * 1.2,
                      width: boxWidth * 1.5,
                    ),
                  ),
                ),

                //main view
                Center(
                  child: Container(
                    width: boxWidth * .9,
                    height: boxHeight * .9,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(
                          12,
                        ),
                        bottomLeft: Radius.circular(
                          12,
                        ),
                        topRight: Radius.elliptical(
                          ///your x= .15 y: .82
                          boxWidth * .15,
                          boxHeight * .82,
                          // boxWidth * sliderValTX,
                          // boxHeight * sliderValTY,
                        ),
                        bottomRight: Radius.elliptical(
                          //Bx .13, by = .11

                          boxWidth * .13,
                          boxHeight * .11,
                          // boxWidth * sliderValBX,
                          // boxHeight * sliderValBY,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Flutter：直到卡片列表样式的一侧

Flutter: Til one side of a card-listtyle

shapes

flutter