Categories:
Flutter #113: Welcome! Login, Signup Page - Flutter UI - Speed Code

Welcome! Login, Signup Page – Flutter UI – Speed Code. Copy and paste the below code as per your requirements.

main.dart

import 'package:flutter/material.dart';
import 'package:example/screens/login_screen/login_screen.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login & Signup',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:const LoginScreen(),
    );
  }
}

constants/constants.dart

import 'package:flutter/material.dart';

//colours used in this app

const Color white = Colors.blueGrey;
const Color black = Colors.black;

//default app padding

const double appPadding = 30.0;

screens/login_screen/login_screen.dart

import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';
import 'package:example/screens/login_screen/components/background_design.dart';
import 'package:example/screens/login_screen/components/bottom_container.dart';
import 'package:example/screens/login_screen/components/login_credentials.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    Size size = MediaQuery.of(context).size;

    return Scaffold(
      backgroundColor: white,
      body: SingleChildScrollView(
        child: SizedBox(
          width: size.width,
          height: size.height,
          child: Stack(
            children: const [
              BackgroundDesign(),
              LoginCredentials(),
              BottomContainer(),
            ],
          ),
        ),
      ),
    );
  }
}

screens/login_screen/components/background_design.dart

import 'package:clay_containers/clay_containers.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';

class BackgroundDesign extends StatelessWidget {
  const BackgroundDesign({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    Size size = MediaQuery.of(context).size;

    return Stack(
      children: [
        Container(
          color: white,
          height: size.height * 0.4,
          child: Stack(
            children: [
              Positioned(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    ClayContainer(
                      color: Colors.teal,
                      width: 220,
                      height: 220,
                      borderRadius: 200,
                      depth: -50,
                      curveType: CurveType.convex,
                    ),
                    ClayContainer(
                      color: Colors.red,
                      width: 180,
                      height: 180,
                      borderRadius: 200,
                      depth: 50,
                    ),
                    ClayContainer(
                      color: Colors.blue,
                      width: 140,
                      height: 140,
                      borderRadius: 200,
                      depth: -50,
                      curveType: CurveType.convex,
                    ),
                    ClayContainer(
                      color: Colors.amberAccent,
                      width: 100,
                      height: 100,
                      borderRadius: 200,
                      depth: 50,
                    ),
                  ],
                ),
                right: 0,
                top: -size.height * 0.05,
              )
            ],
          ),
        ),
         SizedBox(
           height: size.height * 0.4,
           child: Stack(
             children: [
               Positioned(
                 child: Stack(
                   alignment: Alignment.center,
                   children: [
                     ClayContainer(
                       color: Colors.deepPurple,
                       width: 160,
                       height: 160,
                       borderRadius: 200,
                       depth: 50,
                       curveType: CurveType.convex,
                     ),
                     ClayContainer(
                       color: Colors.teal,
                       width: 140,
                       height: 140,
                       borderRadius: 200,
                       depth: -50,
                       curveType: CurveType.convex,
                     ),
                     ClayContainer(
                       color: Colors.indigo,
                       width: 70,
                       height: 70,
                       borderRadius: 200,
                       depth: 50,
                     ),
                   ],
                 ),
                 left: -size.width * 0.05,
                 bottom: size.height * 0.1,
               )
             ],
           ),
         ),
        SizedBox(
          height: size.height * 0.4,
          child: Stack(
            children: [
              Positioned(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    ClayContainer(
                      color: Colors.indigo,
                      width: 100,
                      height: 100,
                      borderRadius: 200,
                      depth: 50,
                      curveType: CurveType.convex,
                    ),
                    ClayContainer(
                      color: Colors.deepPurple,
                      width: 80,
                      height: 80,
                      borderRadius: 200,
                      depth: -50,
                      curveType: CurveType.convex,
                    )
                  ],
                ),
                left: size.width * 0.52,
                bottom: 10,
              )
            ],
          ),
        )
      ],
    );
  }
}

screens/login_screen/components/bottom_container.dart

import 'package:clay_containers/clay_containers.dart';
import 'package:example/screens/signup_screen/signup_screen.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';

class BottomContainer extends StatelessWidget {
  const BottomContainer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: ClayContainer(
        color: Colors.indigo,
        height: size.height * 0.3,
        depth: 60,
        spread: 20,
        customBorderRadius: const BorderRadius.only(
          topRight: Radius.elliptical(350, 250),
          topLeft: Radius.elliptical(350, 250),
        ),
        child: Column(
          children: [
            SizedBox(height: size.height * 0.07,),
            ClayContainer(
              color: Colors.tealAccent,
              depth: 80,
              borderRadius: 30,
              curveType: CurveType.convex,
              child: const Padding(
                padding: EdgeInsets.symmetric(vertical: appPadding / 2, horizontal: appPadding * 2),
                child: Text('LogIn',style: TextStyle(
                  fontWeight: FontWeight.w800,
                  fontSize: 17
                ),),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: appPadding),
              child: GestureDetector(
                onTap: ()=> Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const SignupScreen()),
                ),
                child: const Text('SignUp',style: TextStyle(
                    color: Colors.orange,
                    fontWeight: FontWeight.w800,
                    fontSize: 17,
                    decoration: TextDecoration.underline
                ),
                ),
              )
            ),
          ],
        ),
      ),
    );
  }
}

screens/login_screen/components/login_credentials.dart

import 'package:clay_containers/clay_containers.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';

class LoginCredentials extends StatelessWidget {
  const LoginCredentials({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Positioned(
      top: size.height * 0.3,
      left: 0,
      right: 0,
      child: Padding(
        padding: const EdgeInsets.all(appPadding),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Hello',style: TextStyle(
              fontSize: 35,
              fontWeight: FontWeight.bold
            ),),
            Text('Let\'s get started',style: TextStyle(
                fontSize: 20,
                color: black.withOpacity(0.6),
                fontWeight: FontWeight.w800,
            ),),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: appPadding),
              child: ClayContainer(
                color: white,
                borderRadius: 30,
                depth: -30,
                child: const Padding(
                  padding: EdgeInsets.symmetric(horizontal: appPadding),
                  child: TextField(
                    decoration: InputDecoration(
                      hintText: 'Email',
                      border: InputBorder.none,
                      fillColor: black
                    ),
                  ),
                ),
              ),
            ),
            ClayContainer(
              color: white,
              borderRadius: 30,
              depth: -30,
              child: const Padding(
                padding: EdgeInsets.symmetric(horizontal: appPadding),
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                      hintText: 'Password',
                      border: InputBorder.none,
                      fillColor: black
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: appPadding / 2),
              child: Text('Forgot Password?',style: TextStyle(
                fontSize: 15,
                color: black.withOpacity(0.6),
                fontWeight: FontWeight.w600,
                decoration: TextDecoration.underline
              ),),
            )
          ],
        ),
      ),
    );
  }
}

screens/signup_screen/signup_screen.dart

import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';
import 'package:example/screens/signup_screen/components/background_design.dart';
import 'package:example/screens/signup_screen/components/bottom_container.dart';
import 'package:example/screens/signup_screen/components/signup_credentials.dart';

class SignupScreen extends StatelessWidget {
  const SignupScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    Size size = MediaQuery.of(context).size;

    return Scaffold(
      backgroundColor: white,
      body: SingleChildScrollView(
        child: Container(
          width: size.width,
          height: size.height,
          child: Stack(
            children: const [
              BackgroundDesign(),
              SignupCredentials(),
              BottomContainer(),
            ],
          ),
        ),
      ),
    );
  }
}


screens/signup_screen/components/background_design.dart

import 'package:clay_containers/clay_containers.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';

class BackgroundDesign extends StatelessWidget {
  const BackgroundDesign({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    Size size = MediaQuery.of(context).size;

    return Stack(
      children: [
        Container(
          color: white,
          height: size.height * 0.4,
          child: Stack(
            children: [
              Positioned(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    ClayContainer(
                      color: Colors.indigo,
                      width: 220,
                      height: 220,
                      borderRadius: 200,
                      depth: -50,
                      curveType: CurveType.convex,
                    ),
                    ClayContainer(
                      color: Colors.purpleAccent,
                      width: 180,
                      height: 180,
                      borderRadius: 200,
                      depth: 50,
                    ),
                    ClayContainer(
                      color: Colors.orange,
                      width: 140,
                      height: 140,
                      borderRadius: 200,
                      depth: -50,
                      curveType: CurveType.convex,
                    ),
                    ClayContainer(
                      color: Colors.brown,
                      width: 100,
                      height: 100,
                      borderRadius: 200,
                      depth: 50,
                    ),
                  ],
                ),
                right: 0,
                top: -size.height * -0.13,
              )
            ],
          ),
        ),
         SizedBox(
           height: size.height * 0.4,
           child: Stack(
             children: [
               Positioned(
                 child: Stack(
                   alignment: Alignment.center,
                   children: [
                     ClayContainer(
                       color: Colors.red,
                       width: 220,
                       height: 220,
                       borderRadius: 200,
                       depth: 50,
                       curveType: CurveType.convex,
                     ),
                     ClayContainer(
                       color: Colors.cyan,
                       width: 140,
                       height: 140,
                       borderRadius: 200,
                       depth: -50,
                       curveType: CurveType.convex,
                     ),
                     ClayContainer(
                       color: Colors.yellow,
                       width: 70,
                       height: 70,
                       borderRadius: 200,
                       depth: 50,
                     ),
                   ],
                 ),
                 left: -size.width * 0.05,
                 bottom: size.height * 0.1,
               )
             ],
           ),
         ),
      ],
    );
  }
}

screens/signup_screen/components/bottom_container.dart

import 'package:clay_containers/clay_containers.dart';
import 'package:example/screens/login_screen/login_screen.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';

class BottomContainer extends StatelessWidget {
  const BottomContainer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: ClayContainer(
        color: Colors.deepPurple,
        height: size.height * 0.3,
        depth: 60,
        spread: 20,
        customBorderRadius: const BorderRadius.only(
          topRight: Radius.elliptical(350, 250),
          topLeft: Radius.elliptical(350, 250),
        ),
        child: Column(
          children: [
            SizedBox(
              height: size.height * 0.07,
            ),
            ClayContainer(
              color: Colors.tealAccent,
              depth: 80,
              borderRadius: 30,
              curveType: CurveType.convex,
              child: const Padding(
                padding: EdgeInsets.symmetric(
                    vertical: appPadding / 2, horizontal: appPadding * 2),
                child: Text(
                  'SignUp',
                  style: TextStyle(fontWeight: FontWeight.w800, fontSize: 17),
                ),
              ),
            ),
            Padding(
                padding: const EdgeInsets.only(top: appPadding),
                child: GestureDetector(
                  onTap: () => Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const LoginScreen()),
                  ),
                  child: const Text(
                    'LogIn',
                    style: TextStyle(
                        color: Colors.orange,
                        fontWeight: FontWeight.w800,
                        fontSize: 17,
                        decoration: TextDecoration.underline),
                  ),
                )),
          ],
        ),
      ),
    );
  }
}

screens/signup_screen/components/signup_credentials.dart

import 'package:clay_containers/clay_containers.dart';
import 'package:flutter/material.dart';
import 'package:example/constants/constants.dart';

class SignupCredentials extends StatelessWidget {
  const SignupCredentials({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Positioned(
      top: size.height * 0.3,
      left: 0,
      right: 0,
      child: Padding(
        padding: const EdgeInsets.all(appPadding),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Hi',style: TextStyle(
              fontSize: 35,
              fontWeight: FontWeight.bold
            ),),
            Text('Let\'s get started',style: TextStyle(
                fontSize: 20,
                color: black.withOpacity(0.6),
                fontWeight: FontWeight.w800,
            ),),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: appPadding),
              child: ClayContainer(
                color: white,
                borderRadius: 30,
                depth: -30,
                child: const Padding(
                  padding: EdgeInsets.symmetric(horizontal: appPadding),
                  child: TextField(
                    decoration: InputDecoration(
                      hintText: 'Email',
                      border: InputBorder.none,
                      fillColor: black
                    ),
                  ),
                ),
              ),
            ),
            ClayContainer(
              color: white,
              borderRadius: 30,
              depth: -30,
              child: const Padding(
                padding: EdgeInsets.symmetric(horizontal: appPadding),
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                      hintText: 'Password',
                      border: InputBorder.none,
                      fillColor: black
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

No responses yet

Leave a Reply

Your email address will not be published.