import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyCustomShape(),
));
}
class MyCustomShape extends StatefulWidget {
@override
_MyCustomShapeState createState() => _MyCustomShapeState();
}
class _MyCustomShapeState extends State<MyCustomShape> {
@override
Widget build(BuildContext context) {
return Scaffold(
//backgroundColor: Colors.deepPurpleAccent,
appBar: AppBar(
//backgroundColor: Colors.deepPurpleAccent,
title: Text("Custom Shape Tutorial"),
),
body: Stack(
children: [
Center(
child: ClipPath(
clipper: MyCustomPath(),
child: Container(
width: 350,
height: 500,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Colors.deepOrangeAccent,
Colors.orange,
],
),
),
//color: Colors.red,
),
),
),
Positioned(
left: 100,
top: 100,
right: 100,
child: CircleAvatar(
backgroundColor: Colors.white60,
radius: 80,
child: CircleAvatar(
radius: 75,
backgroundImage: NetworkImage(
"imagelocationurl..."),
),
),
),
Align(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Deep Singh",
style: Theme.of(context).textTheme.headline4,
),
SizedBox(
height: 5,
),
Text(
"deepsingh44@gmail.com",
style: TextStyle(),
),
],
),
),
],
),
);
}
}
class MyCustomPath extends CustomClipper<Path> {
@override
Path getClip(Size size) {
//First Screen Custom Shape Code
var round = 50.0;
var path = Path();
path.moveTo(0, size.height * .50);
path.lineTo(0, size.height - round);
path.quadraticBezierTo(0, size.height, round, size.height);
path.lineTo(size.width - round, size.height);
path.quadraticBezierTo(
size.width, size.height, size.width, size.height - round);
path.lineTo(size.width, 0);
path.quadraticBezierTo(
0, size.height * .33 + round, 0, size.height * .33 + round * 2);
//Second Screen Custom Shape Code
//var path = Path();
/*path.lineTo(0.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.0);*/
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return true;
}
}
ClipPath in Flutter
Subscribe to:
Post Comments (Atom)


No comments:
Post a Comment