Screenshot :
1.main.dart
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'splash_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.light),
);
return MaterialApp( theme: ThemeData( //buttonColor: Colors.white, brightness: Brightness.light, accentColor: Colors.orange, primaryColor: Colors.orangeAccent, primarySwatch: Colors.orange), title: "", initialRoute: '/', debugShowCheckedModeBanner: false, routes: <String, WidgetBuilder>{ '/': (context) => SplashScreenPage(), });
}
}
2.spash_page.dart
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'login_page.dart';
Color colorOne = Colors.orange[100];
Color colorTwo = Colors.orange;
Color colorThree = Colors.orange;
final appTheme = ThemeData(
primarySwatch: Colors.orange,
);
class SplashScreenPage extends StatefulWidget {
@override
createState() => new _SplashScreenPageState();
}
class _SplashScreenPageState extends State {
Duration five;
Timer t2;
String routeName;
@override
void initState() {
super.initState();
five = const Duration(seconds: 3);
t2 = new Timer(five, () {
_goLogin();
});
}
@override
void dispose() {
if (this.mounted)
super.dispose();
t2.cancel();
}
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
return new Scaffold(
body: Stack(
fit: StackFit.expand,
children: HeaderBar() ,
),
bottomNavigationBar: new Container(
width: MediaQuery.of(context).size.width, child: companyName()),
);
}
companyName() => Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
//mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
new Text('fluttertutorial.in',
style: TextStyle( color: Colors.black45,
fontSize: 13.0,
fontWeight: FontWeight.bold)),
],
),
);
_goLogin() async {
Navigator.of(context).pushReplacement(new MaterialPageRoute(
builder: (BuildContext context) => new LoginPage()));
}
}
class HeaderBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomPaint(
child: Container(
height: 300.0
),
painter: CurvePainter(),
);
}
}
class CurvePainter extends CustomPainter{
@override
void paint(Canvas canvas, Size size) {
Path path = Path();
Paint paint = Paint();
path.lineTo(0, size.height *0.75); path.quadraticBezierTo(size.width* 0.10, size.height*0.70, size.width*0.17, size.height*0.90); path.quadraticBezierTo(size.width*0.20, size.height, size.width*0.25, size.height*0.90); path.quadraticBezierTo(size.width*0.40, size.height*0.40, size.width*0.50, size.height*0.70); path.quadraticBezierTo(size.width*0.60, size.height*0.85, size.width*0.65, size.height*0.65); path.quadraticBezierTo(size.width*0.70, size.height*0.90, size.width, 0); path.close(); paint.color = colorThree; canvas.drawPath(path, paint); path = Path(); path.lineTo(0, size.height*0.50); path.quadraticBezierTo(size.width*0.10, size.height*0.80, size.width*0.15, size.height*0.60); path.quadraticBezierTo(size.width*0.20, size.height*0.45, size.width*0.27, size.height*0.60); path.quadraticBezierTo(size.width*0.45, size.height, size.width*0.50, size.height*0.80); path.quadraticBezierTo(size.width*0.55, size.height*0.45, size.width*0.75, size.height*0.75); path.quadraticBezierTo(size.width*0.85, size.height*0.93, size.width, size.height*0.60); path.lineTo(size.width, 0); path.close(); paint.color = colorTwo; canvas.drawPath(path, paint); path =Path(); path.lineTo(0, size.height*0.75); path.quadraticBezierTo(size.width*0.10, size.height*0.55, size.width*0.22, size.height*0.70); path.quadraticBezierTo(size.width*0.30, size.height*0.90, size.width*0.40, size.height*0.75); path.quadraticBezierTo(size.width*0.52, size.height*0.50, size.width*0.65, size.height*0.70); path.quadraticBezierTo(size.width*0.75, size.height*0.85, size.width, size.height*0.60); path.lineTo(size.width, 0); path.close(); paint.color = colorOne; canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return oldDelegate != this;
}
}
3.background_clipper.dart
import 'package:flutter/material.dart';
class BackgroundClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path()
..lineTo(0.0, size.height)
..lineTo(size.width, size.height)
..lineTo(size.width, 0.0)
..quadraticBezierTo(size.width, 0.0, size.width-20.0, 0.0)
..lineTo(40.0, 70.0)
..quadraticBezierTo(10.0, 85.0, 0.0, 120.0)
..close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}
4.uidata.dart
import 'dart:ui';
import 'package:flutter/material.dart';
class UIData {
//colors
static List drawerArrowGradients = [
Colors.white,
Colors.grey.shade200,
];
static List gradientsButton = [
Colors.grey.shade200,
Colors.orange.shade100,
];
}
5.custom_float.dart
import 'package:flutter/material.dart';
import 'uidata.dart';
class CustomFloat extends StatelessWidget {
final IconData icon;
final Widget builder;
final VoidCallback qrCallback;
final isMini;
CustomFloat({this.icon, this.builder, this.qrCallback, this.isMini = false});
@override
Widget build(BuildContext context) {
return FloatingActionButton(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(10.0), bottom: Radius.circular(10.0)),
),
clipBehavior: Clip.antiAlias,
mini: isMini,
onPressed: qrCallback,
child: Ink(
decoration: new BoxDecoration(
gradient: new LinearGradient(colors: UIData.drawerArrowGradients)),
child: Stack(
fit: StackFit.expand,
children: [
Icon(
icon,
color: Colors.orange.withOpacity(0.5),
),
builder != null
? Positioned(
right: 5.0,
top: 5.0,
child: CircleAvatar(
backgroundColor:Colors.orange.withOpacity(0.5),
child: builder,
radius: 85.0,
),
)
: Container(),
// builder
],
),
),
);
}
}
6.custom_float_form.dart
import 'package:flutter/material.dart';
import 'uidata.dart';
class CustomFloatForm extends StatelessWidget {
final IconData icon;
final VoidCallback qrCallback;
final isMini;
CustomFloatForm({this.icon, this.qrCallback, this.isMini = false});
@override
Widget build(BuildContext context) {
return FloatingActionButton(
elevation: 1,
clipBehavior: Clip.antiAlias,
mini: isMini,
onPressed: qrCallback,
child: Ink(
decoration: new BoxDecoration(
gradient: new LinearGradient(colors: UIData.gradientsButton)),
child: Stack(
fit: StackFit.expand,
children: [
Icon(
icon,
color: Colors.orangeAccent,
)
],
),
),
);
}
}
7 common_scaffold.dart
import 'package:flutter/material.dart';
import 'common_drawer.dart';
import 'uidata.dart';
class CommonScaffold extends StatelessWidget {
final appTitle;
final Widget bodyData;
final showFAB;
final showDrawer;
final actionFirstIcon;
final scaffoldKey;
final showBottomNav;
final centerDocked;
final elevation;
final Widget bottomBar;
final showOrderItems;
final showSorting;
CommonScaffold(
{this.appTitle,
this.bodyData,
this.showFAB = false,
this.showDrawer = false,
this.actionFirstIcon = Icons.search,
this.scaffoldKey,
this.showBottomNav = false,
this.centerDocked = false,
this.elevation = 0.3,
this.bottomBar,
this.showOrderItems = true,
this.showSorting = false});
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey != null ? scaffoldKey : null,
appBar: AppBar(
//leading: new Icon(Icons.menu),
iconTheme: new IconThemeData(color: Colors.white),
elevation: elevation,
backgroundColor: Colors.orange,
title: Text(appTitle,
style: new TextStyle(fontSize: 20.0, color: Colors.white)),
/* actions: [
IconButton(
onPressed: () {
Navigator.pushNamed(context, UIData.searchRoute);
},
icon: Icon(actionFirstIcon),
)
],*/
),
drawer: showDrawer ? CommonDrawer() : null,
body: bodyData);
}
}
8.common_drawer.dart
import 'package:flutter/material.dart';
class CommonDrawer extends StatefulWidget {
@override
_CommonDrawerState createState() => _CommonDrawerState();
}
class _CommonDrawerState extends State {
List> drawerMenuList = new List>();
@override
Widget build(BuildContext context) {
this.drawerMenuList = this.drawerMenu();
<code>return Drawer( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ this._buildUserAccountProfileHeader(), this._buildDrawerBody() ]), );</code>
}
_buildUserAccountProfileHeader() => Expanded(
flex: 1,
child: ClipPath(
clipper: DashboardCustomClipper(),
child: Container(
color: Colors.orange,
padding: EdgeInsets.only(top: 35.0, left: 20.0),
child: Column(
children: [
Align(
alignment: Alignment.topLeft,
child: CircleAvatar(
radius: 30.0,
backgroundColor: Colors.transparent,
//backgroundImage: AssetImage(UIData.imageProfile),
),
),
Container(
margin: EdgeInsets.all(5),
),
Align(
alignment: Alignment.topLeft,
child: Text(
'FlutterTutorial',
style: new TextStyle(fontSize: 20.0, color: Colors.white),
),
),
Align(
alignment: Alignment.topLeft,
child: Text('email'.toLowerCase(),
style:
new TextStyle(fontSize: 14.0, color: Colors.white)),
),
],
),
),
),
);
Expanded _buildDrawerBody() => Expanded(
flex: 2,
child: ListView.builder(
padding: EdgeInsets.only(top: 1.0),
physics: BouncingScrollPhysics(),
itemCount: this.drawerMenuList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
switch (index) {
case 0:
Navigator.of(context).pop();
break;
<code> case 1: Navigator.of(context).pop(); break; case 2: Navigator.of(context).pop(); break; case 3: Navigator.of(context).pop(); break; case 4: Navigator.of(context).pop(); break; } }, child: ListTile( leading: Icon(this.drawerMenuList[index]['icon'], color: Color(0xFFFFB74D)), title: Text(this.drawerMenuList[index]['title'], style: TextStyle( fontWeight: FontWeight.w700, fontSize: 18.0, color: Colors.black87)))); }));</code>
List> drawerMenu() {
List> menus = [
{'title': 'Home', 'icon': Icons.home},
{'title': 'My Order', 'icon': Icons.add_shopping_cart},
{'title': 'Favourite', 'icon': Icons.favorite},
{'title': 'Profile', 'icon': Icons.person_outline},
{'title': 'Logout', 'icon': Icons.vpn_key},
];
return menus;
}
}
class DashboardCustomClipper extends CustomClipper {
final Path path = new Path();
@override
Path getClip(Size size) {
this.path.lineTo(0.0, size.height - 50);
this.path.lineTo(size.width, size.height);
this.path.lineTo(size.width, 0.0);
this.path.close();
<code>return this.path;</code>
}
@override
bool shouldReclip(CustomClipper oldClipper) => false;
}
9.login_page.dart
Screenshot :
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'background_clipper.dart';
import 'common_scaffold.dart';
import 'custom_float_form.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State {
final GlobalKey _key = new GlobalKey();
final TextEditingController _mobileController = new TextEditingController();
final TextEditingController _passwordController = new TextEditingController();
bool _validate = false;
bool visible = true;
String mobile, password;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return CommonScaffold(
appTitle: 'Flutter Tutorial',
bodyData: Form(key: _key, autovalidate: _validate, child: loginBody(context)),
showDrawer: true,
centerDocked: false,
showFAB: false,
showBottomNav: false);
}
loginBody(BuildContext context) => ListView(
physics: BouncingScrollPhysics(),
children: [loginHeader(), formUI()],
);
@override
void dispose() {
if (this.mounted) super.dispose();
_mobileController.dispose();
_passwordController.dispose();
}
loginHeader() => Column(
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
height: 60.0,
),
Text(
'Sign in to continue',
style: TextStyle(color: Colors.grey, fontSize: 18.0),
),
SizedBox(
height: 20.0,
),
],
);
formUI() {
return new Container(
child: Stack(
children: [
ClipPath(
clipper: BackgroundClipper(),
child: Container(
height: 400,
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(40.0)),
color: Colors.white,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 90.0,
),
_showMobileInput(),
_showPasswordInput(),
new SizedBox(height: 10.0),
//_showForgotPasswordButton(),
//SizedBox(height: 10.0),
],
),
),
),
_showFormIcon(false),
_showLoginPressIcon(),
],
),
);
}
_showMobileInput() {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 30.0),
child: new TextFormField(
controller: _mobileController,
decoration: new InputDecoration(
hintText: 'Mobile',
labelText: 'Mobile',
),
keyboardType: TextInputType.phone,
onSaved: (str) {
mobile = str;
}),
);
}
_showPasswordInput() {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 30.0),
child: TextFormField(
controller: _passwordController,
obscureText: visible,
decoration: InputDecoration(
hintText: 'Password',
labelText: 'Password',
suffix: InkWell(
child: Icon(
visible ? Icons.visibility_off : Icons.visibility,
),
onTap: () {
setState(() {
visible = !visible;
});
},
)),
onSaved: (str) {
password = str;
}),
);
}
_showForgotPasswordButton() {
return Row(mainAxisAlignment: MainAxisAlignment.end, children: [
GestureDetector(
onTap: () {
<code> }, child: new Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Container( padding: EdgeInsets.only(right: 27.0), child: FlatButton( child: new Text('Forgot Password', style: TextStyle( color: Colors.orange, fontSize: 15.0, fontWeight: FontWeight.bold)), onPressed: () { }, )) ], ), ) ]);</code>
}
_showFormIcon(bool changeColor) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
radius: 30.0,
backgroundColor: changeColor
? Colors.white.withOpacity(0.2)
: Colors.grey.withOpacity(0.2),
child: Icon(Icons.person, color: Colors.black),
),
],
);
}
/<em>_clearData() { _mobileController.text = ""; _passwordController.text = ""; }</em>/
_showLoginPressIcon() {
return Container(
height: 430,
child: Align(
alignment: Alignment.bottomCenter,
child: CustomFloatForm(
icon: Icons.navigate_next,
isMini: false,
qrCallback: () {
_sendToServer();
})));
}
_sendToServer() {
if (_key.currentState.validate()) {
_key.currentState.save();
} else {
setState(() {
_validate = true;
});
}
}
signUp() => Padding(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Text("You don't have account?",
style: TextStyle(color: Colors.grey)),
new FlatButton(
child: new Text('Sign Up',
style: TextStyle(
color: Colors.orange,
//decoration: TextDecoration.underline,
fontSize: 15.0,
fontWeight: FontWeight.bold)),
onPressed: () {},
),
],
),
);
}
