Flutter弹出卡片动画插件 flutter_popup_card 的使用

flutter_popup_card 是一个轻量级的插件，用于在您的主应用之上创建一个可以弹出的卡片或自定义小部件。这个插件类似于Flutter内置的showDialog函数，但提供了更多的灵活性和动画效果。

示例展示

使用方法

基本用法

要显示一个弹出卡片，请使用showPopupCard函数，并传入必要的参数。下面是一个简单的示例，展示了如何显示一个黄色背景的弹出卡片：

showPopupCard(
  context: context,
  builder: (context) {
    return PopupCard(
      elevation: 8,
      color: Colors.yellow,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12.0),
      ),
      child: const Padding(
        padding: EdgeInsets.all(16.0),
        child: Text('This is a popup card'),
      ),
    );
  },
  offset: const Offset(-16, 70),
  alignment: Alignment.topRight,
  useSafeArea: true,
  dimBackground: true,
);

完整示例代码

以下是一个更完整的示例，包括了一个带有用户信息和注销按钮的弹出卡片：

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter_popup_card/flutter_popup_card.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo app',
      theme: ThemeData(),
      darkTheme: ThemeData.dark(),
      home: const MyHomePage(title: 'Demo app'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    required this.title,
    super.key,
  });

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late String message;

  @override
  void initState() {
    super.initState();
    message = 'Flutter popup card demo app. Click the account icon in the top right.';
  }

  Future<void> _accountClicked() async {
    final result = await showPopupCard<String>(
      context: context,
      builder: (context) {
        return PopupCard(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
            side: BorderSide(
              color: Theme.of(context).colorScheme.outlineVariant,
            ),
          ),
          child: const PopupCardDetails(),
        );
      },
      offset: const Offset(-8, 60),
      alignment: Alignment.topRight,
      useSafeArea: true,
      dimBackground: true,
    );
    if (result == null) return;
    setState(() {
      message = result;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
        actions: [
          IconButton(
            onPressed: _accountClicked,
            icon: const Icon(Icons.account_circle_rounded),
          ),
        ],
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(32.0),
          child: Text(
            message,
            textAlign: TextAlign.center,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            message = 'Reset.';
          });
        },
        child: const Icon(Icons.restore),
      ),
    );
  }
}

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

  void _logoutPressed(BuildContext context) {
    Navigator.of(context).pop('Logout pressed');
  }

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxWidth: math.min(450, MediaQuery.sizeOf(context).width - 16.0),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(height: 24.0),
          CircleAvatar(
            backgroundColor: Theme.of(context).colorScheme.primaryContainer,
            radius: 36,
            foregroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
            child: Text(
              'AB',
              style: Theme.of(context).textTheme.titleLarge,
            ),
          ),
          const SizedBox(height: 4.0),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Text(
              'Able Bradley',
              style: Theme.of(context).textTheme.titleMedium,
            ),
          ),
          const SizedBox(height: 2.0),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Text(
              'able.bradley@gmail.com',
              style: Theme.of(context).textTheme.bodySmall,
            ),
          ),
          const SizedBox(height: 8.0),
          const Divider(),
          TextButton(
            onPressed: () => _logoutPressed(context),
            style: TextButton.styleFrom(
              foregroundColor: Theme.of(context).colorScheme.error,
            ),
            child: const Text('Logout'),
          ),
          const SizedBox(height: 10.0),
        ],
      ),
    );
  }
}

以上代码演示了如何集成和使用flutter_popup_card插件来创建一个具有动画效果的弹出卡片。您可以根据需要调整卡片的设计和内容。完整示例可以在GitHub仓库中找到。