Flutter倾斜交互插件flutter_tilt_widget的使用

如何使用 #

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

dependencies:
  flutter_tilt_widget_widget: ^<最新版本>

然后，添加以下导入语句（注意是 flutter_tilt_widget_widget 而不是 flutter_tilt_widget）：

import 'package:flutter_tilt_widget_widget/flutter_tilt.dart';

最后，将目标小部件包裹在 FlutterTilt 小部件中。

示例代码

example/lib/main.dart

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

import 'package:flutter/services.dart';
import 'package:flutter_tilt_widget_widget/flutter_tilt.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: FlutterTilt(
            // 添加倾斜效果的小部件
            child: Container(
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
                boxShadow: [
                  BoxShadow(
                    color: Colors.white.withOpacity(0.5),
                    blurRadius: 10,
                    offset: Offset(0, 5),
                  ),
                ],
              ),
              width: 200,
              height: 200,
              // 显示一个图片作为子组件
              child: Image.asset('assets/images/dash.png'),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter倾斜交互插件flutter_tilt_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter倾斜交互插件flutter_tilt_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_tilt_widget 是一个用于在 Flutter 中实现倾斜交互效果的插件。它可以让你的小部件在用户触摸或拖动时产生倾斜效果，从而增加应用的交互性和视觉吸引力。

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_tilt_widget: ^latest_version

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

基本用法

下面是一个简单的示例，展示如何使用 flutter_tilt_widget 来创建一个倾斜的卡片效果。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Tilt Widget Example'),
        ),
        body: Center(
          child: TiltWidget(
            child: Container(
              width: 200,
              height: 200,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.2),
                    blurRadius: 10,
                    offset: Offset(5, 5),
                  ),
                ],
              ),
              child: Center(
                child: Text(
                  'Tilt Me!',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

TiltWidget 提供了一些参数来定制倾斜效果：

  • child: 必需参数，指定要应用倾斜效果的子部件。
  • tiltAngle: 倾斜角度，默认值为 0.1。值越大，倾斜效果越明显。
  • tiltScale: 缩放比例，默认值为 1.0。值越大，缩放效果越明显。
  • tiltGlare: 是否启用光晕效果，默认值为 true。
  • tiltGlareColor: 光晕颜色，默认值为 Colors.white。
  • tiltGlareOpacity: 光晕透明度，默认值为 0.5。
  • tiltGlarePosition: 光晕位置，默认值为 Alignment.center。
  • tiltShadowsOffset: 阴影偏移量，默认值为 Offset(5, 5)。
  • tiltShadowsBlurRadius: 阴影模糊半径，默认值为 10。

示例代码

以下是一个更复杂的示例，展示了如何自定义 TiltWidget 的参数：

TiltWidget(
  tiltAngle: 0.2,
  tiltScale: 1.1,
  tiltGlare: true,
  tiltGlareColor: Colors.yellow,
  tiltGlareOpacity: 0.7,
  tiltGlarePosition: Alignment.topLeft,
  tiltShadowsOffset: Offset(10, 10),
  tiltShadowsBlurRadius: 20,
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.circular(15),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.3),
          blurRadius: 20,
          offset: Offset(10, 10),
        ),
      ],
    ),
    child: Center(
      child: Text(
        'Custom Tilt!',
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ),
);
回到顶部