Posted By
Bajarangi soft ,
Posted On 23-09-2020
Step 1
we will add flutter_custom_clippers: ^1.1.2 dependency name to
our pubspec.yaml file as shown below:
dependencies:
flutter:
sdk: flutter
flutter_custom_clippers: ^1.1.2
flutter pub get
import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';
SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
ClipPath(
clipper: WaveClipperOne(flip: true),
child: Container(
height: 200,
color: Colors.orangeAccent,
child: Center(
child: Text("Login", style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 40,
),),
),
),
),
Padding(
padding: EdgeInsets.all(30.0),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(5),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: "Email or Phone number",
hintStyle: TextStyle(
color: Colors.grey[500])
),
),
),
Container(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(
color: Colors.grey[500])
),
),
)
],
),
),
SizedBox(height: 30,),
Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [Colors.orange[400], Colors.orange[300]]
)
),
child: Center(
child: Text("Sign Up", style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),),
),
),
SizedBox(height: 20,),
Container(
child: Row(
children: <Widget>[
Text('Does not have account?'),
FlatButton(
textColor: Colors.orange[300],
child: Text(
'Sign in',
style: TextStyle(fontSize: 20,),
),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
))
],
)
)
]
)
),
)
import 'package:flutter/material.dart';
import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
)
);
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
ClipPath(
clipper: WaveClipperOne(flip: true),
child: Container(
height: 200,
color: Colors.orangeAccent,
child: Center(
child: Text("Login", style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 40,
),),
),
),
),
Padding(
padding: EdgeInsets.all(30.0),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(5),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: "Email or Phone number",
hintStyle: TextStyle(
color: Colors.grey[500])
),
),
),
Container(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(
color: Colors.grey[500])
),
),
)
],
),
),
SizedBox(height: 30,),
Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [Colors.orange[400], Colors.orange[300]]
)
),
child: Center(
child: Text("Sign Up", style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),),
),
),
SizedBox(height: 20,),
Container(
child: Row(
children: <Widget>[
Text('Does not have account?'),
FlatButton(
textColor: Colors.orange[300],
child: Text(
'Sign in',
style: TextStyle(fontSize: 20,),
),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
))
],
)
)
]
)
),
)
);
}
}