hyper_snackbar 0.2.0

hyper_snackbar: ^0.2.0 copied to clipboard

example/lib/main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:hyper_snackbar/hyper_snackbar.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ★ Contextなしで表示するためにNavigatorKeyを登録
      navigatorKey: HyperSnackbar.navigatorKey,
      debugShowCheckedModeBanner: false,
      title: 'Hyper Snack Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HyperDemoPage(),
    );
  }
}

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

  @override
  State<HyperDemoPage> createState() => _HyperDemoPageState();
}

class _HyperDemoPageState extends State<HyperDemoPage> {
  int _logCount = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hyper Snack List Demo'),
        backgroundColor: const Color(0xFF1F1F1F),
        foregroundColor: Colors.white,
      ),
      backgroundColor: const Color(0xFFF5F5F5),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // -------------------------------------------------------
            // 1. Basic Presets
            // -------------------------------------------------------
            _buildHeader('1. Basic Presets'),
            _buildButton(
              'Success',
              Colors.green,
              () => HyperSnackbar.showSuccess(title: 'Operation Successful'),
            ),
            _buildButton(
              'Error',
              Colors.red,
              () => HyperSnackbar.showError(
                title: 'Connection Failed',
                message: 'Please check your internet connection.',
              ),
            ),
            _buildButton(
              'Warning + Tap Action',
              Colors.amber,
              () {
                // contextを渡すことで、タップ時の画面遷移などがスムーズに行えます
                HyperSnackbar.show(
                  title: 'Low Storage',
                  message: 'Tap here to manage storage.',
                  backgroundColor: Colors.amber.shade700,
                  icon: const Icon(
                    Icons.warning_amber_rounded,
                    color: Colors.white,
                  ),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) =>
                            const DetailPage(title: 'Storage Settings'),
                      ),
                    );
                  },
                  context: context,
                );
              },
            ),
            _buildButton(
              'Info',
              Colors.blue,
              () => HyperSnackbar.showInfo(
                title: 'New Message',
                message: 'You have received a new notification.',
              ),
            ),

            // -------------------------------------------------------
            // 2. Advanced Design
            // -------------------------------------------------------
            _buildHeader('2. Advanced Design'),
            _buildButton(
              'Modern Card Style',
              Colors.indigo,
              () => _showModernStyledSnackBar(),
            ),

            // -------------------------------------------------------
            // 3. With Actions
            // -------------------------------------------------------
            _buildHeader('3. With Actions'),
            _buildButton(
              'Delete with "Undo"',
              Colors.deepOrange,
              () => _showUndoSnackBar(),
            ),

            // -------------------------------------------------------
            // 4. State Update (Using ID)
            // -------------------------------------------------------
            _buildHeader('4. State Update (Using ID)'),
            _buildButton(
              'Process (Loading -> Done)',
              Colors.blueGrey,
              () => _showProcessSnackBar(),
            ),

            // -------------------------------------------------------
            // 5. Log Style (Bottom Append)
            // -------------------------------------------------------
            _buildHeader('5. Log Style (Console)'),
            _buildButton(
              'Add Log (Max Visible: 5)',
              Colors.teal,
              () => _showLogStyleSnackBar(),
            ),

            // -------------------------------------------------------
            // 6. Control & Management
            // -------------------------------------------------------
            _buildHeader('6. Control & Management'),

            // 新機能: 固定IDで表示 (Persistent)
            _buildButton(
              'Show Static ID ("static_1")',
              Colors.purple,
              () => HyperSnackbar.show(
                id: 'static_1',
                title: 'Persistent Notification',
                message: 'This will stay until you dismiss it by ID.',
                displayDuration: null, // 自動で消えない
                backgroundColor: Colors.purple.shade700,
                icon: const Icon(Icons.fingerprint, color: Colors.white),
                showCloseButton: false, // ユーザーに閉じさせない
              ),
            ),

            // 新機能: 指定IDのみ閉じる
            _buildButton(
              'Dismiss by ID ("static_1")',
              Colors.purple.shade300,
              () => HyperSnackbar.dismissById('static_1'),
            ),

            const SizedBox(height: 16),

            // 新機能: 全て閉じる
            _buildButton(
              'Clear All',
              Colors.grey,
              () => HyperSnackbar.clearAll(),
            ),

            const SizedBox(height: 16),

            // -------------------------------------------------------
            // 7. Animation Playground
            // -------------------------------------------------------
            _buildHeader('7. Animation Playground'),

            // 1. Slide Horizontal (左から出て、右へ消える)
            _buildButton(
              'Left In -> Right Out',
              Colors.brown,
              () => HyperSnackbar.show(
                title: 'Horizontal Slide',
                message: 'Enter: fromLeft, Exit: toRight',
                backgroundColor: Colors.brown.shade700,
                icon: const Icon(Icons.swap_horiz, color: Colors.white),

                // ★ アニメーション設定
                enterAnimationType: HyperSnackAnimationType.fromLeft,
                exitAnimationType: HyperSnackAnimationType.toRight,
              ),
            ),

            // 2. Scale / Elastic (ポヨンと出てくる)
            _buildButton(
              'Scale (Elastic) -> Fade',
              Colors.pink,
              () => HyperSnackbar.show(
                title: 'Pop Notification',
                message: 'Enter: Scale (Elastic), Exit: Fade',
                backgroundColor: Colors.pink.shade600,
                icon: const Icon(Icons.star, color: Colors.white),

                // ★ アニメーション設定
                enterAnimationType: HyperSnackAnimationType.scale,
                exitAnimationType: HyperSnackAnimationType.fade,
                enterCurve: Curves.elasticOut, // 弾むような動き
                enterAnimationDuration: const Duration(milliseconds: 800),
              ),
            ),

            // 3. From Bottom (下から出てくる)
            _buildButton(
              'From Bottom -> Slide Left',
              Colors.blueGrey,
              () => HyperSnackbar.show(
                title: 'Bottom Sheet Style',
                message: 'Position: Bottom, Enter: fromBottom',
                backgroundColor: Colors.blueGrey.shade800,
                icon: const Icon(Icons.vertical_align_bottom,
                    color: Colors.white),

                // ★ 位置とアニメーション設定
                position: HyperSnackPosition.bottom, // 下に表示
                enterAnimationType: HyperSnackAnimationType.fromBottom,
                exitAnimationType: HyperSnackAnimationType.toLeft,
              ),
            ),

            // 4. Fade Only (ふわっと出る)
            _buildButton(
              'Fade In -> Fade Out',
              Colors.black54,
              () => HyperSnackbar.show(
                title: 'Subtle Message',
                message: 'Enter: Fade, Exit: Fade',
                backgroundColor: Colors.black,
                icon: const Icon(Icons.blur_on, color: Colors.white),

                // ★ アニメーション設定
                enterAnimationType: HyperSnackAnimationType.fade,
                exitAnimationType: HyperSnackAnimationType.fade,
                enterAnimationDuration: const Duration(milliseconds: 600),
                enterCurve: Curves.easeIn,
                exitCurve: Curves.easeIn,
              ),
            ),

            const SizedBox(height: 60), // 最下部の余白

            const SizedBox(height: 40),
          ],
        ),
      ),
    );
  }

  // ----------------------------------------------------------------
  // Demo Pattern: Advanced Design
  // ----------------------------------------------------------------
  void _showModernStyledSnackBar() {
    HyperSnackbar.show(
      title: 'Design Update',
      message: 'Custom border, margin, and fonts applied.',
      backgroundColor: const Color(0xFF212121),

      // Custom Border
      border: Border.all(color: Colors.white.withAlpha(1), width: 1.0),

      // Floating Margin
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),

      // Inner Padding
      padding: const EdgeInsets.all(20),

      // Custom Font Styles
      titleStyle: const TextStyle(
        color: Colors.white,
        fontSize: 18,
        fontWeight: FontWeight.w900,
        letterSpacing: 1.2,
      ),
      messageStyle: TextStyle(
        color: Colors.white.withAlpha(7),
        fontStyle: FontStyle.italic,
      ),

      icon: const Icon(Icons.brush, color: Colors.lightBlueAccent),
      context: context,
    );
  }

  // ----------------------------------------------------------------
  // Demo Pattern: Action Button
  // ----------------------------------------------------------------
  void _showUndoSnackBar() {
    context.showHyperSnackbar(
      title: 'Item deleted',
      icon: const Icon(Icons.delete_outline, color: Colors.white),
      action: HyperSnackAction(
        label: 'UNDO',
        textColor: Colors.yellowAccent,
        onPressed: () {
          HyperSnackbar.showSuccess(title: 'Item restored!');
        },
      ),
    );
  }

  // ----------------------------------------------------------------
  // Demo Pattern: State Update (ID)
  // ----------------------------------------------------------------
  Future<void> _showProcessSnackBar() async {
    const String processId = 'process_123';

    // To ensure this demo is clearly visible, clear other snackbars first.
    if (HyperSnackbar.isSnackbarOpen) {
      HyperSnackbar.clearAll();
      // Wait a short moment for the clear animation to start.
      await Future.delayed(const Duration(milliseconds: 300));
    }

    // 1. Start (Loading)
    if (!mounted) return;
    HyperSnackbar.show(
      id: processId,
      title: 'Uploading...',
      message: 'Sending data (20%)',
      displayDuration: null, // Sticky
      backgroundColor: Colors.blue[800]!,
      icon: const SizedBox(
        width: 20,
        height: 20,
        child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white),
      ),
      context: context,
    );

    await Future.delayed(const Duration(seconds: 2));
    if (!mounted) return;

    // 2. Update Progress (Using same ID)
    HyperSnackbar.show(
      id: processId,
      title: 'Processing...',
      message: 'Converting on server (80%)',
      displayDuration: null,
      backgroundColor: Colors.orange[800]!,
      icon: const SizedBox(
        width: 20,
        height: 20,
        child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white),
      ),
      context: context,
    );

    await Future.delayed(const Duration(seconds: 2));
    if (!mounted) return;

    // 3. Finish (Update & Auto-dismiss)
    HyperSnackbar.show(
      id: processId,
      title: 'Completed!',
      message: 'All tasks finished successfully.',
      displayDuration: const Duration(seconds: 3), // 3秒後に消える
      backgroundColor: Colors.green[700]!,
      icon: const Icon(Icons.check_circle, color: Colors.white),
      context: context,
    );
  }

  // ----------------------------------------------------------------
  // Demo Pattern: Log Style
  // ----------------------------------------------------------------
  void _showLogStyleSnackBar() {
    HyperSnackbar.show(
      title: 'System Log #$_logCount',
      message: 'Newest item is appended to the bottom.',

      position: HyperSnackPosition.top,
      newestOnTop: false, // 下に追加していく
      enterAnimationType: HyperSnackAnimationType.fromTop,

      // コンソール風のデザイン
      backgroundColor: Colors.black87,
      borderRadius: 4.0,
      margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 8),
      icon: const Icon(Icons.terminal, size: 16, color: Colors.greenAccent),
      titleStyle: const TextStyle(
        fontFamily: 'Courier',
        color: Colors.greenAccent,
        fontWeight: FontWeight.bold,
      ),

      // ★ 最大表示数を5に制限（6個目が出ると1個目が消える）
      maxVisibleCount: 5,
      context: context,
    );
    _logCount++;
  }

  // ----------------------------------------------------------------
  // UI Helpers
  // ----------------------------------------------------------------
  Widget _buildButton(String label, Color color, VoidCallback onTap) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 6.0),
      child: ElevatedButton(
        onPressed: onTap,
        style: ElevatedButton.styleFrom(
          backgroundColor: color,
          foregroundColor: Colors.white,
          padding: const EdgeInsets.symmetric(vertical: 16),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
          elevation: 5,
        ),
        child: Text(
          label,
          style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }

  Widget _buildHeader(String title) {
    return Padding(
      padding: const EdgeInsets.only(top: 24.0, bottom: 12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const Divider(),
        ],
      ),
    );
  }
}

// ----------------------------------------------------------------
// Detail Page (Navigation Target)
// ----------------------------------------------------------------
class DetailPage extends StatelessWidget {
  final String title;
  const DetailPage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Detail Page'),
        backgroundColor: const Color(0xFF1F1F1F),
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.info_outline, size: 100, color: Colors.grey),
            const SizedBox(height: 20),
            Text(
              'Detail for:\n$title',
              textAlign: TextAlign.center,
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 40),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}