Contact Us design mimic UpLabs by Mariano Zorrilla

contact.dart

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;
}