How to create a border like this in Flutter?

How to create a border like this:

You can achieve a similar clipped border using CustomClipper. Here is a simple CustomClipper I have created for you.

First Create a custom clipper.

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var smallLineLength = size.width / 20;
    const  smallLineHeight = 20;
    var path = Path();

    path.lineTo(0, size.height);
    for (int i = 1; i <= 20; i++) {
      if (i % 2 == 0) {
        path.lineTo(smallLineLength * i, size.height);
      } else {
        path.lineTo(smallLineLength * i, size.height - smallLineHeight);
        
      }
    }
    path.lineTo(size.width, 0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper old) => false;
}

And wrap the created CustomClipper with ClipPath.

     SizedBox(
      height: 200,
      width: 500,
      child: ClipPath(
          clipper: MyClipper(),
          child: Container(
            height: 200,
            width: 500,
            alignment: Alignment.center,
            color: Colors.red,
            child: const Text("abc"),
          )),
    ),

Full Code:

import 'package:flutter/material.dart';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
         SizedBox(
          height: 200,
          width: 500,
          child: ClipPath(
              clipper: MyClipper(),
              child: Container(
                height: 200,
                width: 500,
                alignment: Alignment.center,
                color: Colors.red,
                child: const Text("abc"),
              )),
        ),
      ]),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var smallLineLength = size.width / 20;
    const  smallLineHeight = 20;
    var path = Path();

    path.lineTo(0, size.height);
    for (int i = 1; i <= 20; i++) {
      if (i % 2 == 0) {
        path.lineTo(smallLineLength * i, size.height);
      } else {
        path.lineTo(smallLineLength * i, size.height - smallLineHeight);
        
      }
    }
    path.lineTo(size.width, 0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper old) => false;
}

You can run this code by copying/pasting in dartpad. You can learn more about CustomClipper from here, medium article