Skip to content

Instantly share code, notes, and snippets.

@rahichesoft
Created May 7, 2018 21:34
Show Gist options
  • Save rahichesoft/8b240ce5ccc83c3060f5134cacdaf33c to your computer and use it in GitHub Desktop.
Save rahichesoft/8b240ce5ccc83c3060f5134cacdaf33c to your computer and use it in GitHub Desktop.
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() => runApp(new MaterialApp(
home: new MyApp(),
));
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
overflow: Overflow.visible,
children: <Widget>[
new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new ExactAssetImage('assets/pics/newbook.jpg'),
fit: BoxFit.cover,
),
),
child: new BackdropFilter(
filter: new ui.ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
child: new Container(
decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
),
new Positioned(
top: 150.0,
left: 60.0,
child: new ClipPath(
clipper: new customclipper(),
child: new Container(
height: 350.0,
width: 300.0,
color: Colors.white70,
),
),
),
],
),
);
}
}
class customclipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = new Path();
path.lineTo(0.0, size.height - 20);
path.quadraticBezierTo(0.0, size.height, 20.0, size.height);
path.lineTo(size.width - 20.0, size.height);
path.quadraticBezierTo(size.width, size.height, size.width, size.height - 20);
path.lineTo(size.width, 50.0);
path.quadraticBezierTo(size.width, 30.0, size.width - 20.0, 30.0);
path.lineTo(20.0, 5.0);
path.quadraticBezierTo(0.0, 0.0, 0.0, 20.0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
@seeps001
Copy link

@rahichesoft I'm trying to actually create a similar shape but reversed, i.e. flipped vertically. I've tried reversing the values and sequence but I'm just not getting it. Also the original rectangular shape I started with had a boxshadow which is now being clipped as well. Any advice on how to add that back?

@seancondev
Copy link

and a path with no biezer curves;

var path = new Path();
path.lineTo(0.0, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 50.0);
path.lineTo(0.0, 5.0);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment