Last updated:
0 purchases
glass container
Glass Container #
A simple way of implementing glass morphism in Flutter applications. Just import the package and start using it at any level of the widget tree.
Getting Started #
This widget provides a glass morphism effect that can be used anywhere in a Flutter application. It supports an optional child widget and works best with a background image to enhance the glass morphism appearance.
Installation #
Add this to your package's pubspec.yaml file:
dependencies:
glass_container: ^0.0.4
copied to clipboard
Run the following command to install the package:
flutter pub get
copied to clipboard
Usage #
To achieve the glass morphism effect, use the GlassContainer widget with any background image.
import 'package:flutter/material.dart';
import 'package:glass_container/glass_container.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LandingScreen(),
);
}
}
class LandingScreen extends StatefulWidget {
@override
_LandingScreenState createState() => _LandingScreenState();
}
class _LandingScreenState extends State<LandingScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://raw.githubusercontent.com/CM-Talha/glass_container/master/BG.jpg"),
fit: BoxFit.cover,
),
),
child: Center(
child: GlassContainer(
shadowBlurRadius: 80,
shadowSpreadRadius: 10,
contHeight: 500,
contWidth: 400,
child: Center(
child: Text(
'Glass Morphism',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
);
}
}
copied to clipboard
Properties #
shadowBlurRadius: Shadow blur radius (default: 24).
shadowSpreadRadius: Shadow spread radius (default: 16).
shadowColor: Color of the container's shadow (default: white with 0.2 opacity).
sigmaX: Horizontal blur value (default: 20).
sigmaY: Vertical blur value (default: 20).
contHeight: Height of the container.
contWidth: Width of the container.
contColor: Color of the container (default: white with 0.2 opacity).
radius: Border radius of the container (default: circular with 16 radius).
borderRadiusColor: Border color of the container (default: white with 0.2 opacity).
child: Optional child widget to display inside the container.
This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.
For help getting started with Flutter, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
This version improves clarity, structure, and readability, ensuring that users can easily understand how to use the GlassContainer widget in their projects.
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.