Flutter:直到卡片样式的一侧

问题描述

嗨,

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

enter image description here

我不知道要实现这一目标....

解决方法

输出

enter image description here

希望它能让你满意。如果你想改变一些遵循这个: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,)
              ],],);
  }
}