flare_sheet 1.0.0

A premium, modern, and high-performance glassmorphism bottom sheet for Flutter. Part of the Flare ecosystem.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.blueAccent,
      ),
      home: const DemoHome(),
    );
  }
}

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

  void _showSettings(BuildContext context) {
    showFlareSheet(
      context: context,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(height: 20),
          const CircleAvatar(
            radius: 40,
            backgroundImage: NetworkImage('https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=150'),
          ),
          const SizedBox(height: 16),
          const Text(
            'Jane Doe',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
          const Text(
            '[e-mail]',
            style: TextStyle(color: Colors.white70),
          ),
          const SizedBox(height: 24),
          _SettingsTile(
            icon: Icons.person_outline,
            title: 'Edit Profile',
            subtitle: 'Update your personal details',
            onTap: () {},
          ),
          _SettingsTile(
            icon: Icons.notifications_none,
            title: 'Notifications',
            subtitle: 'Manage your alerts',
            onTap: () {},
          ),
          _SettingsTile(
            icon: Icons.lock_outline,
            title: 'Security',
            subtitle: 'Change password or MFA',
            onTap: () {},
          ),
          _SettingsTile(
            icon: Icons.logout,
            title: 'Log out',
            subtitle: '',
            isDestructive: true,
            onTap: () => Navigator.pop(context),
          ),
          const SizedBox(height: 32),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Background content
          Positioned.fill(
            child: Image.network(
              'https://images.unsplash.com/photo-1470770841072-f978cf4d019e?q=80&w=1200',
              fit: BoxFit.cover,
            ),
          ),
          Container(color: Colors.black45),
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'FlareSheet Demo',
                  style: TextStyle(fontSize: 42, color: Colors.white, fontWeight: FontWeight.w900),
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () => _showSettings(context),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.white,
                    foregroundColor: Colors.black,
                    padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
                  ),
                  child: const Text('Open Profile Settings', style: TextStyle(fontWeight: FontWeight.bold)),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _SettingsTile extends StatelessWidget {
  final IconData icon;
  final String title;
  final String subtitle;
  final VoidCallback onTap;
  final bool isDestructive;

  const _SettingsTile({
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.onTap,
    this.isDestructive = false,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(icon, color: isDestructive ? Colors.redAccent : Colors.white),
      title: Text(title, style: TextStyle(color: isDestructive ? Colors.redAccent : Colors.white)),
      subtitle: subtitle.isNotEmpty ? Text(subtitle, style: const TextStyle(color: Colors.white38)) : null,
      onTap: onTap,
    );
  }
}