Flutter自定义路由过渡动画插件custom_route_transition_hfr的使用

此插件帮助实现页面之间的过渡动画。

使用示例

示例代码

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      debugShowCheckedModeBanner: false,
      initialRoute: 'page1',
      routes: {
        'page1': (_) => const Page1(),
        'page2': (_) => const Page2(),
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 1'),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: MaterialButton(
          color: Colors.white,
          onPressed: () {
            // 使用RouteTransitions进行页面跳转，并指定过渡动画类型和持续时间
            RouteTransitions(
              context: context,
              child: const Page2(),
              animation: AnimationType.fadeIn,
              duration: const Duration(milliseconds: 600),
            );
          },
          child: const Text('Go to Page 2'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 2'),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blueGrey,
      body: const Center(child: Text('Page 2')),
    );
  }
}

完整示例代码

`main.dart`

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      debugShowCheckedModeBanner: false,
      initialRoute: 'page1',
      routes: {
        'page1': (_) => const Page1(),
        'page2': (_) => const Page2(),
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 1'),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: MaterialButton(
          color: Colors.white,
          onPressed: () {
            // 使用RouteTransitions进行页面跳转，并指定过渡动画类型和持续时间
            RouteTransitions(
              context: context,
              child: const Page2(),
              animation: AnimationType.fadeIn,
              duration: const Duration(milliseconds: 600),
            );
          },
          child: const Text('Go to Page 2'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 2'),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blueGrey,
      body: const Center(child: Text('Page 2')),
    );
  }
}

通过上述代码，您可以实现从Page1到Page2的过渡动画。在点击按钮时，页面将淡入显示。

更多关于Flutter自定义路由过渡动画插件custom_route_transition_hfr的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼

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

custom_route_transition_hfr 是一个 Flutter 插件，用于自定义页面路由过渡动画。通过使用这个插件，你可以轻松地创建和实现各种页面切换的动画效果，而无需手动编写复杂的动画代码。以下是如何使用 custom_route_transition_hfr 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  custom_route_transition_hfr: ^1.0.0  # 请使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:custom_route_transition_hfr/custom_route_transition_hfr.dart';

3. 使用自定义路由过渡动画

你可以使用 CustomRouteTransition 来定义自定义的页面过渡动画。以下是一个简单的示例，展示了如何实现一个渐隐渐现的过渡动画：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Route Transition Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
      onGenerateRoute: (RouteSettings settings) {
        switch (settings.name) {
          case '/second':
            return CustomRouteTransition(
              builder: (_) => SecondPage(),
              transitionType: TransitionType.fade, // 使用渐隐渐现过渡
              duration: Duration(seconds: 1), // 动画持续时间
            );
          default:
            return null;
        }
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back to First Page'),
        ),
      ),
    );
  }
}

4. 自定义过渡动画

custom_route_transition_hfr 提供了多种内置的过渡动画类型，例如 fade、slide、scale 等。你可以通过 transitionType 参数来指定所需的过渡动画类型。

例如，使用滑动过渡动画：

return CustomRouteTransition(
  builder: (_) => SecondPage(),
  transitionType: TransitionType.slide, // 使用滑动过渡
  duration: Duration(seconds: 1), // 动画持续时间
);

5. 自定义动画参数

你还可以通过 transitionDuration 和 reverseDuration 参数来控制动画的持续时间，或者通过 curve 参数来指定动画曲线。

return CustomRouteTransition(
  builder: (_) => SecondPage(),
  transitionType: TransitionType.scale, // 使用缩放过渡
  duration: Duration(seconds: 2), // 动画持续时间
  curve: Curves.easeInOut, // 动画曲线
);

6. 自定义动画效果

如果你需要更复杂的动画效果，你可以通过 CustomRouteTransition 的 transitionBuilder 参数来自定义动画效果。

return CustomRouteTransition(
  builder: (_) => SecondPage(),
  transitionBuilder: (context, animation, secondaryAnimation, child) {
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: Tween<double>(begin: 0.5, end: 1.0).animate(animation),
        child: child,
      ),
    );
  },
  duration: Duration(seconds: 1),
);