Flutter插件intela的特性与使用方法

Flutter插件intela的特性

• 页面之间的过渡。
• 带有动画的过渡。
• 作为路由包使用。
• 动画速度可调。
• 启用或禁用返回页面。

开始使用Flutter插件intela

1. 导入插件

import 'package:intela/intela.dart';

2. 使用插件

示例代码：页面过渡

body: Center(
  child: MaterialButton(
    color: Colors.white,
    onPressed: () {
      // 使用RouteTransitions进行页面过渡
      RouteTransitions(
        context: context,
        child: const Page2(),
        animation: AnimationType.fadeIn, // 可以选择不同的动画类型
        duration: const Duration(milliseconds: 1000), // 设置动画持续时间
        // replacement: true // 是否替换当前页面
      );
    },
    child: const Text('Go to page2')
  )
),

使用方法

在/example文件夹中提供了更多例子。

示例代码：完整示例

import 'package:flutter/material.dart';
import 'package:intela/intela.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(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      initialRoute: 'page1',
      routes: {
        'page1': (context) => const Page1(), 
        'page2': (context) => const Page2(), 
      },
    );
  }
}

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

  [@override](/user/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: 1000), // 设置动画持续时间
              // replacement: true // 是否替换当前页面
            );
          },
          child: const Text('Go to page2')
        )
      ),
    );
  }
}

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

  [@override](/user/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('Page2'),
      ),
    );
  }
}