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