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

Run the following command to install the package:

flutter pub get

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,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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.

Libraries

glass_container