Diagonal design of a container

Question

I want to make a container styled as follows: https://i.stack.imgur.com/ZPS6H.png

Having no idea how to do that I've tried to just incorporate SVG but it takes a different amount of time to render rectangles than to display SVG. I've tried LinearGradient but even when I define stops it doesn't look right.

Here's what I have now:

Container(
  width: width,
  height: 0.7 * height,
  child: Row(
    children: [
      Container(
        height: 0.7 * height,
        width: width * 0.35,
        color: yellow,
        child: CircularPhoto(),
      ),
      Container(
        width: width * 0.15,
        decoration: BoxDecoration(
           image: DecorationImage(
             image: AssetImage('assets/[email protected]'),
             fit: BoxFit.fill,
           ),
        ),
      ),
      Container(
        width: width * 0.50,
        color: Colors.white,
        child: BannerInfo(),
      ),
    ],
  ),
);

Solution

This is an example!: Maybe copy and paste it here to try it!: https://dartpad.github.io/

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height:200,
      width:500,
      child: Stack(
      children:[
        Container(
          color:Colors.white
        ),
        ClipPath(
          child: Container(
            width: MediaQuery.of(context).size.width,
            color: Colors.yellow,
          ),
          clipper: CustomClipPath(),
        )
      ]
    )
    )
      
      ;
      
      
  }
}

class CustomClipPath extends CustomClipper<Path> {
  var radius=10.0;
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, 200);
    path.lineTo(200,200);
    path.lineTo(260,0);
    path.lineTo(30, 0);
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Comments

[Cristian Bregant]

Did you try using ClipPath? it is made for this type of use!

[Krzysztof Dziardziel]

Thanks for the answer! It's exactly what I wanted. I want to maintain those 3 containers and just draw a white triangle on a container of yellow color but I get this thin yellow line (probably because of imperfect pixel proportions). Do you have any idea how to fix it? link