Question

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

TuteeHUB · Accepted Answer

{"id":131435,"user_id":8,"qa_id":94548,"answer_id":0,"answer":"_x000D_
ClipPath can be the solution for you and you can create custom clippers like this :

class MyClipper extends CustomClipper {
  @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 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 {
  @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 {
  @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 oldClipper) {
    return false;
  }
}

","credit":0,"created_at":"2022-08-16T00:49:07.000000Z","updated_at":"2022-08-16T00:49:07.000000Z"}

Popular Categories

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

Manpreet Singh

Answers (1)

manpreet Best Answer 2 years ago

Similar Forum

Would Firebase be a good choice as a server for the Flutter mobile game I'm creating?

Implement Bottom Navigation activity along with a VerticalViewPager with nested Cardview in Android...

(JS) For , determine if the device offers or not to capture a photo from the camera

Explore Other Libraries

Online Exams

Question Bank

Career News

Feeds

Full Forms

Dictionary

Interview Question

Gigs

Quotes

Lyrics

Videos

Courses

Blogs

Tutorials

Forum

Educators

Corporates

Tools

Related Searches

Important Mobile Technologies Links

Join Our Community Today