glass_ui 1.0.5

glass_ui is a Flutter package that brings stunning, fully customizable glassmorphism components to your app. With sleek blur effects, vibrant gradients, and flexible styling options, glass_ui makes it [...]

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:glass_ui/glass_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const LoginPage(),
    );
  }
}

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          /// Background image
          Positioned.fill(
            child: Image.network(
              'https://images.unsplash.com/photo-1755001266339-06922afc7cc2?q=80&w=1000&auto=format&fit=crop',
              fit: BoxFit.cover,
              filterQuality: FilterQuality.high,
            ),
          ),

          /// Login Glass Card
          Positioned(
            left: 0,
            right: 0,
            bottom: 60,
            child: Center(
              child: GlassContainer(
                width: 340,
                height: 280,
                blur: 6,
                elevation: 0,
                borderRadius: 25,
                padding: const EdgeInsets.all(20),
                border: Border.all(color: Colors.white24, width: 1.5),
                animateBorder: true,
                animationDuration: const Duration(seconds: 2),
                borderGradient: LinearGradient(
                  colors: [
                    Colors.red.withOpacity(0.4),
                    Colors.blue.withOpacity(0.4),
                    Colors.green.withOpacity(0.4),
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                backgroundGradient: LinearGradient(
                  colors: [
                    Colors.white.withOpacity(0.15),
                    Colors.black26.withOpacity(0.10),
                  ],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomRight,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    /// Username
                    TextField(
                      style: const TextStyle(color: Colors.white),
                      decoration: InputDecoration(
                        hintText: 'Username',
                        hintStyle: const TextStyle(color: Colors.white54),
                        prefixIcon: const Icon(
                          Icons.person_outline,
                          color: Colors.white70,
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                          borderSide: const BorderSide(
                            color: Colors.white24,
                            width: 1,
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                          borderSide: const BorderSide(
                            color: Colors.white70,
                            width: 1,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 16),

                    /// Password
                    TextField(
                      obscureText: true,
                      style: const TextStyle(color: Colors.white),
                      decoration: InputDecoration(
                        hintText: 'Password',
                        hintStyle: const TextStyle(color: Colors.white54),
                        prefixIcon: const Icon(
                          Icons.lock_outline,
                          color: Colors.white70,
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                          borderSide: const BorderSide(
                            color: Colors.white24,
                            width: 1,
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                          borderSide: const BorderSide(
                            color: Colors.white70,
                            width: 1,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 24),

                    /// Login Button
                    GlassButton(
                      text: 'Login',
                      textDirection: TextDirection.ltr,
                      textStyle: const TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontWeight: FontWeight.w700,
                      ),
                      blur: 3,
                      backgroundGradient: LinearGradient(
                        colors: [
                          Colors.white.withOpacity(0.10),
                          Colors.black26.withOpacity(0.10),
                        ],
                        begin: Alignment.topCenter,
                        end: Alignment.bottomRight,
                      ),
                      border: Border.all(color: Colors.white24, width: 1),
                      elevation: 1,
                      icon: Icons.login_outlined,
                      width: double.infinity,
                      onPressed: () async {
                        await showDialog(
                          context: context,
                          barrierDismissible: false,
                          builder: (context) {
                            return GlassDialog(
                              border: Border.all(
                                color: Colors.white24,
                                width: 1.5,
                              ),
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  const Text(
                                    "Login Confirmation",
                                    style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white,
                                    ),
                                  ),
                                  const SizedBox(height: 12),
                                  const Text(
                                    "Do you want to continue?",
                                    style: TextStyle(color: Colors.white70),
                                  ),
                                  const SizedBox(height: 20),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      GlassButton(
                                        text: 'Cancel',
                                        onPressed: () =>
                                            Navigator.of(context).pop(),
                                      ),
                                      const SizedBox(width: 10),
                                      GlassButton(
                                        text: 'OK',
                                        onPressed: () {
                                          Navigator.of(context).pop();

                                          /// Show Snackbar after OK
                                          final messages = [
                                            'Welcome back!',
                                            'Login successful!',
                                            'Glass UI makes Flutter cooler ✨',
                                          ];
                                          final randomMessage =
                                              (messages..shuffle()).first;

                                          CustomGlassSnackBar.show(
                                            context,
                                            message: randomMessage,
                                            textDirection: TextDirection.ltr,
                                            textStyle: const TextStyle(
                                              color: Colors.white,
                                              fontSize: 18,
                                              fontWeight: FontWeight.w500,
                                            ),
                                            borderWidth: 1.5,
                                            borderGradient: LinearGradient(
                                              colors: [
                                                Colors.red.withOpacity(0.5),
                                                Colors.blue.withOpacity(0.5),
                                                Colors.green.withOpacity(0.5),
                                              ],
                                              begin: Alignment.topLeft,
                                              end: Alignment.bottomRight,
                                            ),
                                            backgroundGradient: LinearGradient(
                                              colors: [
                                                Colors.white.withOpacity(0.15),
                                                Colors.black26.withOpacity(
                                                  0.10,
                                                ),
                                              ],
                                              begin: Alignment.topCenter,
                                              end: Alignment.bottomRight,
                                            ),
                                            animateBorder: true,
                                            animationDuration: const Duration(
                                              seconds: 2,
                                            ),
                                            icon: Icons.check_circle_outline,
                                            blur: 5,
                                            backgroundColor: Colors.black26,
                                            elevation: 0,
                                            position: SnackBarPosition.top,
                                            duration: const Duration(
                                              seconds: 3,
                                            ),
                                          );
                                        },
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            );
                          },
                        );
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}