awesome_page_transitions

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，提供視覺上吸引人且可自訂的頁面轉場效果，用於在螢幕之間導航。它透過流暢、動畫化的轉場效果提升使用者體驗，非常適合需要動態導航流程的應用程式。此套件支援多種轉場效果，且容易整合到現有的 Flutter 項目中。設計時著重於簡潔與效能，讓開發者無需複雜程式碼即可建立引人入勝的介面。其開源性質允許社群貢獻與透明度。

適用情境

建立互動式應用程式入門流程
設計引人入勝的產品展示螢幕
增強電子商務應用中的導航
建構沉浸式敘事介面
為儀表板過渡添加視覺效果

主要特色

多種內建轉場動畫
可自定的過渡持續時間和曲線
與導航器輕鬆整合
同時支援 iOS 和 Android
輕量且高效

適合對象

尋求精緻UI過渡效果的開發者
視覺參與度高的應用
Flutter 初學者探索動畫
需要最少設定即可實現高級效果的項目
創意設計師實施獨特的導航模式

使用建議

僅限基本頁面轉場（無複雜元件轉場）
Web 平台無官方支援
可能需要在舊設備上進行效能調校
不適合高度複雜的狀態轉換
文件對於進階用法的說明可能更詳細一些

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Awesome Page Transitions

Awesome page transitions for Flutter

Screenshots

Installing

dependencies:
  awesome_page_transitions: ^1.0.0

Demo

Demo application available at https://awesome-page-transitions.web.app/

Using

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome Page Transitions Demo',
      home: MyHomePage(title: 'Awesome Page Transitions Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        alignment: Alignment.center,
        color: Colors.yellow,
        child: RaisedButton(
          color: Colors.red,
          child: Text("Open"),
          onPressed: () => Navigator.push(
            context,
            AwesomePageRoute(
              transitionDuration: Duration(milliseconds: 600),
              exitPage: widget,
              enterPage: SecondScreen(),
              transition: CubeTransition(),
            ),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() => _SecondScreenState();
}

class _SecondScreenState extends State<SecondScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Second Screen"),),
      body: Container(
        alignment: Alignment.center,
        color: Colors.red,
        child: RaisedButton(
          color: Colors.yellow,
          onPressed: () => Navigator.pop(context),
          child: Text("Go Back"),
        ),
      ),
    );
  }
}

搜尋套件、儲存庫與 APP 分類

安裝套件