Authentication page ui using flutter

• admin
• 0
• on Sep 17, 2022

How to design authentication page using flutter step by step with source code.

Source Code

1. AuthPage1.dart

import 'package:flutter/material.dart';

class AuthPage1 extends StatelessWidget {
  const AuthPage1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: NetworkImage('https://media.istockphoto.com/photos/modern-blue-coupe-sports-car-in-showroom-picture-id1167559642?k=20&m=1167559642&s=612x612&w=0&h=A2sKCj6WPOaTEavT6M0DSclBe-ZRjd4TdkyivYn75cI='),
              fit: BoxFit.cover,
            ),
          ),
          child: Stack(
            children:[
              Container(
                color: Colors.black.withOpacity(0.7),
                child: Column(
                  children:[
                    const SizedBox(height: kToolbarHeight + 40),
                    Expanded(
                      child: Column(
                        children:const[
                          CircleAvatar(
                            radius: 62,
                            backgroundColor: Colors.red,
                            child: CircleAvatar(
                              radius: 60,
                              backgroundImage: NetworkImage('https://content.wepik.com/statics/12884221/preview-page0.jpg'),
                            ),
                          ),
                          SizedBox(height: 20,),
                          Text(
                            "Welcome",
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.w600,
                              fontSize: 32.0,
                            ),
                          ),
                          const SizedBox(height: 10.0),
                          Text(
                            "The best car dealer over the world\n your dream come true",
                            style: TextStyle(
                              color: Colors.white60,
                              fontSize: 18.0,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(height: 10.0),
                    Padding(
                      padding:EdgeInsets.symmetric(horizontal: 20),
                      child: Row(
                        children:[
                          const SizedBox(width: 10.0),
                          Expanded(
                            child: MaterialButton(
                              height: 45,
                              color: Colors.orange,
                              textColor: Colors.white,
                              elevation: 0,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(20.0),
                              ),
                              child: const Text("Login"),
                              onPressed: () {
                              },
                            ),
                          ),
                          const SizedBox(width: 10.0),
                          Expanded(
                            child: MaterialButton(
                              height: 45,
                              color: Colors.red,
                              textColor: Colors.white,
                              elevation: 0,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(20.0),
                              ),
                              child: Text("Signup"),
                              onPressed: () {
                              },
                            ),
                          ),
                          const SizedBox(width: 10.0),
                        ],
                      ),
                    ),
                    const SizedBox(height: 40.0),
                    const Text("www.cardealerkh.com",style: TextStyle(color: Colors.white),),
                    const SizedBox(height: 40.0),
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}