animated_page_transition

套件介紹

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

一個簡單的 Flutter 套件，用於在螢幕之間新增流暢且可自訂的頁面過渡效果。透過整合單一相依性，該套件讓開發者能以最少的設定實作動畫導航。此套件支援多個平台，包括 Android、iOS、Web、macOS、Windows 與 Linux，非常適合跨平台應用。透過直覺的 API，可在不需複雜設定的情況下輕鬆整合至現有專案。完美適用於透過流暢的螢幕過渡來提升使用者體驗。

適用情境

新增螢幕間的平滑導航
透過視覺反饋增強應用UI
建立吸引人的入門流程
實現自定義滑動/淡入淡出動畫
提升移動和網頁應用的使用者體驗

主要特色

透過 pubspec.yaml 實現輕鬆整合
支援多個平台
預建構的動畫類型
最小化樣板程式碼
可自訂的過渡持續時間和曲線
跨平台相容性

適合對象

初學者 Flutter 開發者
需要精緻導航的應用程式
以使用者體驗為導向的應用程式
跨平台專案
尋求快速動畫實現的開發者

使用建議

僅限基本轉換類型
無進階動畫自訂
依賴外部函式庫的穩定性
可能需要額外的樣式來實現複雜效果
不適合高度複雜的動畫序列

原始 README

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

Animated page transition

This package for page transition animation. With this package you can give have smooth page transitions in your apps. chack out the video given below!!!

Usage

Add animation_page_transition dependency into the pubspec.yaml file

then import package into the implementation file/s.

import 'package:animated_page_transition/animated_page_transition.dart';

You can implement animated page transition very easily.

First of all wrap your button with [PageTransitionButton] widget, example code is given below:

To use [PageTransitionButton] you have to add [TickerProviderStateMixin] into your widget.

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PageTransitionButton(
          vsync: this,
          child: Container(
            height: 120,
            width: 120,
            decoration: BoxDecoration(
              color: const Color(0xFFFF9735),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          nextPage: const SecondScreen(),
        ),
      ),
    );
  }
}

Then wrap the scaffold of the second screen with [PageTransitionReceiver] widget where you want to navigate it as given below:

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

  @override
  Widget build(BuildContext context) {
    return PageTransitionReceiver(
      scaffold: const Scaffold(
        backgroundColor: Color(0xFFFF9735),
      ),
    );
  }
}

And now you are ready to go!!!

Have fun and happy coding ;)

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

安裝套件