Flutter双形态动画插件duomorphsim的使用

Flutter 双形态动画插件 duomorphsim 的使用

本包帮助你为一个容器（一次）添加玻璃态+新拟态效果。

使用方法

DuoMorphicCard 需要四个参数：child、width、height 和 radius。

DuoMorphicCard(
  height: 200,
  width: 200,
  blur: 5,
  innerShadowColor: Colors.grey,
  radius: BorderRadius.circular(10),
  cardBackgroundColor: Colors.white,
  opacity: 0.5,
  offset: Offset(-5, -5),
  child: Center(
    child: Text('Hello World'),
  ),
),

完整示例

以下是一个完整的示例代码，展示如何在 Flutter 应用程序中使用 duomorphsim 插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Duomorphism Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Duomorphism Demo'),
      ),
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(
                    'https://mir-s3-cdn-cf.behance.net/project_modules/1400/a4b33886128681.5d909dad47ded.jpg'),
                fit: BoxFit.fill)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 DuoMorphicCard
            DuoMorphicCard(
              height: 200,
              width: 200,
              blur: 5,
              innerShadowColor: Colors.grey,
              radius: BorderRadius.circular(10),
              cardBackgroundColor: Colors.white,
              opacity: 0.5,
              offset: Offset(-5, -5),
              child: Center(
                child: Text('Hello World'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter双形态动画插件duomorphsim的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，下面是一个关于如何在Flutter中使用duomorphism插件来实现双形态动画的示例代码。duomorphism插件允许你在Flutter应用中创建两种形态之间的平滑过渡动画。

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

dependencies:
  flutter:
    sdk: flutter
  duomorphism: ^latest_version  # 请替换为最新版本号

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

接下来是一个简单的示例代码，展示如何使用Duomorphic widget来实现双形态动画：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Duomorphism Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Duomorphism Demo'),
        ),
        body: Center(
          child: DuomorphicExample(),
        ),
      ),
    );
  }
}

class DuomorphicExample extends StatefulWidget {
  @override
  _DuomorphicExampleState createState() => _DuomorphicExampleState();
}

class _DuomorphicExampleState extends State<DuomorphicExample> 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 SizedBox(
      width: 200,
      height: 200,
      child: Duomorphic(
        animation: _controller,
        start: Container(
          color: Colors.blue,
          child: Center(child: Text('Start', style: TextStyle(color: Colors.white))),
        ),
        end: Container(
          color: Colors.red,
          child: Center(child: Text('End', style: TextStyle(color: Colors.white))),
        ),
        alignment: Alignment.center,
        curve: Curves.easeInOutQuad,
      ),
    );
  }
}

在这个示例中：

  1. DuomorphicExample是一个有状态的widget，它使用SingleTickerProviderStateMixin来管理动画控制器。
  2. AnimationController用于控制动画的时长和循环。
  3. Duomorphic widget接受几个参数：
    • animation：动画控制器。
    • start：动画开始时的widget。
    • end：动画结束时的widget。
    • alignment：动画widget的对齐方式。
    • curve：动画的插值曲线。

当你运行这个应用时，你会看到一个在蓝色和红色容器之间平滑过渡的动画，上面分别显示“Start”和“End”文本。动画会自动反复进行。

这个示例展示了duomorphism插件的基本用法，你可以根据需要进一步自定义动画效果、添加更多复杂的widget或调整动画参数。

回到顶部