Let’s talk about developing the mentioned flutter glassmorphism login UI in flutter app, but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into understanding step by step of achieving the mentioned beautiful login page design widget in flutter app.
Introduction
We will be covering each and every detail on how to make this glassmorphism login beautiful template. Let’s see what we have used in it.
Glassmorphism Package
We have used a glassmorphism package to get the glass container that we have used in our login page. To implement it, first import the package using the pubspec.yaml.
glassmorphism: ^3.0.0
Get the latest version and use it in the dependencies section, as shown in the image above, then run pug get to import the package in your app. Click here to check the latest version.
Login UI Steps Explanation
Background Image
Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/development.jpg')))
)As you can see, we have used scaffold, and in its body constructor, we have used a container, inside that container’s box decoration, we have specified an image. First you have to make an asset folder in your app, then paste image there and then specify the location in pubspec.yaml like shown below:
Glassmorphism Container And Top Circular Image
Align(
alignment: Alignment.topCenter,
child: Container(
height: 80,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/cartoon.jpg'))),
),
)By implementing this, we can see a circular image stacked on top of the glassmorphic container. We have used a container, then in its child constructor, we have used a stack widget. In its first child, we have use a glassmorphic container, in which we will define our email, password, forgot password, login clickable container and sign up clickable text. In the second child, we have used a container and by giving it an image, using its image decoration constructor of the box decoration class, we can see a circular image on top of our glass container. Click here to learn how to implement stack widget properly. Let’s see how the glassmorphic container is implemented:
GlassmorphicContainer( width: 350, height: 370, borderRadius: 20, blur: 5, alignment: Alignment.bottomCenter, border: 2, linearGradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Color(0xFFffffff).withOpacity(0.01), Color(0xFFFFFFFF).withOpacity(0.05), ], ), borderGradient: LinearGradient( colors: [ Color(0xFFffffff).withOpacity(0), Color((0xFFFFFFFF)).withOpacity(0), ], ),)
We have used the glassmorphic container class:
- We have given the container a height and width using its height, width constructors.
- We have used the border radius constructor to make the edges of container rounded.
- We have used blur constructor to blur the background of container, high values means more blurred background.
- For gradients, we have used the linear gradient constructor, for giving gradients to border, use the border gradient constructor. In the linear gradient class, we have used the colors constructor and given it two colors of different values.
By implementing this, we can now see a glass effect container in our screen. Let’s see how it looks now:
Email and Password Textfield
TextField( style: TextStyle( color: Colors.white.withOpacity(.8), fontSize: 14), decoration: InputDecoration( enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.white70)), prefixIcon: Icon( Icons.email, color: Colors.white.withOpacity(.8), size: 20, ), prefixIconConstraints: BoxConstraints(minWidth: 35), hintText: 'Enter your email', hintStyle: TextStyle( color: Colors.white60, fontSize: 14)), ),
We have used a column widget, inside it we have used an email and password textfield. We have also used a forgot password text below password textfield.
Sign In Container And Sign Up Text
height: 45, width: 320, alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.circular(60), border: Border.all(color: Colors.white70)), child: Text( 'Sign in', style: TextStyle( fontSize: 15, color: Colors.white.withOpacity(.8), fontWeight: FontWeight.w500), ), ))
Source Code
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:glassmorphism/glassmorphism.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: 'Flutter beautiful login ui',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/development.jpg'))),
child: Center(
child: Container(
height: 410,
child: Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: GlassmorphicContainer(
width: 350,
height: 370,
borderRadius: 20,
blur: 5,
alignment: Alignment.bottomCenter,
border: 2,
linearGradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFFffffff).withOpacity(0.01),
Color(0xFFFFFFFF).withOpacity(0.05),
],
),
borderGradient: LinearGradient(
colors: [
Color(0xFFffffff).withOpacity(0),
Color((0xFFFFFFFF)).withOpacity(0),
],
),
child: Padding(
padding: EdgeInsets.all(15).copyWith(top: 70),
child: Column(
children: [
TextField(
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 14),
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white70)),
prefixIcon: Icon(
Icons.email,
color: Colors.white.withOpacity(.8),
size: 20,
),
prefixIconConstraints:
BoxConstraints(minWidth: 35),
hintText: 'Enter your email',
hintStyle: TextStyle(
color: Colors.white60, fontSize: 14)),
),
SizedBox(height: 15),
TextField(
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 14),
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white70)),
prefixIcon: Icon(
Icons.lock,
color: Colors.white.withOpacity(.8),
size: 20,
),
prefixIconConstraints:
BoxConstraints(minWidth: 35),
suffixIcon: Icon(
Icons.visibility_off,
color: Colors.white.withOpacity(.8),
size: 20,
),
suffixIconConstraints:
BoxConstraints(minWidth: 35),
hintText: 'Enter your password',
hintStyle: TextStyle(
color: Colors.white60, fontSize: 14)),
),
SizedBox(height: 15),
Align(
alignment: Alignment.centerRight,
child: Text(
'Forgot password?',
style: TextStyle(
fontSize: 12,
color: Colors.white.withOpacity(.8),
fontWeight: FontWeight.w500),
),
),
SizedBox(
height: 30,
),
GestureDetector(onTap: () {
},
child: Container(
height: 45,
width: 320,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60),
border: Border.all(color: Colors.white70)),
child: Text(
'Sign in',
style: TextStyle(
fontSize: 15,
color: Colors.white.withOpacity(.8),
fontWeight: FontWeight.w500),
),
),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'New here? ',
style: TextStyle(
fontSize: 12,
color: Colors.white60,
fontWeight: FontWeight.w500),
),
Text(
'Sign up',
style: TextStyle(
fontSize: 13,
color: Colors.white.withOpacity(.8),
fontWeight: FontWeight.w700),
)
],
)
],
),
),
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
height: 80,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/cartoon.jpg'))),
),
)
],
),
)),
),
),
);
}
}Note:
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would love to see how you have used it in your flutter app. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thanks.
Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development.
You might also like:
Flutter Textfield Onchanged Explained With Example-Best Flutter Guide
Flutter Textfield Maxlength Detailed Explanation With Example-Best Flutter Guide
Flutter Textfield Border Radius Explained With Example-Best Flutter Guide
Flutter Textfield Decoration Detailed Explanation With Example-Flutter Guide 2022
How To Change Flutter Textfield Border Color-2022 Guide
Flutter Textfield Align Center With Example-2022 Guide
How To Change Flutter Textfield Color-2022 Guide
Flutter App Development Cookbook: Over 100 Techniques And Solutions For Hybrid App Development
How to Choose the Right React Native Elements for Your Next App- 2022 Guide
Why Should I learn React Native Framework In 2022
Flutter App Development In 2022: Future of Mobile App Development?
Flutter App Development In 2022: Future of Mobile App Development?
How to make your first app with flutter?
Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language
Flutter Vs Android Studio: Which Is Better For You In 2022?
Flutter App Framework: The Future of Mobile App Development 2022?
Top Benefits Of Using Flutter Mobile App Development In 2022
How To Customize Flutter Container Border? 2022 Guide
Top Secrets About Flutter Development Kit-2022 Guide
Beautiful Bottom Navigation Bar In Flutter App-Android And Flutter IOS-Dart Flutter
ListView Builder In Flutter Apps
How To Design Beautiful AppBar in Flutter
How To Use Rows In Flutter Apps
What’s New in Flutter 2.10 release?
How To Use Columns In Flutter Apps
How To Use Beautiful Lottie Animations In Flutter App
Flutter Range Slider Beautiful Customization With Example | Syncfusion
Flutter Carousel Slider Beautiful Customization With Example
Flutter Glassmorphism Login UI Template With Source Code
Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language
