title: Diagonal design of a container
body: <p>I want to make a container styled as follows:
  <a href="https://i.stack.imgur.com/ZPS6H.png" rel="nofollow noreferrer">https://i.stack.imgur.com/ZPS6H.png</a></p>
  <p>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.</p>
  <p>Here's what I have now:</p>
  <pre><code>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/divider@2x.png'),
               fit: BoxFit.fill,
             ),
          ),
        ),
        Container(
          width: width * 0.50,
          color: Colors.white,
          child: BannerInfo(),
        ),
      ],
    ),
  );
  </code></pre>