import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:flutter/material.dart'; import 'dart:math'; class SliderView extends StatelessWidget { @override Widget build(BuildContext context) { return Card( shape: cardRadius(20), elevation: 0, margin: EdgeInsets.all(6), child: Card( shape: cardRadius(20), clipBehavior: Clip.antiAlias, margin: EdgeInsets.zero, color: Color(0xFFF2B353E), elevation: 0, // padding: EdgeInsets.zero, child: Container( width: double.infinity, height: double.infinity, clipBehavior: Clip.antiAlias, margin: EdgeInsets.zero, decoration: containerBottomRightRadiusWithGradient(MediaQuery.of(context).size.width / 4), child: Card( color: Colors.transparent, margin: EdgeInsets.zero, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ mFlex(3), Container( decoration: containerColorRadiusRight(Color(0xFFFBF2E31), 100), padding: EdgeInsets.only(left: 20, right: 16, top: 6, bottom: 6), child: Text( "Medical File", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 13), ), ), mFlex(2), Padding( padding: const EdgeInsets.only(left: 20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Can’t see your medical File?", style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18, ), ), Text( "Login or Register Now", style: TextStyle(color: Colors.white, fontSize: 14), ), ], ), ), mFlex(2), Padding( padding: const EdgeInsets.only(left: 20), child: Container( height: MediaQuery.of(context).size.width / 14, width: MediaQuery.of(context).size.width / 6, child: RaisedButton( shape: cardRadius(8), color: Color(0xFFFBF2E31), padding: EdgeInsets.zero, onPressed: () {}, child: Text( "Login", style: TextStyle( color: Colors.white, ), ), ), ), ), mFlex(3), ], ), ), ), ), ); } } class CurvedBottomClipper extends CustomClipper { @override Path getClip(Size size) { // I've taken approximate height of curved part of view // Change it if you have exact spec for it final roundingHeight = size.height * 3 / 5; // this is top part of path, rectangle without any rounding final filledRectangle = Rect.fromLTRB(0, 0, size.width, size.height - roundingHeight); // this is rectangle that will be used to draw arc // arc is drawn from center of this rectangle, so it's height has to be twice roundingHeight // also I made it to go 5 units out of screen on left and right, so curve will have some incline there final roundingRectangle = Rect.fromLTRB(-size.width, size.height - roundingHeight * 2, size.width, size.height); final path = Path(); path.addRect(filledRectangle); // so as I wrote before: arc is drawn from center of roundingRectangle // 2nd and 3rd arguments are angles from center to arc start and end points // 4th argument is set to true to move path to rectangle center, so we don't have to move it manually path.arcTo(roundingRectangle, pi, -pi, true); path.close(); return path; } @override bool shouldReclip(CustomClipper oldClipper) { // returning fixed 'true' value here for simplicity, it's not the part of actual question, please read docs if you want to dig into it // basically that means that clipping will be redrawn on any changes return true; } }