Welcome, Login, Signup Page – Flutter UI – Speed Code. Copy and paste the below code as per your requirements.
src/login/bottom/bezierContainer.dart
import 'dart:math';
import 'package:flutter/material.dart';
import 'customClipper.dart';
class BezierContainerBottom extends StatelessWidget {
const BezierContainerBottom({Key ?key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Transform.rotate(
angle: -pi/0.7,
child: ClipPath(
clipper: ClipPainter(),
child: Container(
height: MediaQuery.of(context).size.height *.5,
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomRight,
colors: [Colors.blueAccent,Colors.black87]
)
),
),
),
);
}
}src/login/bottom/customClipper.dart
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
class ClipPainter extends CustomClipper<Path>{
@override
Path getClip(Size size) {
var height = size.height;
var width = size.width;
var path = Path();
path.lineTo(0, size.height );
path.lineTo(size.width , height);
path.lineTo(size.width , 0);
var secondControlPoint = const Offset(0 ,0);
var secondEndPoint = Offset(width * .4 , height *.5);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
var fifthControlPoint = Offset(width * .3 ,height * .5);
var fiftEndPoint = Offset( width * .23, height *.6);
path.quadraticBezierTo(fifthControlPoint.dx, fifthControlPoint.dy, fiftEndPoint.dx, fiftEndPoint.dy);
var thirdControlPoint = Offset(0 ,height);
var thirdEndPoint = Offset(width , height );
path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy, thirdEndPoint.dx, thirdEndPoint.dy);
path.lineTo(0, size.height );
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}src/login/top/bezierContainer.dart
import 'dart:math';
import 'package:flutter/material.dart';
import 'customClipper.dart';
class BezierContainer extends StatelessWidget {
const BezierContainer({Key ?key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Transform.rotate(
angle: -pi / 2.4,
child: ClipPath(
clipper: ClipPainter(),
child: Container(
height: MediaQuery.of(context).size.height *.5,
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomRight,
colors: [Colors.purpleAccent,Colors.deepOrange]
)
),
),
),
);
}
}src/login/top/bezierContainerLeft.dart
import 'dart:math';
import 'package:example/src/login/top/customClipperLeft.dart';
import 'package:flutter/material.dart';
class BezierContainerLeft extends StatelessWidget {
const BezierContainerLeft({Key ?key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Transform.rotate(
angle: -pi / 2.1,
child: ClipPath(
clipper: ClipPainterLeft(),
child: Container(
height: MediaQuery.of(context).size.height *.5,
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomRight,
colors: [Colors.purple,Colors.tealAccent]
)
),
),
),
);
}
}src/login/top/customClipper.dart
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
class ClipPainter extends CustomClipper<Path>{
@override
Path getClip(Size size) {
var height = size.height;
var width = size.width;
var path = new Path();
path.lineTo(0, size.height );
path.lineTo(size.width , height);
path.lineTo(size.width , 0);
var secondControlPoint = const Offset(0 ,0);
var secondEndPoint = Offset(width * .4 , height *.5);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
var fifthControlPoint = Offset(width * .3 ,height * .5);
var fiftEndPoint = Offset( width * .23, height *.6);
path.quadraticBezierTo(fifthControlPoint.dx, fifthControlPoint.dy, fiftEndPoint.dx, fiftEndPoint.dy);
var thirdControlPoint = Offset(0 ,height);
var thirdEndPoint = Offset(width , height );
path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy, thirdEndPoint.dx, thirdEndPoint.dy);
path.lineTo(0, size.height );
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}src/login/top/customClipperLeft.dart
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
class ClipPainterLeft extends CustomClipper<Path>{
@override
Path getClip(Size size) {
var height = size.height;
var width = size.width;
var path = Path();
path.lineTo(0, size.height );
path.lineTo(size.width , height);
path.lineTo(size.width , 0);
var secondControlPoint = Offset(0 ,0);
var secondEndPoint = Offset(width * .4 , height *.4);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
var fifthControlPoint = Offset(width * .4 ,height * .2);
var fiftEndPoint = Offset( width * .80, height *.20);
path.quadraticBezierTo(fifthControlPoint.dx, fifthControlPoint.dy, fiftEndPoint.dx, fiftEndPoint.dy);
var thirdControlPoint = Offset(0 ,height);
var thirdEndPoint = Offset(width , height );
path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy, thirdEndPoint.dx, thirdEndPoint.dy);
path.lineTo(0, size.height );
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}src/signup/bottom/bezierContainer.dart
import 'dart:math';
import 'package:flutter/material.dart';
import 'customClipper.dart';
class BezierContainerBottom extends StatelessWidget {
const BezierContainerBottom({Key ?key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Transform.rotate(
angle: -pi/0.7,
child: ClipPath(
clipper: ClipPainter(),
child: Container(
height: MediaQuery.of(context).size.height *.5,
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomRight,
end: Alignment.topRight,
colors: [Colors.teal,Colors.greenAccent]
)
),
),
),
);
}
}
src/signup/bottom/customClipper.dart
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
class ClipPainter extends CustomClipper<Path>{
@override
Path getClip(Size size) {
var height = size.height;
var width = size.width;
var path = Path();
path.lineTo(0, size.height );
path.lineTo(size.width , height);
path.lineTo(size.width , 0);
var secondControlPoint = const Offset(0 ,0);
var secondEndPoint = Offset(width * .4 , height *.5);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
var fifthControlPoint = Offset(width * .3 ,height * .5);
var fiftEndPoint = Offset( width * .23, height *.6);
path.quadraticBezierTo(fifthControlPoint.dx, fifthControlPoint.dy, fiftEndPoint.dx, fiftEndPoint.dy);
var thirdControlPoint = Offset(0 ,height);
var thirdEndPoint = Offset(width , height );
path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy, thirdEndPoint.dx, thirdEndPoint.dy);
path.lineTo(0, size.height );
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}src/signup/top/bezierContainer.dart
import 'dart:math';
import 'package:flutter/material.dart';
import 'customClipper.dart';
class BezierContainer extends StatelessWidget {
const BezierContainer({Key ?key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Transform.rotate(
angle: -pi / 2.4,
child: ClipPath(
clipper: ClipPainter(),
child: Container(
height: MediaQuery.of(context).size.height *.5,
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomRight,
colors: [Colors.amber,Colors.pinkAccent]
)
),
),
),
);
}
}
src/signup/top/bezierContainerLeft.dart
import 'dart:math';
import 'package:example/src/login/top/customClipperLeft.dart';
import 'package:flutter/material.dart';
class BezierContainerLeft extends StatelessWidget {
const BezierContainerLeft({Key ?key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Transform.rotate(
angle: -pi / 2.1,
child: ClipPath(
clipper: ClipPainterLeft(),
child: Container(
height: MediaQuery.of(context).size.height *.5,
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomRight,
colors: [Colors.black87,Colors.lightBlue]
)
),
),
),
);
}
}src/signup/top/customClipper.dart
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
class ClipPainter extends CustomClipper<Path>{
@override
Path getClip(Size size) {
var height = size.height;
var width = size.width;
var path = Path();
path.lineTo(0, size.height );
path.lineTo(size.width , height);
path.lineTo(size.width , 0);
var secondControlPoint = const Offset(0 ,0);
var secondEndPoint = Offset(width * .4 , height *.5);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
var fifthControlPoint = Offset(width * .3 ,height * .5);
var fiftEndPoint = Offset( width * .23, height *.6);
path.quadraticBezierTo(fifthControlPoint.dx, fifthControlPoint.dy, fiftEndPoint.dx, fiftEndPoint.dy);
var thirdControlPoint = Offset(0 ,height);
var thirdEndPoint = Offset(width , height );
path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy, thirdEndPoint.dx, thirdEndPoint.dy);
path.lineTo(0, size.height );
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}src/signup/top/customClipperLeft.dart
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
class ClipPainterLeft extends CustomClipper<Path>{
@override
Path getClip(Size size) {
var height = size.height;
var width = size.width;
var path = Path();
path.lineTo(0, size.height );
path.lineTo(size.width , height);
path.lineTo(size.width , 0);
var secondControlPoint = const Offset(0 ,0);
var secondEndPoint = Offset(width * .4 , height *.4);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
var fifthControlPoint = Offset(width * .4 ,height * .2);
var fiftEndPoint = Offset( width * .80, height *.20);
path.quadraticBezierTo(fifthControlPoint.dx, fifthControlPoint.dy, fiftEndPoint.dx, fiftEndPoint.dy);
var thirdControlPoint = Offset(0 ,height);
var thirdEndPoint = Offset(width , height );
path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy, thirdEndPoint.dx, thirdEndPoint.dy);
path.lineTo(0, size.height );
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}src/loginPage.dart
import 'package:example/src/login/top/bezierContainerLeft.dart';
import 'package:flutter/material.dart';
import 'package:example/src/signup.dart';
import 'login/bottom/bezierContainer.dart';
import 'login/top/bezierContainer.dart';
class LoginPage extends StatefulWidget {
const LoginPage({Key? key, this.title}) : super(key: key);
final String? title;
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
Widget _backButton() {
return InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: <Widget>[
Container(
padding: const EdgeInsets.only(left: 0, top: 10, bottom: 10),
child: const Icon(Icons.keyboard_arrow_left, color: Colors.black),
),
const Text('Back',
style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500))
],
),
),
);
}
Widget _entryField(String title, {bool isPassword = false}) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
const SizedBox(
height: 10,
),
TextField(
obscureText: isPassword,
decoration: const InputDecoration(
border: InputBorder.none,
fillColor: Color(0xfff3f3f4),
filled: true))
],
),
);
}
Widget _submitButton() {
return Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: const Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: const LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.pink, Colors.deepPurpleAccent])),
child: const Text(
'Login',
style: TextStyle(fontSize: 20, color: Colors.white),
),
);
}
Widget _divider() {
return Container(
margin: const EdgeInsets.symmetric(vertical: 10),
child: Row(
children: const <Widget>[
SizedBox(
width: 20,
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Divider(
thickness: 1,
),
),
),
Text('or'),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Divider(
thickness: 1,
),
),
),
SizedBox(
width: 20,
),
],
),
);
}
Widget _createAccountLabel() {
return InkWell(
onTap: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => SignUpPage()));
},
child: Container(
margin: const EdgeInsets.symmetric(vertical: 20),
padding: const EdgeInsets.all(15),
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
'Don\'t have an account ?',
style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
),
SizedBox(
width: 10,
),
Text(
'Register',
style: TextStyle(
color: Color(0xfff79c4f),
fontSize: 13,
fontWeight: FontWeight.w600),
),
],
),
),
);
}
Widget _title() {
return RichText(
textAlign: TextAlign.center,
text: const TextSpan(
text: 'L',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w700,
color: Color(0xffe46b10)),
children: [
TextSpan(
text: 'og',
style: TextStyle(color: Colors.black, fontSize: 30),
),
TextSpan(
text: 'in',
style: TextStyle(color: Color(0xffe46b10), fontSize: 30),
),
]),
);
}
Widget _emailPasswordWidget() {
return Column(
children: <Widget>[
_entryField("Email id"),
_entryField("Password", isPassword: true),
],
);
}
@override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
return Scaffold(
body: SizedBox(
height: height,
child: Stack(
children: <Widget>[
Positioned(
top: -height * .15,
right: -MediaQuery.of(context).size.width * .25,
child: const BezierContainer()),
Positioned(
top: -height * .05,
right: -MediaQuery.of(context).size.width * -.6,
child: const BezierContainerLeft()),
Positioned(
top: height * 0.7,
right: -MediaQuery.of(context).size.width * -.4,
child: const BezierContainerBottom()),
Positioned(
top: -height * .05,
right: -MediaQuery.of(context).size.width * -.6,
child: const BezierContainerLeft()),
Container(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: height * .2),
_title(),
const SizedBox(height: 50),
_emailPasswordWidget(),
const SizedBox(height: 20),
_submitButton(),
Container(
padding: const EdgeInsets.symmetric(vertical: 10),
alignment: Alignment.centerRight,
child: const Text('Forgot Password ?',
style: TextStyle(
fontSize: 14, fontWeight: FontWeight.w500)),
),
_divider(),
SizedBox(height: height * .055),
_createAccountLabel(),
],
),
),
),
Positioned(top: 40, left: 0, child: _backButton()),
],
),
));
}
}src/signup.dart
import 'package:example/src/signup/bottom/bezierContainer.dart';
import 'package:flutter/material.dart';
import 'package:example/src/signup/top/bezierContainer.dart';
import 'package:example/src/loginPage.dart';
import 'signup/top/bezierContainerLeft.dart';
class SignUpPage extends StatefulWidget {
const SignUpPage({Key ?key, this.title}) : super(key: key);
final String? title;
@override
_SignUpPageState createState() => _SignUpPageState();
}
class _SignUpPageState extends State<SignUpPage> {
Widget _backButton() {
return InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: <Widget>[
Container(
padding: const EdgeInsets.only(left: 0, top: 10, bottom: 10),
child: const Icon(Icons.keyboard_arrow_left, color: Colors.black),
),
const Text('Back',
style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500))
],
),
),
);
}
Widget _entryField(String title, {bool isPassword = false}) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
const SizedBox(
height: 10,
),
TextField(
obscureText: isPassword,
decoration: const InputDecoration(
border: InputBorder.none,
fillColor: Color(0xfff3f3f4),
filled: true))
],
),
);
}
Widget _submitButton() {
return Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: const Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: const LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.deepPurpleAccent, Colors.pink])),
child: const Text(
'Register Now',
style: TextStyle(fontSize: 20, color: Colors.white),
),
);
}
Widget _loginAccountLabel() {
return InkWell(
onTap: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => const LoginPage()));
},
child: Container(
margin: const EdgeInsets.symmetric(vertical: 20),
padding: const EdgeInsets.all(15),
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const<Widget>[
Text(
'Already have an account ?',
style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
),
SizedBox(
width: 10,
),
Text(
'Login',
style: TextStyle(
color: Color(0xfff79c4f),
fontSize: 13,
fontWeight: FontWeight.w600),
),
],
),
),
);
}
Widget _title() {
return RichText(
textAlign: TextAlign.center,
text: const TextSpan(
text: 'S',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w700,
color: Color(0xffe46b10)
),
children: [
TextSpan(
text: 'ig',
style: TextStyle(color: Colors.black, fontSize: 30),
),
TextSpan(
text: 'n Up',
style: TextStyle(color: Color(0xffe46b10), fontSize: 30),
),
]),
);
}
Widget _emailPasswordWidget() {
return Column(
children: <Widget>[
_entryField("Username"),
_entryField("Email id"),
_entryField("Password", isPassword: true),
],
);
}
@override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
return Scaffold(
body: SizedBox(
height: height,
child: Stack(
children: <Widget>[
Positioned(
top: -height * .15,
right: -MediaQuery.of(context).size.width * .25,
child: const BezierContainer()),
Positioned(
top: -height * .05,
right: -MediaQuery.of(context).size.width * -.6,
child: const BezierContainerLeft()),
Positioned(
top: height * 0.7,
right: -MediaQuery.of(context).size.width * -.4,
child: const BezierContainerBottom()),
Positioned(
top: -height * .05,
right: -MediaQuery.of(context).size.width * -.6,
child: const BezierContainerLeft()),
Container(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: height * .2),
_title(),
const SizedBox(
height: 50,
),
_emailPasswordWidget(),
const SizedBox(
height: 20,
),
_submitButton(),
SizedBox(height: height * .14),
_loginAccountLabel(),
],
),
),
),
Positioned(top: 40, left: 0, child: _backButton()),
],
),
),
);
}
}src/welcomePage.dart
import 'package:flutter/material.dart';
import 'package:example/src/loginPage.dart';
import 'package:example/src/signup.dart';
import 'package:google_fonts/google_fonts.dart';
class WelcomePage extends StatefulWidget {
const WelcomePage({Key? key, this.title}) : super(key: key);
final String? title;
@override
_WelcomePageState createState() => _WelcomePageState();
}
class _WelcomePageState extends State<WelcomePage> {
Widget _submitButton() {
return InkWell(
onTap: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => const LoginPage()));
},
child: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 13),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: const Color(0xffdf8e33).withAlpha(100),
offset: const Offset(2, 4),
blurRadius: 8,
spreadRadius: 2)
],
color: Colors.white),
child: const Text(
'Login',
style: TextStyle(fontSize: 20, color: Color(0xfff7892b)),
),
),
);
}
Widget _signUpButton() {
return InkWell(
onTap: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => const SignUpPage()));
},
child: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 13),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(5)),
border: Border.all(color: Colors.white, width: 2),
),
child: const Text(
'Register now',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
);
}
Widget _title() {
return RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'W',
style: GoogleFonts.portLligatSans(
textStyle: Theme.of(context).textTheme.headline1,
fontSize: 30,
fontWeight: FontWeight.w700,
color: Colors.white,
),
children: const [
TextSpan(
text: 'el',
style: TextStyle(color: Colors.black, fontSize: 30),
),
TextSpan(
text: 'come',
style: TextStyle(color: Colors.white, fontSize: 30),
),
]),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.bottomRight,
colors: [Colors.cyanAccent, Colors.yellowAccent])),
child: SingleChildScrollView(
child:Container(
padding: const EdgeInsets.symmetric(horizontal: 20),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: const Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.cyan, Colors.teal])),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_title(),
const SizedBox(
height: 80,
),
_submitButton(),
const SizedBox(
height: 20,
),
_signUpButton(),
const SizedBox(
height: 20,
),
],
),
),
),
)
);
}
}main.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'src/welcomePage.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme:GoogleFonts.latoTextTheme(textTheme).copyWith(
bodyText1: GoogleFonts.montserrat(textStyle: textTheme.bodyText1),
),
),
debugShowCheckedModeBanner: false,
home: const WelcomePage(),
);
}
}