flutterdartflutter-layoutflutter-canvas

Draw widget in Flutter


I want to draw the widget like this:

my_image

For detail, I will use coordinates. The angle (0, 0), (0, 1) and (1, 1) is easy, the cross line from (0,6, 0) to (1, 1) is easy too, but the border in (0,6, 0) is so hard for me. Any ideal to draw this border?


Solution

  • Here is your Container and Clip Code... and also use Shape Maker to design such layout and you will get clip code

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Welcome to Flutter',
          home: Scaffold(
            backgroundColor: Colors.grey,
            appBar: AppBar(
              title: const Text('Welcome to Flutter'),
            ),
            body: ClipPath(
              clipper: CustomClipPathTopContainer(),
              child: Container(
                height: 300,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30)
                  )
                )
              ),
            ),
          ),
        );
      }
    }
    
    class CustomClipPathTopContainer extends CustomClipper<Path> {
    
      @override
      Path getClip(Size size) {
        double w = size.width;
        double h = size.height;
    
        Paint paint = Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth=10.0
          ..color = Colors.black;
    
        Path path0 = Path();
        path0.moveTo(0,size.height);
        path0.lineTo(0,0);
        path0.quadraticBezierTo(size.width*0.4875583,size.height*-0.0214000,size.width*0.5673083,size.height*0.0330714);
        path0.quadraticBezierTo(size.width*0.6709917,size.height*0.1021143,size.width,size.height);
        path0.lineTo(0,size.height);
        path0.close();
        return path0;
      }
    
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) => false;
    }
    

    Output

    enter image description here