CODEWITHSUNDEEP
flutterflutter-layout
Chirag Chopra
Chirag Chopra

Reputation: 152

Facing issue in making this in flutter

enter image description here

My current code :

Container(
                  height: 1 / 3 * deviceSize.height,
                  width: double.infinity,
                  child: Text(
                    'Add New Location',
                    style: TextStyle(color: Colors.black, fontSize: 20.0),
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.elliptical(300, 100),
                        bottomRight: Radius.elliptical(300, 100)),
                    color: Color(0xFFFAD02E),
                  ),
                )

I am not getting desired results.... :/

Upvotes: 0

Views: 342

Answers (2)

AskNilesh
AskNilesh

Reputation: 69689

You can use ClipPath

Try this

ClipPath(
  clipper: BottomClipper(),
  child: Container(
  height: 200,
  color: Colors.yellow,
  child: Center(child: Text("BottomClipper()")),
 ),
),

BottomClipper()

import 'package:flutter/material.dart';

class BottomClipper  extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, 0);
    path.lineTo(0, size.height - 40);
    path.quadraticBezierTo(
        size.width / 4, size.height, size.width / 2, size.height);
    path.quadraticBezierTo(
        size.width - size.width / 4, size.height, size.width, size.height - 40);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);
    return path;
  }

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

OUTPUT

enter image description here

Upvotes: 3

susanta96
susanta96

Reputation: 89

You can Try ClipPath using custom clipper to make this desire UI in flutter. But Your Method can still work need some tweaking.

ClipPath(
  clipper: ProfileClipper(),
  child: Image(
    height: 300.0,
    width: double.infinity,
    image: AssetImage('You can use image or your desire color use container'),
    fit: BoxFit.cover,
  ),
),

import 'package:flutter/material.dart';

class ProfileClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, 4 * size.height / 5);
    Offset curvePoint = Offset(size.width / 2, size.height);
    Offset endPoint = Offset(size.width, 4 * size.height / 5);
    path.quadraticBezierTo(
      curvePoint.dx,
      curvePoint.dy,
      endPoint.dx,
      endPoint.dy,
    );
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

Upvotes: 4

Related Questions