liquid_notch 0.1.0

A liquid snackbar that stretches out of the iPhone Dynamic Island or notch, morphs into a notification pill, then flows back in. One function call.

example/lib/main.dart

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

void main() => runApp(const LiquidNotchExampleApp());

class LiquidNotchExampleApp extends StatelessWidget {
  const LiquidNotchExampleApp({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Liquid Snackbar',
    theme: ThemeData(
      useMaterial3: true,
      scaffoldBackgroundColor: const Color(0xFFF2F2F2),
      colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF159FFA)),
    ),
    home: const LiquidNotchExample(),
  );
}

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

  void _show(BuildContext context, int index) {
    const items = [
      (
        'New Follower!',
        'Sasuke🌿 followed you',
        Color(0xFF159FFA),
        Icons.person_add_alt_1_rounded,
      ),
      (
        'Watch Party Invite!',
        'Watch Inception with Nagato',
        Color(0xFFEF4A9D),
        Icons.local_movies_rounded,
      ),
      (
        'A Challenger!',
        'Sasori challenged your spot',
        Color(0xFFE6B917),
        Icons.rocket_launch_rounded,
      ),
    ];
    final item = items[index];
    showLiquidSnackbar(
      context,
      item.$1,
      CircleAvatar(
        backgroundColor: item.$3.withValues(alpha: .15),
        child: Text(
          const ['S', 'N', 'S'][index],
          style: TextStyle(
            color: item.$3,
            fontSize: 14,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      Icon(item.$4),
      item.$2,
      accentColor: item.$3,
    );
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    body: SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(28),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Spacer(),
            const Text(
              'Liquid Snackbar',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 26, fontWeight: FontWeight.w700),
            ),
            const SizedBox(height: 10),
            const Text(
              'Tap to send a notification',
              textAlign: TextAlign.center,
              style: TextStyle(color: Color(0xFF777777)),
            ),
            const SizedBox(height: 24),
            for (var i = 0; i < 3; i++)
              Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: OutlinedButton(
                  onPressed: () => _show(context, i),
                  child: Text(const ['Follower', 'Invite', 'Challenge'][i]),
                ),
              ),
            const SizedBox(height: 24),
          ],
        ),
      ),
    ),
  );
}