Diagonal design of a container

user_12225042 0
Viewed 2140

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/divider@2x.png'),
             fit: BoxFit.fill,
           ),
        ),
      ),
      Container(
        width: width * 0.50,
        color: Colors.white,
        child: BannerInfo(),
      ),
    ],
  ),
);
flutter web containers shapes
1 Answers

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;
}
user_25921580
Related