Flutter Animated Book Widget

banner

Overview

Flutter Animated Book Widget is a Flutter package that allows you to effortlessly create an animated book widget UI with dynamic content rendering.

Preview

Installation

Add animated_book_widget to your pubspec.yaml dependencies and import it:

dependencies:
  animated_book_widget: <latest_version>

Import the package in your Dart file:

import 'package:animated_book_widget/animated_book_widget.dart';

How to Use

Basic Usage

AnimatedBookWidget(
  cover: _Cover,
  content: _Content,
  size: const Size.fromWidth(160),
);

Parameters

You can customize the widget with various parameters:

AnimatedBookWidget(
  cover: _Cover,
  content: _Content,
  size: const Size.fromWidth(160),
  padding: const EdgeInsets.only(right: 10),
  blurRadius: 8,
  spreadRadius: 0.1,
  backgroundBlurOffset: Offset.zero,
  backgroundColor: color.withOpacity(0.5),
  backgroundShadowColor: color.withOpacity(0.075),
  curve: Curves.linear,
  animationDuration: Duration(milliseconds: 500),
  reverseAnimationDuration: Duration(milliseconds: 500),
);

Builder

For more complex animations, you can use the builder method:

AnimatedBookWidget.builder(
  cover: _Cover,
  size: Size(200, 300),
  contentChild: _Content,
  contentBuilder: (context, animation, child) {
    return Transform(
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001)
        ..rotateY(animation.value),
      alignment: Alignment.center,
      child: child,
    );
  },
);

Examples

Check out the example app in the example directory or the ‘Example’ tab on pub.dartlang.org for a more complete example.

Example Code

Here is a simple example to get you started:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Animated Book Widget Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final Color color = Colors.grey;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Book Widget Example'),
      ),
      body: Center(
        child: AnimatedBookWidget(
          cover: Container(
            color: Colors.red,
            child: Center(child: Text('Cover')),
          ),
          content: Container(
            color: Colors.green,
            child: Center(child: Text('Content')),
          ),
          size: Size(200, 300),
          padding: EdgeInsets.all(10),
          blurRadius: 8,
          spreadRadius: 0.1,
          backgroundBlurOffset: Offset.zero,
          backgroundColor: color.withOpacity(0.5),
          backgroundShadowColor: color.withOpacity(0.075),
          curve: Curves.linear,
          animationDuration: Duration(milliseconds: 500),
          reverseAnimationDuration: Duration(milliseconds: 500),
        ),
      ),
    );
  }
}

Credit

This package’s book animation is inspired by this Dribbble art.

Main Contributors

_{Brayan Cantos}	_diegoveloper	_ecarlosdev	_{Roger Bacab}	_{Paolo Joaquin Pinto}	_{Daniel Coyula}	_{Williams M. Torres}

Awesome Mobile Libraries

Check out our other available d-veloper libraries.

License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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

sinazl 1楼•1 天前

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

当然，下面是一个关于如何使用 animated_book_widget Flutter 插件的示例代码。这个插件通常用于创建书籍翻页动画效果。请确保你已经在 pubspec.yaml 文件中添加了 animated_book_widget 依赖。

首先，确保你的 pubspec.yaml 文件中包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_book_widget: ^最新版本号  # 请替换为实际的最新版本号

然后运行 flutter pub get 来获取依赖。

接下来是一个简单的示例代码，展示如何使用 animated_book_widget 创建一个书籍翻页动画效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Book Widget Demo'),
        ),
        body: Center(
          child: AnimatedBookWidgetDemo(),
        ),
      ),
    );
  }
}

class AnimatedBookWidgetDemo extends StatefulWidget {
  @override
  _AnimatedBookWidgetDemoState createState() => _AnimatedBookWidgetDemoState();
}

class _AnimatedBookWidgetDemoState extends State<AnimatedBookWidgetDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      child: Container(
        height: 400,
        width: 300,
        decoration: BoxDecoration(
          color: Colors.grey[200],
          borderRadius: BorderRadius.circular(10),
        ),
        child: Center(child: Text('Cover Page')),
      ),
      builder: (context, child) {
        return AnimatedBookWidget(
          animation: _controller,
          frontPage: Container(
            color: Colors.blue,
            child: Center(child: Text('Front Page')),
          ),
          backPage: Container(
            color: Colors.green,
            child: Center(child: Text('Back Page')),
          ),
          curve: Curves.easeInOut,
        );
      },
    );
  }
}

代码说明：

依赖导入：
- 导入 flutter 和 animated_book_widget 包。
主应用：
- MyApp 类是主应用入口，它包含一个 MaterialApp 和一个 Scaffold，其中包含一个 AnimatedBookWidgetDemo 小部件。
动画演示小部件：
- AnimatedBookWidgetDemo 是一个有状态的小部件，它包含一个 AnimationController 用于控制翻页动画。
- initState 方法中初始化 AnimationController 并设置动画的持续时间和循环模式。
- dispose 方法中释放动画控制器资源。
- build 方法中使用 AnimatedBuilder 构建动画小部件。AnimatedBuilder 根据动画状态构建 AnimatedBookWidget。
AnimatedBookWidget：
- frontPage 和 backPage 属性分别定义了翻页动画的正面和背面内容。
- animation 属性接收动画控制器。
- curve 属性定义了动画的曲线，这里使用的是 Curves.easeInOut。

运行这个示例代码，你将看到一个带有翻页动画效果的页面，动画会在正面页和背面页之间来回切换。你可以根据需要调整动画的持续时间、曲线以及页面内容。