Flutter文本动画过渡插件hero_text的使用

Flutter文本动画过渡插件hero_text的使用

Hero 效果用于文本小部件的常用词（类似于keynote中的magic move效果）。

特性

HeroText

使用方法

使用方式简单且类似Hero，但显然子组件应该是Text。别忘了增加transitionDuration（查看示例以了解更多信息）。

HeroText(
   tag: 'tag',
   child: Text(
       'To be, or not to be, that is the question',
       style: Theme.of(context).textTheme.headline5,
   ),
)

完整示例代码

import 'package:flutter/material.dart' hide Hero;
import 'package:hero_text/hero_text.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Hero Text demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Center(
        child: PageA(),
      ),
    );
  }
}

class PageA extends StatelessWidget {
  const PageA({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      color: Colors.yellow,
      child: GestureDetector(
          onTap: () {
            // 导航到PageB，并设置过渡动画
            Navigator.push(
              context,
              PageRouteBuilder(
                  pageBuilder: (c, a1, a2) => const PageB(), // 指定要跳转的目标页面
                  transitionsBuilder: (c, anim, a2, child) =>
                      FadeTransition(opacity: anim, child: child), // 设置过渡动画
                  transitionDuration: const Duration(milliseconds: 3000), // 设置过渡持续时间
                  reverseTransitionDuration:
                      const Duration(milliseconds: 1000)), // 设置反向过渡持续时间
            );
          },
          child: HeroText( // HeroText 小部件
            tag: 'tag', // 设置标记，用于匹配过渡的源和目标
            child: Text(
              'Any fortunes you wish for yourself,', // 文本内容
              style: Theme.of(context).textTheme.headline5, // 设置文本样式
            ),
          )),
    ));
  }
}

class PageB extends StatelessWidget {
  const PageB({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            padding: const EdgeInsets.only(top: 100), // 设置容器内边距
            color: Colors.blue, // 设置背景颜色
            child: Center(
                child: HeroText( // HeroText 小部件
                    tag: 'tag', // 设置标记，用于匹配过渡的源和目标
                    child: Text(
                      'wish it for others too', // 文本内容
                      style: Theme.of(context).textTheme.headline1, // 设置文本样式
                    )))));
  }
}

更多关于Flutter文本动画过渡插件hero_text的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文本动画过渡插件hero_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用hero_text插件来实现文本动画过渡的示例代码。hero_text插件允许你在Flutter应用中实现文本内容的平滑过渡动画，类似于Hero动画，但专门用于文本。

首先，确保你的pubspec.yaml文件中已经添加了hero_text依赖：

dependencies:
  flutter:
    sdk: flutter
  hero_text: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，我们来看一个完整的示例代码，展示如何使用hero_text来实现文本动画过渡。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hero Text Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hero Text Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailScreen()),
            );
          },
          child: Text('Go to Detail Screen'),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: HeroTextTransition(
          tag: 'hero-text-tag',
          child: Text(
            'This is a hero text transitioning from Home Screen',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

// 包装一个HeroTextWidget以在HomeScreen中显示
class HomeScreenWithHeroText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen with Hero Text'),
      ),
      body: Center(
        child: HeroText(
          tag: 'hero-text-tag',
          text: 'This is a hero text transitioning to Detail Screen',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

// 注意：在实际应用中，为了演示完整的过渡效果，你可能需要将HomeScreen替换为HomeScreenWithHeroText，
// 或者在HomeScreen的某个逻辑中动态显示HeroText，这里为了简单起见，我们分别展示了两个屏幕。

说明：

  1. HomeScreen: 这是我们的主屏幕，包含一个按钮，点击按钮会导航到DetailScreen。
  2. DetailScreen: 这是我们的详情屏幕，包含一个HeroTextTransition小部件，它实现了文本的动画过渡效果。
  3. HeroText 和 HeroTextTransition: HeroText用于在源屏幕上显示文本，并赋予它一个唯一的tag。HeroTextTransition用于在目标屏幕上接收这个tag，并显示相应的文本，同时实现动画过渡。

注意，在实际应用中，你可能需要在HomeScreen中直接使用HeroText，而不是上面的HomeScreen示例，以便能够看到完整的过渡效果。上面的代码是为了演示目的而分别展示了两个屏幕。

此外，由于hero_text插件的API可能会随着版本更新而变化，请参考最新的官方文档以确保代码的正确性和兼容性。

回到顶部