bloom_native_ui 0.1.0

Open-source native SwiftUI (Liquid Glass) and Jetpack Compose views for Flutter and Bloom apps.

example/lib/main.dart

import 'package:bloom_native_ui/bloom_native_ui.dart';
import 'package:flutter/widgets.dart';

Future<void> main() async {
  await BloomNativeUi.initialize();
  runApp(BloomNativeUi.wrap(const DemoApp()));
}

class DemoApp extends StatefulWidget {
  const DemoApp({super.key});

  @override
  State<DemoApp> createState() => _DemoAppState();
}

class _DemoAppState extends State<DemoApp> {
  bool _notifications = true;
  int _segment = 0;
  String _tab = 'home';
  int _presses = 0;

  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      color: const Color(0xFF6200EE),
      builder: (context, _) => DecoratedBox(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color(0xFFFF4B8B), Color(0xFF8B5CF6), Color(0xFF20C9B0)],
          ),
        ),
        child: Stack(
          children: [
            // Shapes behind the floating glass so refraction is visible.
            for (final (dx, dy, size, color) in const [
              (0.15, 0.62, 140.0, Color(0xFFFFD166)),
              (0.7, 0.7, 180.0, Color(0xFF06D6A0)),
              (0.45, 0.82, 110.0, Color(0xFFEF476F)),
              (0.85, 0.5, 90.0, Color(0xFF118AB2)),
            ])
              Positioned(
                left: dx * 360,
                top: dy * 760,
                child: Container(
                  width: size,
                  height: size,
                  decoration: BoxDecoration(
                    color: color,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
            SafeArea(
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    const BloomGlassPanel(
                      title: 'Native glass',
                      subtitle: 'SwiftUI on iOS, Jetpack Compose on Android',
                      icon: 'sparkles',
                    ),
                    const SizedBox(height: 16),
                    BloomGlassButton(
                      label: 'Pressed $_presses times',
                      icon: 'heart',
                      onPressed: () => setState(() => _presses++),
                    ),
                    const SizedBox(height: 16),
                    BloomGlassButton(
                      label: 'Prominent',
                      style: BloomGlassButtonStyle.prominent,
                      onPressed: () => setState(() => _presses++),
                    ),
                    const SizedBox(height: 16),
                    BloomGlassToggle(
                      label: 'Notifications',
                      value: _notifications,
                      onChanged: (v) => setState(() => _notifications = v),
                    ),
                    const SizedBox(height: 16),
                    BloomGlassSegmentedControl(
                      segments: const ['Day', 'Week', 'Month'],
                      selectedIndex: _segment,
                      onSelected: (i) => setState(() => _segment = i),
                    ),
                    const Spacer(),
                    BloomGlassTabBar(
                      items: const [
                        BloomGlassTabItem(
                            id: 'home', label: 'Home', icon: 'house'),
                        BloomGlassTabItem(
                            id: 'search',
                            label: 'Search',
                            icon: 'magnifyingglass'),
                        BloomGlassTabItem(
                            id: 'me', label: 'Me', icon: 'person'),
                      ],
                      selectedId: _tab,
                      onSelected: (id) => setState(() => _tab = id),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}