#shimmering_developer
- ๐ญ Iโm currently working as a Flutter Developer
- โก Fun fact: You can add stars to all my repositories, Thanks in advance ๐
Glassmorphic UI Package For Flutter || UI ||
Home Page: https://pub.dev/packages/glassmorphism
License: Apache License 2.0
I recently tested the Flutter package "glassmorphism" on several Android smartphones and noticed a problem. Instead of seeing a blurred effect, I get a slightly transparent gray/white background. This problem was observed on a device running Android 9 with version One UI 1.0.
I've checked the existing problems for this package and haven't found any similar problems reported. I would like to know if this is a known problem and if there is a solution to fix it.
Thank you for your help.
The error I get is given below:
Error on line 30, column 3 of pubspec.yaml: A package may not list itself as a dependency.
Hi there,
Im developing an app using Flutter for both iOS and Android devices.
When the user taps on a marker on the map (GoogleMap) a Diologbox opens and displays the GlassmorphicContainer over the GoogleMap background, in turn displaying some text.
The effect works great on Android, but on iOS for some reason, the blurry glassmorphic effect only happens over widgets such as custom buttons, etc, but doesnt blur out the actual googlemap, text or markers on the googlemap. On Android, everything within the GlassmorphicContainer is blurred out perfectly.
Any ideas?
Greetings!
Can you please tell me how can I make the size of the container to the size of the inner child?
Thanks for this amazing package :) By the way, Is it possible not to provide height explicitly but take the content height?
Currently, the height and width is a mandatory parameter which provides some constraints in terms of the responsiveness of the widget. Would it be possible to make these fit dynamically to the content within like the standard container does?
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Code:-
GlassmorphicContainer(
width: 0,
height: 45.h,
borderRadius: 5.r,
blur: 6,
alignment: Alignment.center,
border: 10,
linearGradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
colorGreen.withOpacity(0.2),
colorGreen.withOpacity(0.2),
],
stops: [
0.1,
1,
]),
borderGradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.black.withOpacity(0.5),
Colors.black.withOpacity(0.5),
],
),
flutter doctor :-
[โ] Flutter (Channel stable, 3.7.3, on Microsoft Windows [Version 10.0.19045.2604], locale en-IN)
[โ] Windows Version (Installed version of Windows is version 10 or higher)
[โ] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[โ] Chrome - develop for the web
[!] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.18)
X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components:
MSVC v142 - VS 2019 C++ x64/x86 build tools
- If there are multiple build tool versions available, install the latest
C++ CMake tools for Windows
Windows 10 SDK
[โ] Android Studio (version 2021.2)
[โ] VS Code (version 1.75.1)
[โ] Connected device (4 available)
[โ] HTTP Host Availability
Hello do you have any plans for making this library null-safety?
Is your feature request related to a problem? Please describe.
It would be cool if I could add drop shadow / elevation to GlassmorphicContainer. The designs I made (and got approved from client) has no border and uses drop shadow to separate itself from other elements of the page.
Describe the solution you'd like
I would like an optional parameter for 'elevation', 'shadowColor' just like in Card/Material widget, or 'boxShadow' like in BoxDecoration widget.
Describe alternatives you've considered
Currently what I am doing to get this effect is, wrapping GlassmorphicContainer with a Container and provide decoration as follows
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(20),
boxShadow: const [
BoxShadow(
color: AppColors.shadow_black, //Use color of your choice
offset: Offset(
5.0,
5.0,
),
blurRadius: 10.0,
spreadRadius: 2.0,
),
],
),
A better way might be to wrap GlassmorphicContainer with PhysicalModel(with color: Colors.transparent, of course) [Thanks to Flutter Widget of the Week] as it is a more raw/basic Widget but the problem for me was I couldn't control offset for shadow using this method.
Here is one of the pages from my design (what I was trying to achieve)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.