利用Flutter制作一个摸鱼桌面版App

目录

win10商店上架了一款名为《摸鱼》的app，在下载打开之后，这个app会让你的电脑进入一个假更新的画面，让别人以为你的电脑正在升级，这时候你就可以休息一下，优雅地喝一杯咖啡。

顿时这个念头划过了我的脑海：好东西，但是我用的是 macbook，不能用这个应用。但是貌似我可以自己写一个？

准备工作

年轻最需要的就是行动力，想到就干，尽管我此刻正在理顺 devfest 的讲稿，但丝毫不妨碍我用 10 分钟写一个 app。于是我打出了一套组合拳：

flutter config --enable-macos-desktopflutter create --platforms=macos touch_fish_on_macos

一个支持 macos 的 flutter 项目就创建好了。（此时大约过去了 1 分钟）

开始敲代码

找到资源

我们首先需要一张高清无码的 图片，这里你可以在网上进行搜寻，有一点需要注意的是，使用 logo 要注意使用场景带来的版权问题。找到图片后，丢到 asts/apple-logo.png，并在 pubspec.yaml 中加上资源引用：

flutter:  u-material-design: true+ asts:+   - asts/apple-logo.png

思考布局

我们来观察一下 macos 的启动画面，有几个要点：

logo 在屏幕中间，固定大小约为 100dp；

logo 与进度条间隔约 100 dp；

进度条高度约 5dp，宽度约 200dp，圆角几乎完全覆盖高度，值部分为白色，背景部分为填充色+浅灰色边框。

（别问我为什么这些东西能观察出来，问就是天天教 ui 改 ui。）

确认了大概的布局模式，接下来我们开始搭布局。（此时大约过去了 2 分钟）

实现布局

首先将 logo 居中、着色、设定宽度为 100，上下间隔 100：

return center(  child: column(    mainaxisalignment: mainaxisalignment.center,    children: <widget>[      const spacer(),      padding(        padding: const edgeints.symmetric(vertical: 100),        child: image.ast(          'asts/apple-logo.png',          color: cupertin你是人间四月天ocolors.white, // 使用 cupertino 系列的白色着色          width: 100,        ),      ),      const spacer(),    ],  ),);

然后在下方放一个相对靠上的进度条：

return center(  child: column(    mainaxisalignment: mainaxisalignment.center,    children: <widget>[      const spacer(),      padding(        padding: const edgeints.symmetric(vertical: 100),        child: image.ast(          'asts/apple-logo.png',          color: cupertinocolors.white, // 使用 cupertino 系列的白色          width: 100,        ),      ),      expanded(        child: container(          width: 200,          alignment: alignment.topcenter, // 相对靠上中部对齐          child: decoratedbox(            border: border.all(color: cupertinocolors.systemgrey), // 设置边框            borderradius: borderradius.circular(10), // 这里的值比高大就行          ),          child: cliprrect(            borderradius: borderradius.circular(10), // 需要进行圆角裁剪            child: linearprogressindicator(              value: 0.3, // 当前的进度值              backgroundcolor: cupertinocolors.lightbackgroundgray.withopacity(.3),              color: cupertinocolors.white,              minheight: 5, // 设置进度条的高度            ),          ),        ),      ),    ],  ),);

到这里你可以直接 run，一个静态的界面已经做好了。（此时大约过去了 4 分钟）

打开 app，你已经可以放在一旁挂机了，老板走到你的身边，可能会跟你闲聊更新的内容。但是，更新界面不会动，能称之为更新界面？ 当老板一而再再而三地从你身边经过，发现还是这个进度的时候，也许就已经把你的工资划掉了，或者第二天你因为进办公室在椅子上坐下而被辞退。

那么下一步我们就要思考如何让它动起来。

思考动画

来看看启动动画大概是怎么样的：

开始是没有进度条的；

进度条会逐级移动、速度不一定相等。

基于以上两个条件，我设计了一种动画处理方式：

只有三个条件，简单到起飞，开动！（此时大约过去了 5 分钟）

实现动画

开局一个 animationcontroller：

class _homepagestate extends state<homepage> with singletickerproviderstatemixin {  /// 巧用 late 初始化，节省代码量  late final animationcontroller _controller = animationcontroller(vsync: this);   /// 启动后等待的时长  duration get _waitingduration => const duration(conds: 5);   /// 分段的动画时长  list<duration> get _perioddurations {    return <duration>[      const duration(conds: 5),      const duration(conds: 10),      c新教师岗前培训总结onst duration(conds: 4),    ];  }   /// 当前进行到哪一个分段  final valuenotifier<int> _currentperiod = valuenotifier<int>(1);

接下来实现动画方法，采用了递归调用的方式，减少调用链的控制：

@overridevoid initstate() {  super.initstate();  // 等待对应秒数后，开始进度条动画  future.delayed(_waitingduration).then((_) => _callanimation());} future<void> _callanimation() async {  // 取当前分段  final duration _currentduration = _perioddurations[currentperiod];  // 准备下一分段  currentperiod++;  // 如果到了最后一个分段，取空  final duration? _nextduration = currentperiod < _perioddurations.length ? _perioddurations.last : null;  // 计算当前分段动画的结束值  final double target = currentperiod / _perioddurations.length;  // 执行动画  await _controller.animateto(target, duration: _currentdurati高山流水成语on);  // 如果下一分段为空，即执行到了最后一个分段，重设当前分段，动画结束  if (_nextduration == null) {    currentperiod = 0;    return;  }  // 否则调用下一分段的动画  await _callanimation();}

以上短短几行代码，就完美的实现了进度条的动画操作。（此时大约过去了 8 分钟）

最后一步，将动画、分段二者与进度条绑定，在没进入分段前不展示进度条，在动画开始后展示对应的进度：

valuelistenablebuilder<int>(  valuelistenable: _currentperiod,  builder: (_, int period, __) {    // 分段为0时，不展示    if (period == 0) {      return const sizedbox.shrink();    }    return decoratedbox(      decoration: boxdecoration(        border: borde广告创意文案r.all(color: cupertinocolors.systemgrey),        borderradius: borderradius.circular(10),      ),      child: cliprrect(        borderradius: borderradius.circular(10),        child: animatedbuilder( // 使用 animatedbuilder，在动画进行时触发更新          animation: _controller,          builder: (_, __) => linearprogressindicator(            value: _controller.value, // 将 controller 的值绑定给进度            backgroundcolor: cupertinocolors.lightbackgroundgray.withopacity(.3),            color: cupertinocolors.white,            minheight: 5,          ),        ),      ),    );  },)

大功告成，总共用时 10 分钟，让我们跑起来看看效果。（下图 22.1 m）

打包发布

发布正式版的 macos 应用较为复杂，但我们可以打包给自己使用，只需要一行命令即可：flutter build macos。

成功后，产物将会输出在 build/macos/build/products/relea/touch_fish_on_macos.app，双击即可使用

结语

可能大多数人都没有想到，编写一个 flutter 应用，跑在 macos 上，能有这么简单。当然，看似短暂的 10 分钟并没有包括安装环境、搜索素材、提交到 git 的时间，但在这个时间范围内，完成相关的事情也是绰绰有余。

到此这篇关于利用flutter制作一个摸鱼桌面版app的文章就介绍到这了,更多相关flutter摸鱼app内容请搜索www.887551.com以前的文端午节的诗句 古诗章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！