Skip to content

Instantly share code, notes, and snippets.

@anoochit

anoochit/main.dart

Last active Dec 3, 2020
Embed
What would you like to do?
login form with clippath
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
canvasColor: Colors.white,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
// background
ClipPath(
child: Image.network(
"https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&w=1000&q=80"),
clipper: MyClipper(),
),
// login form
Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
child: Flex(
direction: Axis.vertical,
mainAxisAlignment: MainAxisAlignment.center,
//crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextFormField(
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
hintText: 'Username',
prefixIcon: Icon(Icons.account_circle),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)),
),
),
SizedBox(
height: 8.0,
),
TextFormField(
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
hintText: 'Password',
prefixIcon: Icon(Icons.keyboard),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)),
),
),
],
),
),
),
],
),
);
}
}
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = new Path();
path.lineTo(0.0, size.height - 20);
var firstControlPoint = Offset(size.width / 4, size.height);
var firstEndPoint = Offset(size.width / 2.25, size.height - 30.0);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstEndPoint.dx, firstEndPoint.dy);
var secondControlPoint =
Offset(size.width - (size.width / 3.25), size.height - 65);
var secondEndPoint = Offset(size.width, size.height - 40);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondEndPoint.dx, secondEndPoint.dy);
path.lineTo(size.width, size.height - 40);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment