Flutter屏幕遮罩动画插件curtain的使用

Curtain

curtain 是一个用于创建动态响应式仪表板的 Flutter 插件。它易于使用且完全可定制。

效果图

参数说明

数据类型	参数名	详情	默认值
List	items	页面和侧边栏操作列表。	`null`
CurtainSideBarConfig?	curtainSideBarConfig	侧边栏配置。	`null`
bool	extendBody	是否扩展页面主体到侧边栏边缘。	`false`
void Function(int page)?	onPageChange	当页面变化时调用的函数。	`null`
ScaffoldConfig?	scaffoldConfig	主页面框架配置。	`null`
TextDirection?	direction	页面方向。	`null`
CurtainPageController?	controller	用于控制窗帘页面的对象。	`null`

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        iconTheme: IconThemeData(size: 22),
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CurtainPageController curtainPageController = CurtainPageController(initialPage: 1);

  // 获取文本内容
  String getText(int page) {
    switch (page) {
      case 0:
        return '首页';
      case 1:
        return '地图页';
      case 2:
        return '个人页';
      case 3:
        return '退出';
      default:
        return '未定义';
    }
  }

  // 获取图标
  IconData getIcon(int page) {
    switch (page) {
      case 0:
        return Icons.home;
      case 1:
        return Icons.map;
      case 2:
        return Icons.person;
      case 3:
        return Icons.logout;
      default:
        return Icons.home;
    }
  }

  // 获取头部文本
  String getHeaderText(int page) {
    switch (page) {
      case 0:
        return '首页头部';
      case 1:
        return '地图页头部';
      case 2:
        return '个人页头部';
      default:
        return '未定义';
    }
  }

  // 获取缩放后的头部文本
  String getShrinkHeaderText(int page) {
    switch (page) {
      case 0:
        return '首页';
      case 1:
        return '地图';
      case 2:
        return '个人';
      default:
        return '未定义';
    }
  }

  // 获取底部文本
  String getFooterText(int page) {
    switch (page) {
      case 0:
        return '首页底部';
      case 1:
        return '地图底部';
      case 2:
        return '个人底部';
      default:
        return '未定义';
    }
  }

  // 获取缩放后的底部文本
  String getShrinkFooterText(int page) {
    switch (page) {
      case 0:
        return '首页';
      case 1:
        return '地图';
      case 2:
        return '个人';
      default:
        return '未定义';
    }
  }

  [@override](/user/override)
  void initState() {
    curtainPageController.addListener(() {
      print(curtainPageController.previousPage);
      print(curtainPageController.page);
    });
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final pageTextStyle = TextStyle(fontSize: 24, fontWeight: FontWeight.bold);
    final headerTextStyle = TextStyle(fontSize: 22, fontWeight: FontWeight.bold);
    final actionTextStyle = TextStyle(fontSize: 16);
    return Curtain(
      extendBody: true,
      controller: curtainPageController,
      curtainSideBarConfig: CurtainSideBarConfig(
        selectedActionXOffset: 10,
        headerBuilder: (isExpand, page) => Container(
          padding: const EdgeInsets.only(top: 32),
          child: isExpand
              ? Text(
                  getHeaderText(page),
                  style: headerTextStyle,
                )
              : Text(
                  getShrinkHeaderText(page),
                  style: headerTextStyle,
                ),
        ),
        footerBuilder: (isExpand, page) => Container(
          padding: const EdgeInsets.only(bottom: 32),
          child: isExpand
              ? Text(
                  getFooterText(page),
                  style: headerTextStyle,
                )
              : Text(
                  getShrinkFooterText(page),
                  style: headerTextStyle,
                ),
        ),
      ),
      scaffoldConfig: ScaffoldConfig(
        drawerEdgeDragWidth: 50,
        persistentWidget: PersistentWidget(
          child: Container(
            width: 250,
            height: 150,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(bottomLeft: Radius.circular(8)),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.2),
                  blurRadius: 10,
                  spreadRadius: 1,
                  offset: Offset(-2, 2),
                ),
              ],
            ),
            alignment: Alignment.center,
            child: Text('持久化组件'),
          ),
          alignment: Alignment.topRight,
        ),
      ),
      items: List.generate(
        4,
        (page) => CurtainItem(
          page: Container(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  getText(page),
                  style: pageTextStyle,
                ),
                if (page == 0) ...[
                  SizedBox(height: 16),
                  ElevatedButton(
                    onPressed: () {
                      curtainPageController.goToPage(2);
                    },
                    style: ElevatedButton.styleFrom(
                      primary: Colors.green,
                      padding: EdgeInsets.all(16),
                    ),
                    child: Text(
                      '去个人页',
                      style: TextStyle(fontSize: 16),
                    ),
                  )
                ]
              ],
            ),
          ),
          action: CurtainAction(
              icon: Icon(getIcon(page)),
              text: Text(
                getText(page),
                style: actionTextStyle,
              ),
              onTap: page == 3
                  ? () {
                      showDialog(
                        context: context,
                        builder: (context) => SimpleDialog(
                          children: [
                            Padding(
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 24, vertical: 16),
                              child: Text(
                                '你确定要退出吗？',
                                style: TextStyle(fontSize: 16),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 8),
                              child: Row(
                                children: [
                                  TextButton(
                                    child: Text('是'),
                                    onPressed: () => Navigator.pop(context),
                                  ),
                                  TextButton(
                                    child: Text('否'),
                                    onPressed: () => Navigator.pop(context),
                                  )
                                ],
                              ),
                            )
                          ],
                          title: Text(
                            '退出',
                            style: TextStyle(fontSize: 18),
                          ),
                        ),
                      );
                    }
                  : null),
        ),
      ),
    );
  }
}

更多关于Flutter屏幕遮罩动画插件curtain的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼

更多关于Flutter屏幕遮罩动画插件curtain的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用curtain插件来实现屏幕遮罩动画的示例代码。curtain插件允许你创建类似窗帘或百叶窗效果的动画遮罩。

首先，你需要在你的pubspec.yaml文件中添加curtain依赖：

dependencies:
  flutter:
    sdk: flutter
  curtain: ^最新版本号  # 请替换为实际最新版本号

然后运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中创建一个使用Curtain组件的示例页面。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Curtain Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CurtainDemoPage(),
    );
  }
}

class CurtainDemoPage extends StatefulWidget {
  @override
  _CurtainDemoPageState createState() => _CurtainDemoPageState();
}

class _CurtainDemoPageState extends State<CurtainDemoPage> with SingleTickerProviderStateMixin {
  late CurtainController _curtainController;

  @override
  void initState() {
    super.initState();
    _curtainController = CurtainController();
  }

  @override
  void dispose() {
    _curtainController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Curtain Animation Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Curtain(
              controller: _curtainController,
              slatColor: Colors.black.withOpacity(0.5),
              slatCount: 10,
              slatHeight: 50.0,
              child: Container(
                color: Colors.white,
                child: Center(
                  child: Text(
                    'Content behind the curtain',
                    style: TextStyle(fontSize: 24),
                  ),
                ),
              ),
            ),
            SizedBox(height: 20.0),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  if (_curtainController.isOpened) {
                    _curtainController.close();
                  } else {
                    _curtainController.open();
                  }
                });
              },
              child: Text(_curtainController.isOpened ? 'Close Curtain' : 'Open Curtain'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

我们定义了一个CurtainDemoPage页面，它包含一个Curtain组件和一个按钮。
Curtain组件使用CurtainController来控制其打开和关闭状态。
Curtain组件的属性包括遮罩板（slat）的颜色（slatColor）、数量（slatCount）和高度（slatHeight）。
按钮点击时会调用CurtainController的open和close方法来控制遮罩动画。

运行这个示例，你会看到一个带有窗帘动画效果的页面，点击按钮可以打开或关闭窗帘。

请确保你已经正确安装并导入了curtain插件，并根据需要调整遮罩板的样式和动画效果。