Skip to content

Instantly share code, notes, and snippets.

@mkiisoft
Last active April 11, 2020 19:57
Show Gist options
  • Save mkiisoft/570c8e1a485d642f0a4aee7f83b73a09 to your computer and use it in GitHub Desktop.
Save mkiisoft/570c8e1a485d642f0a4aee7f83b73a09 to your computer and use it in GitHub Desktop.
Contact Us design mimic UpLabs by Mariano Zorrilla
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ContactScreen()
);
}
}
class ContactScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF66B1BF),
Color(0xFF345A7E),
],
),
),
child: Center(
child: FittedBox(
child: Container(
height: 500,
width: 300,
child: Card(
elevation: 40,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Stack(
fit: StackFit.expand,
children: [
Column(
mainAxisSize: MainAxisSize.max,
children: [
Flexible(
flex: 6,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF25466C),
Color(0xFF5B8AA8),
],
),
),
),
),
Flexible(
flex: 4,
child: SizedBox(),
)
],
),
Column(
mainAxisSize: MainAxisSize.max,
children: [
Flexible(
flex: 4,
child: Container(),
),
Flexible(
flex: 6,
child: ClipPath(
clipper: CustomClipPath(),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF284C61), Color(0xFF2A5067)],
),
),
),
),
)
],
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: TextField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: 'Name',
contentPadding: const EdgeInsets.only(bottom: -15),
hintStyle: TextStyle(color: Colors.white54, fontSize: 14),
enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white54))),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: TextField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: 'E-Mail',
contentPadding: const EdgeInsets.only(bottom: -15),
hintStyle: TextStyle(color: Colors.white54, fontSize: 14),
enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white54))),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: TextField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: 'Message',
contentPadding: const EdgeInsets.only(bottom: -15),
hintStyle: TextStyle(color: Colors.white54, fontSize: 14),
enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white54))),
),
),
SizedBox(height: 45),
Container(
height: 50,
decoration: BoxDecoration(color: Color(0xFF70CCDD)),
child: Center(
child: Text(
'Send Message',
style: TextStyle(fontFamily: 'Sans', fontSize: 18, color: Colors.white54),
),
),
)
],
),
),
Align(
alignment: Alignment(0, -0.7),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Text(
'CONTACT US',
style: TextStyle(
fontFamily: 'Sans',
fontSize: 22,
color: Colors.white54,
shadows: [
Shadow(
offset: Offset(0, 0),
blurRadius: 2,
color: Color.fromARGB(100, 255, 255, 255),
),
Shadow(
offset: Offset(0, 0),
blurRadius: 2,
color: Color.fromARGB(50, 255, 255, 255),
),
],
),
),
),
),
_star(Alignment(-0.5, -0.85), 6),
_star(Alignment(0.7, -0.82), 4),
_star(Alignment(0.8, -0.55), 6),
_star(Alignment(-0.7, -0.40), 4),
Align(
alignment: Alignment(-0.1, -0.2),
child: Image.network('https://firebasestorage.googleapis.com/v0/b/flutter-yeti.appspot.com/o/satelite.png?alt=media', width: 80),
),
],
),
),
),
),
),
),
);
}
Widget _star(Alignment alignment, double size) {
return Align(
alignment: alignment,
child: Container(
width: size,
height: size,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(size / 2),
boxShadow: [BoxShadow(color: Color(0xCCFFFFFF), blurRadius: 40, spreadRadius: 2)]),
),
);
}
}
class CustomClipPath extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.lineTo(0, 30);
path.quadraticBezierTo(size.width / 2, 0, size.width, 30);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment