Glassmorphism is a user interface (UI) trend of cards in Flutter and a very important component of website consent and achievement. It is very responsive to changes in UI patterns and styles and various evolving styles. Influenced UI Glassmorphism has overwhelmed the most recent UI patterns. This style has been used in a variety of products such as the Apple Ios 7, Windows Vista, etc. Glassmorphism is a form of transparency.
In this blog, we will explore Glassmorphism Card In Flutter. We will also implement a demo of the Glassmorphism Card In Flutter. How to use them in your flutter applications. So let’s get started.
Table Of Contents :
Glassmorphism Card :
Using the Glassmorphism card, we blur the background of the UI and at the same time apply it to the virtual glass as it is a multi-layered methodology to make it appear as if the item is skimming through space The fuzzy effect is highlighted with energetic tones. This pattern is quickly gaining prominence as it is an open-source UI development kit from Flutter so we can use it for UI design for different platforms.
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies :
dependencies:
glassmorphism: ^2.0.1Step 2: Importing
import 'package:glassmorphism/glassmorphism.dart';Step 3: Enable AndriodX
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=trueCode Implementation :
You need to implement it in your code respectively:
Before exploring the Glassmorphism card, we have created a dart file, inside the body part of which we have taken a container widget, which we have given a gradient color to its background using the decoration property.
Positioned(
top: constraints.maxHeight * 0.19,
left: constraints.maxWidth * 0.01,
child: Container(
height: constraints.maxHeight * 0.20,
width: constraints.maxWidth * 0.35,
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [
Colors.deepPurpleAccent,
Colors.purple
],
radius: 0.7,
),
shape: BoxShape.circle),
)),Now we took a Center() widget inside the container which when we use any widget then it will display in the center. Now we will use GlassMorphicContainer inside the center widget which is a kind of plugin, in we have given its height, width and have defined blur, borderRadius size in it, in this, we have given its shape like a credit card and some of it Test defined so that our card looks good.
GlassmorphicContainer(
height: _height * 0.3,
width: _width * 0.9,
borderRadius:15,
blur: 15,
alignment: Alignment.center,
border: 2,
linearGradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.2),
Colors.white38.withOpacity(0.2)
],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
borderGradient: LinearGradient(colors: [
Colors.white24.withOpacity(0.2),
Colors.white70.withOpacity(0.2)
]),
child: Container(
decoration: BoxDecoration(boxShadow: [
BoxShadow(
blurRadius: 16,
spreadRadius: 16,
color: Colors.black.withOpacity(0.1),
)
]),
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 20.0,
sigmaY: 20.0,
),
child: Container(
height: _height * 0.7,
width: _width * 0.9,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(16.0),
border: Border.all(
width: 1.5,
color: Colors.white.withOpacity(0.2),
)),
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('ICICI BANK', style: TextStyle(color: Colors.white.withOpacity(0.75))),
Icon(Icons.credit_card_sharp, color: Colors.white.withOpacity(0.75),)
],
),
Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('VISA', style: TextStyle(color: Colors.white.withOpacity(0.75))),
Text('09/27', style: TextStyle(color: Colors.white.withOpacity(0.75))),
],
),
SizedBox(height:10,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('3648 3847 9283 1482', style: TextStyle(color: Colors.white.withOpacity(0.75))),
],
)
],
),
)
),
),
),
),
)Code File :
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:glassmorphism/glassmorphism.dart';
class GlassMorphismDemo extends StatefulWidget {
@override
_GlassMorphismDemoState createState() => _GlassMorphismDemoState();
}
class _GlassMorphismDemoState extends State<GlassMorphismDemo> {
late double _height;
late double _width;
@override
Widget build(BuildContext context) {
_height = MediaQuery.of(context).size.height;
_width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text('Glassmorphic Card Demo'),
),
body: Container(
height: _height,
width: _width,
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [Colors.green, Colors.blue, Colors.orange, Colors.pink],
stops: [0.2, 0.5, 0.7, 1],
center: Alignment(0.1, 0.3),
focal: Alignment(-0.1, 0.6),
focalRadius: 2,
),
),
// building the layout
child: Center(
child: GlassmorphicContainer(
height: _height * 0.3,
width: _width * 0.9,
borderRadius: 15,
blur: 15,
alignment: Alignment.center,
border: 2,
linearGradient: LinearGradient(colors: [
Colors.white.withOpacity(0.2),
Colors.white38.withOpacity(0.2)
], begin: Alignment.topLeft, end: Alignment.bottomRight),
borderGradient: LinearGradient(colors: [
Colors.white24.withOpacity(0.2),
Colors.white70.withOpacity(0.2)
]),
child: Container(
decoration: BoxDecoration(boxShadow: [
BoxShadow(
blurRadius: 16,
spreadRadius: 16,
color: Colors.black.withOpacity(0.1),
)
]),
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 20.0,
sigmaY: 20.0,
),
child: Container(
height: _height * 0.7,
width: _width * 0.9,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(16.0),
border: Border.all(
width: 1.5,
color: Colors.white.withOpacity(0.2),
)),
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text('ICICI BANK',
style: TextStyle(
color:
Colors.white.withOpacity(0.75))),
Icon(
Icons.credit_card_sharp,
color: Colors.white.withOpacity(0.75),
)
],
),
Spacer(),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text('VISA',
style: TextStyle(
color:
Colors.white.withOpacity(0.75))),
Text('09/27',
style: TextStyle(
color:
Colors.white.withOpacity(0.75))),
],
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text('3648 3847 9283 1482',
style: TextStyle(
color:
Colors.white.withOpacity(0.75))),
],
)
],
),
)),
),
),
),
),
),
));
}
}Conclusion:
In this article, I have explained Glassmorphism Card In Flutter, which you can modify and experiment with according to your own, this little introduction was from the Glassmorphism Card In Flutter demo from our side.
I hope this blog will provide you with sufficient information on Trying up the Glassmorphism Card In Flutter in your flutter project. We showed you what the Glassmorphism Card In Flutter is and work on it 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.
