Flutter:尝试撸一个具有惯性跟阻力的旋转控件或用传感器控制其旋转

本文介绍了一款可模拟真实世界惯性和阻力效果的旋转Widget的开发过程,通过学习数学公式和传感器应用,最终实现了接近生活的旋转效果,并将其实现为Dart Packages,方便在Flutter项目中使用。

来源

一直都想写一个可以转动的Widget,并且可以近似的模拟生活中的惯性跟阻力,因为设计到一些数学公式,作者还去请教了我的高中老师,最后学了点传感器,就直接外加个可选择传感器控制了

效果

实现方法

逻辑部分比较复杂,作者写了好几天,最后干脆直接写了一个Dart Packages上传到了Pub,里面有大量的注释,代码还很不简化体谅一下,欢迎体验

将其添加到包的pubspec.yaml文件中:

dependencies:
  rotated_view: ^1.0.1
复制代码

然后导入包

import 'package:rotated_view/rotated_view.dart';
复制代码

代码部分

import 'dart:async';

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
StreamSubscription _subscription;

@override
void initState() {
  super.initState();
}

@override
void dispose() {
  if (_subscription != null) {
    _subscription.cancel();
  }
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    color: Colors.black,
    home: Scaffold(
      body: Center(
          child: Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(0, 100, 0, 0),
          ),
          Container(
            width: 400,
            height: 400,
            child: RotatedView(
              child: Image.asset("images/launcher_background.png"),
              usesensor: false,
              issame: false,
              haveinertia: true,
            ),
          ),
          Text(""),
        ],
      )),
    ),
  );
}
}
复制代码

我的FlutterGithub

转载于:https://juejin.im/post/5c3b352d5188253a317b50d1

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值