Clip Container Example

readme.md

Clip Container Example

Created with <3 with dartpad.dev.

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class RibbonStart extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(size.width * 0.84, 0);
    path.cubicTo(size.width * 0.84, 0, 0, 0, 0, 0);
    path.cubicTo(0, 0, 0, size.height, 0, size.height);
    path.cubicTo(0, size.height, size.width * 0.84, size.height,
        size.width * 0.84, size.height);
    path.cubicTo(size.width * 0.84, size.height, size.width, size.height / 2,
        size.width, size.height / 2);
    path.cubicTo(size.width, size.height / 2, size.width * 0.84, 0,
        size.width * 0.84, 0);
    path.cubicTo(
        size.width * 0.84, 0, size.width * 0.84, 0, size.width * 0.84, 0);

    return path;
  }

  @override
  bool shouldReclip(oldClipper) => false;
}

class RibbonMiddle extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(size.width * 0.84, 0);
    path.cubicTo(size.width * 0.84, 0, 0, 0, 0, 0);
    path.cubicTo(0, 0, size.width * 0.16, size.height / 2, size.width * 0.16,
        size.height / 2);
    path.cubicTo(
        size.width * 0.16, size.height / 2, 0, size.height, 0, size.height);
    path.cubicTo(0, size.height, size.width * 0.84, size.height,
        size.width * 0.84, size.height);
    path.cubicTo(size.width * 0.84, size.height, size.width, size.height / 2,
        size.width, size.height / 2);
    path.cubicTo(size.width, size.height / 2, size.width * 0.84, 0,
        size.width * 0.84, 0);
    path.cubicTo(
        size.width * 0.84, 0, size.width * 0.84, 0, size.width * 0.84, 0);

    return path;
  }

  @override
  bool shouldReclip(oldClipper) => false;
}

class RibbonEnd extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(size.width, 0);
    path.cubicTo(size.width, 0, 0, 0, 0, 0);
    path.cubicTo(0, 0, size.width * 0.16, size.height / 2, size.width * 0.16,
        size.height / 2);
    path.cubicTo(
        size.width * 0.16, size.height / 2, 0, size.height, 0, size.height);
    path.cubicTo(
        0, size.height, size.width, size.height, size.width, size.height);
    path.cubicTo(size.width, size.height, size.width, size.height / 2,
        size.width, size.height / 2);
    path.cubicTo(size.width, size.height / 2, size.width, 0, size.width, 0);
    path.cubicTo(size.width, 0, size.width, 0, size.width, 0);

    return path;
  }

  @override
  bool shouldReclip(oldClipper) => false;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    BoxDecoration borderTop = BoxDecoration(
      color: Color(0xFFE1E6EA),
      border: Border(
        top: BorderSide(color: Color(0xFF009DFF), width: 2),
      ),
    );

    Widget activeRibbon = Container(
      width: 126,
      height: 36,
      decoration: borderTop,
    );
    
    double getLeft(int index) {
      return (126 * index) - ((20 - 4) * index) as double;
    }

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              SizedBox(
                width: 126 * 3,
                height: 36,
                child: Stack(
                  alignment: AlignmentDirectional.topStart,
                  children: [
                    Positioned(
                      top: 0,
                      left: 0,
                      child: ClipPath(
                        clipper: RibbonStart(),
                        child: activeRibbon,
                      ),
                    ),
                    Positioned(
                      top: 0,
                      left: getLeft(1),
                      child: ClipPath(
                        clipper: RibbonMiddle(),
                        child: activeRibbon,
                      ),
                    ),
                    Positioned(
                      top: 0,
                      left: getLeft(2),
                      child: ClipPath(
                        clipper: RibbonEnd(),
                        child: activeRibbon,
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}