Authentication welcome page using flutter

• admin
• 0
• on Sep 17, 2022

This article we will show you how to create authentication welcome page with flutter for user decide to create account or use app as guest.

Source Code

1. AuthPage2.dart

import 'package:flutter/material.dart';
import 'dart:ui';
class AuthPage2 extends StatelessWidget {
  const AuthPage2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: NetworkImage("https://cdn.britannica.com/24/77424-050-4FF80B58/Angkor-Wat-Cambodia.jpg"), fit: BoxFit.cover)),
        child: Stack(
          children:[
            Center(
              child: Container(
                margin: const EdgeInsets.all(48.0),
                padding: const EdgeInsets.symmetric(
                    horizontal: 24.0, vertical: 48.0),
                decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.9),
                    borderRadius: BorderRadius.circular(10.0)),
                child: BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: 0.5,
                    sigmaY: 1.0,
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children:[
                      CircleAvatar(
                        radius: 55,
                        backgroundImage: NetworkImage('https://us.123rf.com/450wm/krustovin/krustovin1701/krustovin170100013/69671987-travel-direction-compass-airplane-and-globe-concept-travel-and-world-trip-logo-flat-compass-with-air.jpg?ver=6'),
                      ),
                      const SizedBox(height: 10.0),
                      Text(
                        "CAMTRAVEL",
                        style: TextStyle(
                            color: Colors.deepOrange.shade700,
                            fontSize: 24.0,
                            fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(height: 10.0),
                      const Text(
                          "Cambodia Kingdom of Wonder",
                          textAlign: TextAlign.center,
                          style: TextStyle(fontSize: 15.0)),
                      const SizedBox(height: 20.0),
                      SizedBox(
                        width: double.infinity,
                        child: MaterialButton(
                          height: 45,
                          elevation: 0,
                          highlightElevation: 0,
                          color: Colors.white,
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20.0)),
                          child: Text("Create Account"),
                          onPressed: () {},
                        ),
                      ),
                      SizedBox(height: 10,),
                      SizedBox(
                        width: double.infinity,
                        child: MaterialButton(
                          height: 45,
                          elevation: 0,
                          highlightElevation: 0,
                          color: Colors.white.withOpacity(0.4),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20.0)),
                          child: Text("Guest"),
                          onPressed: () {},
                        ),
                      ),
                      const SizedBox(height: 30.0),
                      Text.rich(TextSpan(children: [
                        TextSpan(text: "Already have account? "),
                        WidgetSpan(
                            child: InkWell(
                              onTap: () {
                                print("Login tapped");
                              },
                              child: Text("Log in",
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                  )),
                            ))
                      ])),
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}