Clipper Demo using Container in Row (Clip a part of container)

demo_clipper.dart

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(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: DemoClipper(),
        ),
      ),
    );
  }
}

class DemoClipper extends StatelessWidget {
  const DemoClipper({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: SizedBox(
        height: 70,
        child: Stack(alignment: Alignment.centerRight, children: [
          Padding(
            padding: const EdgeInsets.only(right: 20.0),
            child: Container(
              height: 70,
              decoration: BoxDecoration(
                  color: Colors.cyan, borderRadius: BorderRadius.circular(8)),
            ),
          ),
          Container(
            width: 40,
            height: 65,
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(color: Colors.white, width: 5)),
            child: FloatingActionButton(
              onPressed: () {},
              backgroundColor: Colors.cyan,
              child: const Icon(Icons.chevron_right),
            ),
          )
        ]),
      ),
    );
  }
}