https://github.com/joysarkar18/glossy
This is a flutter package made by me to build glassmorphic ui component. Run flutter pub add glossy to add this as dependency in your flutter project. For more information please read the ReadMe file.
https://github.com/joysarkar18/glossy
flutter flutter-apps flutter-package flutter-packages flutter-ui glassmorphism glassmorphism-ui pubdev
Last synced: 4 months ago
JSON representation
This is a flutter package made by me to build glassmorphic ui component. Run flutter pub add glossy to add this as dependency in your flutter project. For more information please read the ReadMe file.
- Host: GitHub
- URL: https://github.com/joysarkar18/glossy
- Owner: joysarkar18
- License: mit
- Created: 2023-12-29T15:16:04.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-06T18:24:32.000Z (about 1 year ago)
- Last Synced: 2025-01-06T19:34:40.444Z (about 1 year ago)
- Topics: flutter, flutter-apps, flutter-package, flutter-packages, flutter-ui, glassmorphism, glassmorphism-ui, pubdev
- Language: Dart
- Homepage:
- Size: 54.7 KB
- Stars: 15
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## Screenshots
## Overview
This Flutter package allows you to easily create glass morphism effects in your Flutter applications. Glass morphism is a design trend that involves using blurred, semi-transparent elements to create a frosted glass-like effect.
## Installation
To use this package, add `glossy` as a dependency in your `pubspec.yaml` file:
```yaml
dependencies:
flutter:
sdk: flutter
glossy: ^0.0.5
```
OR
Open your termilar in the project level and run this command.
```bash
flutter pub add glossy
```
## Usage
You can use the `GlossyContainer` widget provided by this package to create glass morphism effects. Here's a basic example:
```dart
import 'package:flutter/material.dart';
import 'package:glossy/glossy.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: const Text('Glass Morphism Example'),
),
body: Center(
child: SizedBox(
width: 300,
height: 300,
child: Stack(
children: [
Container(
height: 140,
width: 140,
decoration: (BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.circular(70))),
),
Align(
alignment: Alignment.bottomRight,
child: Container(
height: 140,
width: 140,
decoration: (BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.circular(70))),
),
),
Align(
alignment: Alignment.center,
child: GlossyContainer(
width: 200,
height: 200,
borderRadius: BorderRadius.circular(12),
child: const Center(
child: Text(
'Glass Morphism',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
],
),
),
),
),
);
}
}
```
## Parameters
- `width`: The width of the container `required`.
- `height`: The height of the container `required`.
- `borderRadius`: The border radius of the container.
- `blur`: The amount of blur to apply to the container.
- `child`: The widget placed inside the glass container.
- `color`: Background color of the container.
- `opacity`: Opacity of the container.
- `strengthX`: Strength of blur in the horizontal direction.
- `strengthY`: Strength of blur in the vertical direction.
- `border`: Border of the container.
- `blendMode`: Blend mode for applying filter.
- `gradient`: Gradient of the container.
- `boxShadow`: Box shadows for the container.
- `image`: Background image of the container.
- `imageOpacity`: Opacity of the background image.
## Support
If you find this project helpful and would like to support its development, you can connect with me on social media:
- [Twitter](https://twitter.com/byteberg)
- [Instagram](https://www.instagram.com/byteberg?igsh=MThrNWNoY2t0ZjNocQ==)
- [LinkedIn](https://www.linkedin.com/in/joy-sarkar-667b47218/)
- [GitHub](https://github.com/joysarkar18)
Your support and feedback are greatly appreciated and will help in further improving this project.