Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use Flutter to make a fishing desktop version of the App. The content of the article is of high quality, so Xiaobian shares it with you for reference. I hope you have a certain understanding of relevant knowledge after reading this article.

Win10 stores have an App called Fish, which, after downloading and opening, will put your computer into a fake update screen, making others think your computer is upgrading, so you can take a break and have a cup of coffee gracefully. Suddenly this thought crossed my mind: good thing, but I use a MacBook, can not use this app. But it looks like I could write one myself?

preparations

Young people need action most, think of it, although I am sorting out DevFest's speech at the moment, but it does not prevent me from writing an App in 10 minutes. So I threw a punch:

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

A Flutter project supporting macOS is created. (About a minute later)

Start typing code to find resources

We first need a high-definition uncoded picture, here you can search online, there is a point to note is that the use of LOGO to pay attention to the use of the scene brought copyright issues. After finding the image, drop it to assets/apple-logo.png and add the resource reference to pubspec.yaml:

flutter: use-material-design: true+ assets:+ - assets/apple-logo.png Thinking Layout

Let's take a look at macOS's startup screen, and there are a few key points:

Logo in the middle of the screen, fixed size of about 100dp;

Logo and progress bar interval about 100 dp;

The progress bar is about 5dp high and 200dp wide, with rounded corners almost covering the height, white values and a fill + light gray border on the background.

(Don't ask me why these things can be observed, ask is to teach UI to change UI every day.)

After confirming the general layout pattern, we began to build the layout. (About 2 minutes later)

implement layout

First, center the LOGO, color it, set the width to 100, and space it up and down by 100:

return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Spacer(), Padding( padding: const EdgeInsets.symmetric(vertical: 100), child: Image.asset( 'assets/apple-logo.png', color: Cupertino Colors.white, //White coloring using Cupertino series width: 100, ), ), const Spacer(), ], ),);

Then put a relatively upper progress bar below:

return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Spacer(), Padding( padding: const EdgeInsets.symmetric(vertical: 100), child: Image.asset( 'assets/apple-logo.png', color: Cupertino Colors.white, //white using Cupertino series width: 100, ), ), Expanded( child: Container( width: 200, alignment: Alignment.topCenter, //relatively upper middle alignment child: DecoratedBox( border: Border.all(color: CupertinoColors.systemGrey), //Set border borderRadius: BorderRadius.circular(10), //The value here is higher than that. ), child: ClipRRect( borderRadius: BorderRadius.circular(10), //rounded clipping required child: LinearProgressIndicator( value: 0.3, //current progress value backgroundColor: CupertinoColors.lightBackgroundGray.withOpacity(.3), color: CupertinoColors.white, minHeight: 5, //Set the height of the progress bar ), ), ), ), ], ),);

Here you can run directly, a static interface is already done. (About 4 minutes later)

Open the App, you can already hang up, the boss walks to your side, may chat with you about the updated content. However, the update interface does not move. Can it be called an update interface? The boss may have crossed off your paycheck by the time he passed you again and again, or you may have been fired the next day for sitting in a chair in the office.

So the next step is to think about how to get it moving.

Thinking animation

Let's see what the animation looks like:

There is no progress bar at first;

The progress bar moves stepwise, not necessarily at the same speed.

Based on the above two conditions, I designed an animation processing method:

Duration of construction segment, which can be freely combined by multiple durations;

The number of animation passing time determines the final progress of each time;

Each duration controls the interval from the start value to the end value.

There are only three conditions, simple to take off, go! (About 5 minutes later)

realizing animation

Start with an AnimationController:

class _HomePageState extends State with SingleTickerProviderStateMixin { ///cleverly use late initialization, Save code amount late final AnimationController _controller = AnimationController(vsync: this); ///Duration get _waitingDuration => const Duration(seconds: 5); ///List get _periodDurations { return [ const Duration(seconds: 5), const Duration(seconds: 10), const Duration(seconds: 4), ]; } ///which segment is currently in progress final ValueNoise_currentPeriod = ValueNoise (1);

Next, the animation method is implemented, and the recursive call method is adopted to reduce the control of the call chain:

@overridevoid initState() { super.initState(); //wait for the corresponding number of seconds, start the progress bar animation Future.delayed (_waitingDuration).then((_) => _callAnimation());} Future _callAnimation() async { //take current segment final Duration _currentDuration = _periodDurations[currentPeriod]; //prepare next segment currentPeriod ++;//If you have reached the last segment, leave it blank. _nextDuration = currentPeriod

< _periodDurations.length ? _periodDurations.last : null; // 计算当前分段动画的结束值 final double target = currentPeriod / _periodDurations.length; // 执行动画 await _controller.animateTo(target, duration: _currentDuration); // 如果下一分段为空，即执行到了最后一个分段，重设当前分段，动画结束 if (_nextDuration == null) { currentPeriod = 0; return; } // 否则调用下一分段的动画 await _callAnimation();} 以上短短几行代码，就完美的实现了进度条的动画操作。（此时大约过去了 8 分钟） 最后一步，将动画、分段二者与进度条绑定，在没进入分段前不展示进度条，在动画开始后展示对应的进度： ValueListenableBuilder( valueListenable: _currentPeriod, builder: (_, int period, __) { // 分段为0时，不展示 if (period == 0) { return const SizedBox.shrink(); } return DecoratedBox( decoration: BoxDecoration( border: Border.all(color: CupertinoColors.systemGrey), borderRadius: BorderRadius.circular(10), ), child: ClipRRect( borderRadius: BorderRadius.circular(10), child: AnimatedBuilder( // 使用 AnimatedBuilder，在动画进行时触发更新 animation: _controller, builder: (_, __) =>

LinearProgressIndicator( value: _controller.value, //bind controller's value to progress backgroundColor: CupertinoColors.lightBackgroundGray.withOpacity(.3), color: CupertinoColors.white, minHeight: 5, ), ), ), ); },)

It's done. It takes 10 minutes. Let's run it and see how it works. (Figure 22.1 M below)

Package release

Releasing a full version of macOS apps is complicated, but we can package them for our own use with just one line of command: Flutter build macos.

After success, the product will be output in build/macos/Build/Products/Release/touch_fish_on_macos.app, double click to use

About how to use Flutter to make a fishing desktop version of the App to share here, I hope the above content can be of some help to everyone, you can learn more knowledge. If you think the article is good, you can share it so that more people can see it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.