How to transform a rectangle in flutter like in this example?

Question

I am a beginner in Flutter and Dart, and I am working on designing a custom navigation bar. What I would like to know is how can I use flutter to transform a rectangle into this kind of shape?

Any help or tutorials on custom drawn widgets are much appreciated!

Answer 1

ClipPath can be the solution for you and you can create custom clippers like this :

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path myPath = Path();
    myPath.lineTo(0.0, size.height);

    myPath.quadraticBezierTo(
        size.width / 4,
        size.height / 1.2,
        size.width / 2,
        size.height / 1.2
    );
    myPath.quadraticBezierTo(
        size.width - (size.width / 4),
        size.height / 1.2,
        size.width,
        size.height);
    myPath.lineTo(size.width, 0.0);
    return myPath;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

I posted my whole code in the follow, you can play with it and convert to what you need :

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: Center(
              child: ClipPath(
            clipper: MyClipper(),
            child: Container(
              height: 200,
              width: 300,
              color: Colors.black26,
            ),
          )),
        ),
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path myPath = Path();
    myPath.lineTo(0.0, size.height);

    myPath.quadraticBezierTo(
        size.width / 4,
        size.height / 1.2,
        size.width / 2,
        size.height / 1.2
    );
    myPath.quadraticBezierTo(
        size.width - (size.width / 4),
        size.height / 1.2,
        size.width,
        size.height);
    myPath.lineTo(size.width, 0.0);
    return myPath;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}