Flutter动态应用栏插件animated_appbar的使用

Flutter动态应用栏插件animated_appbar的使用

animated_appbar 是一个Flutter插件，允许你创建一个可以随着页面导航动态变化高度的应用栏。这个插件非常适合那些希望在页面切换时实现流畅动画效果的应用。

插件功能

• 动态改变应用栏高度：在页面导航时，应用栏的高度可以根据需要动态调整。
• 自定义应用栏内容：你可以根据需求自定义应用栏的内容，包括图标、文本等。
• 平滑过渡动画：插件提供了平滑的过渡动画，确保用户在页面切换时有良好的视觉体验。

使用方法

要使用 animated_appbar 插件，你需要遵循以下步骤：

1. 导入依赖： 在 pubspec.yaml 文件中添加 animated_appbar 依赖：

   dependencies:
     animated_appbar: ^最新版本号
   

2. 创建主应用程序： 你需要使用 BaseLayout 和 AnimatedAppBar 来构建你的应用。BaseLayout 是 animated_appbar 插件提供的一个基础布局组件，必须使用它来包裹你的页面。

3. 设置初始页面和应用栏： 在 BaseLayout 中，你可以通过 appBar 属性设置初始的应用栏，并通过 scaffold 属性设置初始页面。

4. 页面导航： 当你从一个页面导航到另一个页面时，可以使用 routePage 或 routePageWithNewAppBar 方法。如果你想要在新页面中显示不同的应用栏，可以使用 routePageWithNewAppBar 方法并传递一个新的应用栏小部件。

5. 返回上一页： 使用 previousPage() 方法可以返回到上一个页面，并自动恢复之前的应用栏状态。

完整示例代码

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

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

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

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // 必须使用 BaseLayout 来包裹整个应用
      home: BaseLayout(
        // 设置初始应用栏
        appBar: AnimatedAppBar(
          initHeight: 135.0, // 初始应用栏高度
          backgroundColor: Color(0xff7a7ad1), // 应用栏背景颜色
          child: Container(
            key: UniqueKey(), // 必须设置唯一的 key，以确保动画效果
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Icon(
                    Icons.apps,
                    color: Colors.white,
                    size: 20.0,
                  ),
                  Text(
                    "You can customise this Area",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                    ),
                  ),
                  Icon(
                    Icons.manage_search,
                    color: Colors.white,
                    size: 20.0,
                  ),
                ],
              ),
            ),
          ),
        ),
        // 设置初始页面为 Page1
        scaffold: Page1(),
      ),
    );
  }
}

// Page1 页面
class Page1 extends StatelessWidget with RoutePage {
  // 定义 Page2 的新应用栏
  Widget newAppBar = Container(
    key: UniqueKey(), // 必须设置唯一的 key，以确保动画效果
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "AppBar changed!!",
          style: TextStyle(
            color: Color(0xfff7f4cc),
            fontSize: 20,
          ),
        ),
        Text(
          "You can customise here too..🔥",
          style: TextStyle(
            color: Color(0xfff7f4cc),
            fontSize: 20,
          ),
        ),
      ],
    ),
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Page 1 😄",
              style: TextStyle(fontSize: 50),
            ),
            SizedBox(height: 5),
            Container(
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(8)),
              ),
              padding: EdgeInsets.all(10.0),
              child: TextButton(
                // 导航到 Page2 并设置新的应用栏
                onPressed: () => routePageWithNewAppBar(Page2(), newAppBar),
                child: Text(
                  "Click here to navigate Page2!",
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// Page2 页面
class Page2 extends StatelessWidget with RoutePage {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Page 2 🚩",
              style: TextStyle(fontSize: 50),
            ),
            SizedBox(height: 5),
            Container(
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.all(Radius.circular(8)),
              ),
              padding: EdgeInsets.all(10.0),
              child: TextButton(
                // 返回到 Page1
                onPressed: () => previousPage(),
                child: Text(
                  "back to Page1",
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}