Align items diagonally within it's parent in Flutter - flutter

Question

I am trying to build a widget that is made out of 2 different components:
image
container with text
I could just make a vertical split between the image but my aim is to have the split diagonal with diagonal text align aswell (or that the items would align themselves with the diagonal).
I was able to achieve most of the part with this resource: Custom flutter widget shape, but I am having problems with aligning text diagonally with the parent line. It is shown like this
This is my code for now
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.centerLeft,
fit: BoxFit.fitHeight,
image: NetworkImage(
'https://media.sproutsocial.com/uploads/2014/02/Facebook-Campaign-Article-Main-Image2.png'),
),
),
),
ClipPath(
clipper: TrapeziumClipper(),
child: Container(
color: Colors.white,
padding: EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text('1'),
Text('2'),
Text('3'),
Text('4'),
Text('5'),
Text('6'),
],
crossAxisAlignment: CrossAxisAlignment.center,
),
width: double.infinity,
),
)
],
),
And this is my clipper line draw.
class TrapeziumClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
final path = Path();
path.moveTo(size.width, 0.0);
path.lineTo(size.width * 53 / 100, 0.0);
path.lineTo(size.width * 1 / 3, size.height);
path.lineTo(size.width, size.height);
path.close();
return path;
}
#override
bool shouldReclip(TrapeziumClipper oldClipper) => false;
}

Answer 1

So after trying out with CustomMultiChildLayout and much more other widgets I have come to the conclusion that there is really not any way around other than to have comlpicated "hacks".
The one simpeples for me was this:
Container(
height: double.infinity,
width: double.infinity,
padding: const EdgeInsets.only(top: 15, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: (mediaQuery.size.width * 53 / 100) - mediaQuery.size.width * 0.14,
padding: EdgeInsets.only(right: 15),
height: 15,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'23. feb 2020',
style: TextStyle(
fontSize: 11,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.lightGrey,
),
),
Text(
'21.00',
style: TextStyle(
fontSize: 11,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.lightGrey,
),
)
],
),
),
SizedBox(
height: 5,
),
Container(
width: (mediaQuery.size.width * 57 / 100) - mediaQuery.size.width * 0.14,
padding: EdgeInsets.only(right: 15),
height: 20,
child: FittedBox(
alignment: Alignment.centerLeft,
fit: BoxFit.scaleDown,
child: Text(
'item title name',
style: TextStyle(
fontSize: 18,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.white),
),
),
),
SizedBox(
height: 5,
),
Container(
width: (mediaQuery.size.width * 61 / 100) - mediaQuery.size.width * 0.14,
padding: EdgeInsets.only(right: 15),
height: 15,
child: Text(
'address',
style: TextStyle(
fontSize: 11,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.lightGrey,
),
),
),
Expanded(
child: Container(),
),
Container(
width: (mediaQuery.size.width * 3.7 / 5) - mediaQuery.size.width * 0.14,
padding: EdgeInsets.only(right: 15),
height: 32,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'GOING',
style: TextStyle(
fontSize: 24,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.green,
),
),
Container(
alignment: Alignment.bottomRight,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
AppIcons.guests,
size: 15,
color: AppColors.white,
),
SizedBox(
width: 15,
),
Text(
'24',
style: TextStyle(
fontSize: 20,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.white),
),
],
),
)
],
),
),
Basically what I did was get the screensizes of the elements and then by simply testing, I calculated how much width can Container() take in order to stay in the trapezoid area. The only thing I am concerned about is the responsivness with larger/smaller devices, but I hope that it will work since it's based on mediaquery sizes and not fixed ones.