How to subtract one container from another?

1

I am new to Flutter. I was trying to implement this UI 👇👇

The red circle

The way I was implementing is

class SearchFlightBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(
        left: 25,
        right: 25,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              RoundButton(
                icon: Arrow_Forward.icon_ionic_md_arrow_round_back,
                title: "ONE WAY",
                iconSize: 10,
              ),
              RoundButton(
                icon: Two_Arrows.group_73,
                title: "ROUND TRIP",
                iconSize: 16,
              ),
            ],
          ),
          Container(
            // base Conatiner
            margin: EdgeInsets.only(
              top: 35,
            ),
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                    offset: Offset(-10, -10),
                    blurRadius: 15,
                    color: Color(0xffFFFFFF)),
              ],
              borderRadius: BorderRadius.circular(4),
              color: Color(0xffF6F9FF),
            ),
            child: ClipPath(
              clipper: MyCustomClipper(),
              child: Container(
                //Subtraction Container
                decoration: BoxDecoration(
                    // color: Color(0xffF6F9FF),
                    color: Colors.red,
                    border: Border.all(
                      color: Color(0x00000000),
                    ),
                    boxShadow: [
                      BoxShadow(
                        offset: Offset(0, 5),
                        blurRadius: 10,
                        color: Color(0x0f140B2B),
                      ),
                    ]),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: EdgeInsets.symmetric(
                        vertical: 15,
                        horizontal: 15,
                      ),
                      child: Icon(
                        TakeOff.take_off,
                        size: 30,
                        color: Theme.of(context).accentColor,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 15,
                        bottom: 5,
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'FORM',
                            style: Theme.of(context).textTheme.caption,
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Text(
                            'Sydney, Austraila',
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
          // Container(
          //   margin: EdgeInsets.only(
          //     right: 25,
          //   ),
          //   transform: Matrix4.translationValues(-3.0, -20, 0.0),
          //   decoration: BoxDecoration(
          //     borderRadius: BorderRadius.circular(50),
          //     color: Colors.red,
          //   ),
          //   height: 50,
          //   width: 50,
          // ),
          // Container(
          //   height: 100,
          //   width: double.infinity,
          //   color: Colors.red,
          // )
        ],
      ),
    );
  }
}

My Custom Clipper is

    import 'dart:math';

import 'package:flutter/cupertino.dart';

class MyCustomClipper extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    Size newSize = Size(size.width, size.height - 40);
    double radius = 40;
    Offset center = Offset(6 * size.width / 7, size.height + 20);
    Offset firstEnd = Offset(6 * size.width / 7, size.height - radius);
    Offset secondEnd = Offset(6 * size.width / 7 + radius, size.height);
    print('size: ' + size.toString());
    // TODO: implement getClip
    Path path = Path()
      // ..lineTo(0, size.height)

  // ..lineTo(0, size.height)
      // ..arcToPoint(
      //   Offset(7 * size.width / 8, size.height - radius),
      //   radius: Radius.circular(radius),
      // )
      // ..arcToPoint(
      //   Offset(7 * size.width / 8 + radius, size.height),
      //   radius: Radius.circular(radius),
      // )
      // // ..arcTo(
      // //     Rect.fromCircle(
      // //       center: Offset(3 * size.width / 4, size.height),
      // //       radius: radius,
      // //     ),
      // //     1 * pi,
      // //     2,
      // //     true)

      // ..lineTo(size.width, size.height)
      ..arcTo(
          Rect.fromCircle(
            center: center,
            radius: radius,
          ),
          1.3 * pi,
          1.8 * pi,
          true);
    // ..lineTo(size.width, 0)
    // ..lineTo(0, 0)
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper oldClipper) {
    // TODO: implement shouldReclip
    return false;
  }
}

As You can see, I was first clipping with ..artoPoint(). But That was just joining the two point with arc radius. That function is cutting a semicircle.

And I tried with ..arTo() function. But In that Function, I have to specify the start angle and sweep angle. But There is no way I can tell the value of both angle(Is there any way to know?).

I just want a function that will just draw a circle at a given center. And Just cut the portion of the container(in my case) and be done with it.

Or is There anyway I can do?

flutter
flutter-layout

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0