Flutter动态调整AppBar插件dynamic_appbar的使用

Flutter动态调整AppBar插件dynamic_appbar的使用

动态AppBar介绍

动态AppBar插件dynamic_appbar增强了用户界面体验，它可以在滚动时动态隐藏应用栏，并在滚动回顶部时重新出现。该插件提供了可定制的功能，如动态标题、左右按钮和可调的应用栏高度和颜色，使其成为Flutter应用程序导航的灵活解决方案。

特性

• 自动隐藏当滚动下时的应用栏
• 当滚动上时重新出现应用栏
• 可定制的标题、左右按钮
• 调整应用栏的高度和颜色

开始使用

要使用此包，请将dynamic_appbar添加到您的pubspec.yaml文件中：

dependencies:
  dynamic_appbar: ^1.0.4

使用示例

以下是一个基本示例，展示如何使用DynamicAppBarView：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: DynamicAppBarView(
          title: Text('My App'),
          leftButton: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
              // Handle menu button press
            },
          ),
          rightButton: IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {
              // Handle settings button press
            },
          ),
          child: ListView.builder(
            itemCount: 500,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        ),
      ),
    );
  }
}

贡献指南

欢迎贡献！如果您发现bug或有功能请求，请在GitHub仓库上打开问题： open an issue

也欢迎提交pull requests。

许可证

此项目采用3-Clause BSD License许可。更多详情请参阅LICENSE文件。

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamic AppBar Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  static const double _appBarHeight = 60;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      // The DynamicAppBarView is the widget that will wrap the view with the dynamic appbar
      body: DynamicAppBarView(
        // The title, widget displayed in the center of the appbar
        title: const Text('Dynamic AppBar',
            style: TextStyle(color: Colors.white, fontSize: 23)),
        // The height of the appbar
        appBarHeight: _appBarHeight,
        // The backgroundColor of the appbar
        appBarColor: Colors.blue,
        // The widget at the left of the appbar
        leftButton: const Icon(Icons.star, color: Colors.white),
        // The widget at the right of the appbar
        rightButton: IconButton(
            onPressed: () {/* Triggers function */},
            icon: const Icon(Icons.menu, color: Colors.white)),
        // The child, the view that will be wrapped by the DynamicAppbarView
        child: ListView.builder(
          padding: const EdgeInsets.only(top: _appBarHeight),
          itemCount: 100,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }
}