Flutter动态标题应用栏插件animated_title_appbar的使用

animated_title_appbar

animated_title_appbar 是一个用于在应用栏中实现标题动画的 Flutter 插件。

Features（功能）

• 此插件可用于实现应用栏标题的动画效果。
• 它是一个完全动态的包，可以轻松调整文本大小。

Getting started（开始使用）

要开始使用 animated_title_appbar，只需将 AnimatedTitleAppBar 小部件放置在 Scaffold 的 appBar 属性中，并传入一个 ScrollController。例如：

ScrollController scrollController = ScrollController();

AnimatedTitleAppBar(
  scrollController: scrollController,
  title: "Exercises",
  maxTextSize: 35,
  isBottomPadding: true,
  leftPadding: 20,
  minTextSize: 20,
  trailing: IconButton(onPressed: () {}, icon: Icon(Icons.search)),
)

Additional information（附加信息）

• 使用此插件可以轻松实现应用栏标题的动画效果。
• 它是一个完全动态的包，因此您可以轻松更改文本大小。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 animated_title_appbar 插件。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  ScrollController scrollController = ScrollController();

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // 使用 AnimatedTitleAppBar 实现动态标题动画
            AnimatedTitleAppBar(
              scrollController: scrollController,
              title: "APP",
              leading: IconButton(
                onPressed: () {},
                icon: Icon(Icons.add),
              ),
            ),
            Expanded(
              child: ListView.builder(
                controller: scrollController,
                itemCount: 50,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text("Hello $index"),
                  );
                },
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

代码说明

1. 导入插件：

   import 'package:animated_title_appbar/animated_title_appbar.dart';
   

2. 定义 ScrollController：

   ScrollController scrollController = ScrollController();
   

3. 使用 AnimatedTitleAppBar：

   AnimatedTitleAppBar(
     scrollController: scrollController,
     title: "APP",
     leading: IconButton(onPressed: () {}, icon: Icon(Icons.add)),
   )