Frosted Glass Effect In Flutter
The frosted glass effect is a cool UI idea in the flutter that makes our UI look more alluring. It is fundamentally a blurred-out overlay with decreased opacity, to recognize or lessen a specific view. This component truly looks great however it influences the application’s performance.
In this blog, we will explore the Frosted Glass Effect In Flutter. We will execute a demo program in-depth to look at creating a Frosted Glass look in Flutter that you can use for Cards and other UI Components in your flutter applications.
Table Of Contents::
Frosted Glass Effect:
The Frosted Glass effect is a somewhat normal impact utilized in iOS and Android applications. The principal thought of adding frosted glass effect in the use of showing the view which needs to focus on a clean environment while obscuring the other content to make that less engaged.
Flutter gives the simple inbuild widget to make a Frosted glass impact in your and this will work both in iOS and Android very well. BackdropFilter widget in Flutter can use to blur the picture, container, and numerous different widgets also.
Demo Module :
This demo video shows how to create a Frosted glass effect in a flutter. It shows how to Frosted glass effect will work using BackdropFilter widget in your flutter applications. It shows the card with background transparent and other text will be shown on this card. It will be shown on your device.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the body, we will add a Container widget. In this widget, we will add height, width with double infinity and add color. It’s child property, we will add Stack() widget. Inside, we will add the Colum with the mainAxisAlignment was center. We will add two Container widgets with height and width. We will add LinearGradient() on both containers. The first one, begin: Alignment.topRight, end: Alignment.bottomLeft, and margin: EdgeInsets.only(left: 200). The second one, begin: Alignment.topRight, end: Alignment.bottomLeft, and )margin: EdgeInsets.only(right: 270).
Container(
height: double.infinity,
width: double.infinity,
color: Colors.black,
child: Stack(
children: [
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 200,
height: 200,
margin: EdgeInsets.only(left: 200),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.pink.shade700,
Colors.orange.shade500
],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
borderRadius: BorderRadius.circular(100)),
),
Container(
width: 100,
height: 100,
margin: EdgeInsets.only(right: 270),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.pink.shade700,
Colors.orange.shade500
],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
borderRadius: BorderRadius.circular(100)),
)
],
),
),
frostedGlassEffectDemo(context),
],
),
),
We will add frostedGlassEffectDemo(context) widget. We will deeply define below the code. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now we will deeply define frostedGlassEffectDemo(context) widget:
In this widget, we will return a Center widget. Inside, we will add ClipRRect() method. In this method, we will add borderRadius: BorderRadius.circular(20), and add Conatiner.
return Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
//////////
),
),
Now, Inside the Container widget. We will add Stack() widget. In this widget, we will add BackdropFilter() and Container(). In BackdropFilter, we will add a filter: ImageFilter.blur, and bracket we will add sigmaX: 7, sigmaY: 7. It’s child property, we will add a Container with height and width.
Container(
child:
Stack(
children: [
BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 7,
sigmaY: 7,
),
child: Container(
height: 220,
width: 360,
),
),
Container(
height: 230,
width: 360,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.25),
)
],
border: Border.all(
color: Colors.white.withOpacity(0.2), width: 1.0),
gradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.5),
Colors.white.withOpacity(0.2)
],
stops: [0.0, 1.0],
),
borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
SizedBox(
height: 10,
),
SizedBox(
width: 270,
child: Text(
"Debit Card",
style: TextStyle(
color: Colors.white.withOpacity(0.6),
fontWeight: FontWeight.bold,
fontSize: 22),
)),
SizedBox(
height: 70,
),
Text(
"7622 4574 3688 3640 ",
style: TextStyle(
fontSize: 23, color: Colors.white.withOpacity(0.4)),
),
SizedBox(
width: 275,
child: Row(
children: [
Text(
"6372",
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontSize: 12),
),
SizedBox(
width: 100,
),
Text(
"VALID \n THRU",
style: TextStyle(
fontSize: 6,
color: Colors.white.withOpacity(0.5),
fontWeight: FontWeight.bold),
),
Text(
" 09/25",
style: TextStyle(
fontSize: 14,
color: Colors.white.withOpacity(0.5)),
),
],
),
),
SizedBox(
height: 10,
),
SizedBox(
width: 275,
child: Text(
"FLUTTER DEVS",
style: TextStyle(
color: Colors.white.withOpacity(0.6),
fontWeight: FontWeight.bold),
))
],
),
),
),
]),
),
Container widget, we will add LinearGradient(). It’s child property, we will add the Column widget. In this widget, we will add a text “Debit Card”, with color: Colors.white.withOpacity(0.6), fontWeight: FontWeight.bold. Also, we will add much more text with different font sizes, colors, and fontWeight. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:frostedcard/splash.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Splash(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.white12,
title: Text("Flutter Forested Glass Effect Demo"),
),
body: Container(
height: double.infinity,
width: double.infinity,
color: Colors.black,
child: Stack(
children: [
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 200,
height: 200,
margin: EdgeInsets.only(left: 200),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.pink.shade700,
Colors.orange.shade500
],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
borderRadius: BorderRadius.circular(100)),
),
Container(
width: 100,
height: 100,
margin: EdgeInsets.only(right: 270),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.pink.shade700,
Colors.orange.shade500
],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
borderRadius: BorderRadius.circular(100)),
)
],
),
),
frostedGlassEffectDemo(context),
],
),
),
);
}
}
Widget frostedGlassEffectDemo(BuildContext context) {
return Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
child:
Stack(
children: [
BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 7,
sigmaY: 7,
),
child: Container(
height: 220,
width: 360,
),
),
Container(
height: 230,
width: 360,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.25),
)
],
border: Border.all(
color: Colors.white.withOpacity(0.2), width: 1.0),
gradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.5),
Colors.white.withOpacity(0.2)
],
stops: [0.0, 1.0],
),
borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
SizedBox(
height: 10,
),
SizedBox(
width: 270,
child: Text(
"Debit Card",
style: TextStyle(
color: Colors.white.withOpacity(0.6),
fontWeight: FontWeight.bold,
fontSize: 22),
)),
SizedBox(
height: 70,
),
Text(
"7622 4574 3688 3640 ",
style: TextStyle(
fontSize: 23, color: Colors.white.withOpacity(0.4)),
),
SizedBox(
width: 275,
child: Row(
children: [
Text(
"6372",
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontSize: 12),
),
SizedBox(
width: 100,
),
Text(
"VALID \n THRU",
style: TextStyle(
fontSize: 6,
color: Colors.white.withOpacity(0.5),
fontWeight: FontWeight.bold),
),
Text(
" 09/25",
style: TextStyle(
fontSize: 14,
color: Colors.white.withOpacity(0.5)),
),
],
),
),
SizedBox(
height: 10,
),
SizedBox(
width: 275,
child: Text(
"FLUTTER DEVS",
style: TextStyle(
color: Colors.white.withOpacity(0.6),
fontWeight: FontWeight.bold),
))
],
),
),
),
]),
),
),
);
}
Conclusion:
In the article, I have explained the basic structure of the Frosted Glass Effect in a flutter; you can modify this code according to your choice. This was a small introduction to Frosted Glass Effect On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Frosted Glass Effect in your flutter projects. We will show you what the Frosted Glass Effect is?. Make a demo program for working Frosted Glass Effect using BackdropFilter, container, and many more Widgets in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
