I've had a game available on the App Store for quite a while now: InterAção (Portuguese for InterAction), it's a party game to play mimic with friends.
我已经有一段时间在App Store上提供了一款游戏： InterAção (InterAction的葡萄牙语)，它是一款与好友一起模仿的聚会游戏。
By far, the biggest request I've had on the game was: Make an Android version, please! And I decided it was time to do so. It was a nice opportunity to learn something and gather some new skills.
到目前为止，我对游戏的最大要求是：请制作一个Android版本！ 我认为是时候这样做了。 这是学习和收集新技能的好机会。
I'm not familiar with native android development, but I was looking forward to studying something new for a while and I had already seen a few things about flutter so I decided to give it a go!
我对原生android开发不熟悉，但是我很期待一段时间研究新知识，而且我已经看到了关于flutter的一些知识，所以我决定尝试一下！
This story is about how did it go, with some tips to start Flutter development 😉.
这个故事讲述了它的发展过程，并提供了一些开始Flutter开发的技巧。
我们开始吧，扑腾！ (Here we go, let's flutter!)
First things first: Install Flutter!
首先，安装Flutter！
I just followed the instruction on the Flutter website, downloading the tools and packages I needed, and also the Android Studio.
我只是按照Flutter网站上的说明进行操作，下载了所需的工具和软件包以及Android Studio。
Yes, I used the Android Studio to code it (judge me if you want), not the fastest IDE but being able to build and run directly from it and just hitting command + S to hot reload the entire app was pretty awesome.
是的，我使用Android Studio对其进行编码(如果需要，可以判断一下)，不是最快的IDE，而是能够直接从中构建和运行，并且只需按Command + S即可热重载整个应用程序。
建筑材料 (Building stuff)
While the iOS app was built using the old-fashioned Xcode storyboard (nowadays I'd probably use view coding 🤔), the new app was being made using the declarative syntax from Flutter.
虽然iOS应用是使用老式的Xcode故事板构建的(如今，我可能会使用视图编码🤔)，但新应用是使用Flutter的声明性语法制作的。
If you are familiar with SwiftUI, it will help you, but if not, do not worry. I think its an easy thing to learn if you have some programming background.
如果您熟悉SwiftUI，它将为您提供帮助，但是如果没有，请不要担心。 如果您具有一定的编程背景，我认为这很容易学习。
I think there is no secret to it, take a look into what you have to create the layouts - columns, rows, stacks, containers, expandables… - then, try drawing and understanding the best way to replicate your idea using these components.
我认为这不是什么秘密，请查看创建布局所需的内容-列，行，堆栈，容器，可扩展…-然后，尝试绘制并了解使用这些组件复制想法的最佳方法。
I decided to always start the layout with a Stack, so I could build up everything layered and split background and foreground.
我决定始终从堆栈开始布局，这样我就可以构建所有分层的内容并拆分背景和前景。
Here things are a little more simplified, it's just to show the idea of how things are built. I had to keep adjusting spacings, positions, paddings, to get the layout I really wanted.
这里的事情稍微简化了一些，只是为了说明如何构建事物。 我必须不断调整间距，位置，填充，才能获得我真正想要的布局。
Once you get familiar with it, it's really nice and fun to keep building the layout, adding behaviors, and using the hot reload to see your changes instantly.
熟悉它之后，继续构建布局，添加行为并使用热重载立即查看更改确实非常有趣。
I probably can do some adjustments to improve the way the entire layout was being made, but overall I'm pretty happy with the results I got.
我可能可以进行一些调整以改善整个布局的制作方式，但总体而言，我对获得的结果感到非常满意。
多种屏幕尺寸？ (Multiple screen sizes?)
Here's a tip: Use the Safe Area widget to start building everything. But why?
提示：使用“安全区域”小部件开始构建所有内容。 但为什么？
Consider you are making an app, and you want it to be available on every device possible. Nowadays we have some crazy screen layouts with top or bottom notches, curved borders, camera holes… And you need to consider this as you layout your app.
考虑您正在制作一个应用程序，并且希望它可以在所有设备上都可用。 如今，我们有一些疯狂的屏幕布局，包括顶部或底部凹口，弯曲的边框，摄像头Kong……并且在布局应用程序时需要考虑这一点。
Using the Safe Area widget, those things are already accounted for, and you will be able to build the layout inside an area that will always be visible.
使用“安全区域”小部件，已经解决了这些问题，您将能够在始终可见的区域内构建布局。
游戏卡 (The game card)
If you play the game, you’ll see that during the game a card is displayed in the center of the screen. Since I had to adapt it to multiple screen sizes I didn’t want to make it with a fixed size because it could go too big on a smaller device and too small on a bigger one (remember its also available on tablets!).
如果您玩游戏，将会看到在游戏过程中屏幕中央显示了一张卡片。 由于我不得不将其适应多种屏幕尺寸，因此我不想将其固定尺寸，因为在较小的设备上尺寸可能太大，而在较大的设备上尺寸可能太小(请记住，平板电脑也可以使用它！)。
So, I decided to make the card width always proportional to the screen size, 70% of the available size, and keep the card ratio of 2:1. This way, it would always be presented the same way on every device.
因此，我决定使卡的宽度始终与屏幕尺寸成比例，为可用尺寸的70％，并保持卡比例为2：1。 这样，在每个设备上总是以相同的方式呈现它。
The get the screen size I used MediaQuery.of(context).size.width, then you just need to calculate the width and height based on it.
得到我使用MediaQuery.of(context).size.width的屏幕尺寸，然后您只需要基于它计算宽度和高度。
感谢上帝，我们有资产(Thank God, we have the assets)
One thing that helped me, is that I already had all the assets from the iOS game! And oh boy, it was worth it.
帮助我的一件事是，我已经拥有了iOS游戏的所有资产！ 哦，男孩，这是值得的。
All the icons, images, backgrounds… everything was hand-drawn. I tried to achieve the sketchy cartoonish kinda look. And I had all the original artwork files.
所有的图标，图像，背景……一切都是手绘的。 我试图实现粗略的卡通风格。 而且我拥有所有原始图稿文件。
I made the drawings on an iPad, using a series of different apps. Most of the icons were drawn on the Illustrator on iPad, and the cards' backgrounds were made using Amaziograph, which is an amazing app that allows you to make mirrored drawings, with repeating patterns.
我使用一系列不同的应用程序在iPad上绘制了图纸。 大多数图标是在iPad上的Illustrator上绘制的，而卡片的背景是使用Amaziograph制作的， Amaziograph是一款了不起的应用程序，可让您制作带有重复图案的镜像图纸。
I am definitely not an artist and not a very good Doodler, but my inspiration for most of the assets and backgrounds was Mr. Doodle.
我绝对不是艺术家，也不是一个很好的Doodler ，但是我对大多数资产和背景的灵感来自Doodle先生。
一些有趣和不错的库 (Some fun and nice libs)
While developing, I searched for some packages to help creating the experience I wanted for the app, here are some of the ones I've used and I can totally recommend:
在开发过程中，我搜索了一些软件包以帮助创建我想要的应用程序体验，以下是我使用过的一些软件包，我完全可以推荐：
Well, it does what the name tells, vibrate! Since I wanted to improve the user feedback when you get something right, or when you ran out of time, vibrations are a nice way to do so.
好吧，它确实如名字所说，振动！ 由于我想在做对事情或没时间用完时改善用户反馈，因此振动是一种不错的方法。
This package is pretty straightforward and you can check for the device capabilities: if it has vibrations or if you can customize the vibrations, and call the correct method to do so.
该软件包非常简单，您可以检查设备功能：它是否有振动，或者您可以自定义振动，然后调用正确的方法来执行此操作。
This one helped me doing the flipping card animation. It provides a widget with 2 children: A front and a back. And the behavior that on tap, it changes the state and flips the card, and it was very useful and easy to use
这帮助我制作了翻卡动画。 它提供了一个有2个子级的小部件：正面和背面。 轻按一下即可改变状态并翻转卡的行为非常有用且易于使用
When the user is playing the game, I didn't want the device to go to sleep. So I had to find a way to prevent automatic screen locking.
当用户在玩游戏时，我不希望设备进入睡眠状态。 因此，我不得不找到一种方法来防止屏幕自动锁定。
The Wakelock package does exactly it. You just need to call Wakelock.enable() whenever you want to keep the screen on, and Wakelock.disable() to allow it to lock itself automatically again.
Wakelock软件包完全可以做到这一点。 只要您想保持屏幕打开就只需要调用Wakelock.enable() ，然后Wakelock.disable()使其再次自动锁定即可。
Careful when you use it, we do not want to consume all the user's battery just because the screen is on all the time. Enable it just when necessary, and disable once you don't need it anymore.
使用时请小心，我们不希望仅因为屏幕一直处于打开状态而消耗了用户的所有电池。 仅在必要时启用它，然后在不再需要时禁用它。
到底 (In the end)
It was a very very fun project to do so, and the help from my friends for testing and providing feedback really helped me because, *cof cof*, I don't currently have an Android device… So I relied on them for the hand testing.
这样做是一个非常有趣的项目，而我的朋友在测试和提供反馈方面的帮助确实为我提供了帮助，因为* cof cof * ，我目前没有Android设备……因此，我依赖于它们测试。
And I thought it was very fast! The first version of the Flutter app took me about 2 weeks to make, working after work hours and a little bit on the weekends (and maybe a night or two 👀). If you need to test or want to create something mobile for iOS and Android at the same time, this is a very nice path to follow.
我以为速度很快！ Flutter应用程序的第一个版本花了我大约2个星期的时间，在下班后工作，而在周末(可能是一两个晚上或一个晚上)工作了一点。 如果您需要同时测试或想为iOS和Android创建移动设备，这是一条非常不错的方法。
But since the iOS app is full of cool features like iMessage Stickers, an Apple Watch app, local play with 2 devices… I won't be replacing it on the AppStore with the Flutter version (at least not now).
但是，由于iOS应用程序具有酷炫的功能，例如iMessage Stickers，Apple Watch应用程序，可在2台设备上本地播放……我不会在Fluke版本的AppStore上替换它(至少现在不是)。
There are still a lot of things I want to do in both versions, and the game has already given me and my friends great times, and… created a little bit of competitiveness.
在这两个版本中，我仍然有很多事情要做，并且游戏已经给了我和我的朋友们美好的时光，并且……创造了一点竞争力。
If you are interested in learning Flutter, I totally recommend you, and if you want to play InterAção with your friends you should also do so! Available on iOS and Android now ❤.
如果您有兴趣学习Flutter，我完全推荐您，并且如果您想与朋友一起玩InterAção ，也应该这样做！ 现在可在iOS和Android上使用❤。
Download it now on App Store and Play Store
翻译自: https://medium.com/swlh/rewriting-an-ios-app-in-flutter-336997e59932
扫一扫
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
