Category: Android

getting started with flutter on macos mojave, part 4 final

whbeebe

I’ve reached the end of the Flutter introduction, having produced an “app” that will supposedly work equally well on Android and iOS. Nothing out of the way to report, as part two of the exercise was clear and correct. I even went back and removed the code that produced the “Welcome to Flutter” header. Now the app is cleaner looking with only one header.

The good news is how so many different parts worked together to accomplish this: XCode (the Apple iPhone simulator), VS Code (Microsoft’s powerful open-source editor with plugins), and Flutter (Google’s development tools with additional support via Brew). If you dig a little deeper into how VS Code is built, you’ll see that it’s built on the Electron framework which is itself based on Node.js and Angular. So there’s a lot of integration of disparate languages and supporting tools into a non-trivial cohesive working whole. I’m suitably impressed.

Unfortunately for me, I couldn’t test how this looks on an Android device. I couldn’t get the Android emulator to work from the command line, even though I powered up Android Studio and used it to install SDK support for Android 9/Pie. Using Android Studio I also started the Android Virtual Device manager to create a Pixel 2 XL Android device to simulate, but unfortunately not the current top end, the Pixel 3 XL. This apparent lack of latest device support, along with the inability to launch the emulator from the command line (required if using VS Code to develop), almost makes the use of Flutter a pointless exercise, at least for me.

Yes, I was able to “develop” the app (or act as a code copying monkey from web page into the source code with the larger blocks of code). And it was interesting to see it run flawlessly on the iPhone XS Max emulator with the latest iOS version (12.1 as of 30 October). So there was that. I was also exposed to an alternative method for writing apps, which involved Javascript/Dart, so that was also a good thing. It really is good to try alternatives.

But being able to easily, seamlessly, develop for both Android and iOS on the same computer (running macOS in this case), that was a failure for me. And in order to do that kind of development you need to work on macOS, because you won’t run the Apple iPhone simulator on Windows 10. Or not that I’m aware of. And possibly solving the problem by developing within Android Studio instead of VS Code is a non-starter with me, unless I were being paid to do this, and then I would (might) begrudgingly switch. But on my own nickel, nope.

Prior Posts

getting started with flutter on macos mojave
getting started with flutter on macos mojave, part 2
getting started with flutter on macos mojave, part 3

getting started with flutter on macos mojave, part 3

whbeebe1 Comment

I moved on to the next step in the Flutter getting started tutorial, managing to create a new app project with a bit more functionality.

While the directions were for the most part correct and complete, they were a bit murkier in some spots than in the earlier tutorial sections. In particular:

  • Before you create a new project, close the prior project by closing VS Code. If you create a new project with the old project still open then VS Code will spawn a new window with the new project, detached from the simulator. Just close VS Code and reopen it, then create the new project for this step.
  • In Step 1 you’re advised to “delete all the code from lib/main.dart”. That’s wrong. Do that and you pretty much cripple the entire project. Instead delete class MyApp’s build() method in the project and copy/past the build() method code in the tutorial into its place.
  • In Step 2 you learn to add and reference an external package. The writer assumes you’re using Android Studio when you update pubspec.yaml. Since I’m in VS Code, when the instructions tell you to click “Packages get” in Android, press [Shift][Command][P] (remember I’m on a Mac) to bring up VS Code’s Command Palette (the menu View | Command Palette… does the same thing) and type “Flutter: Get Packages” to perform the same exact function.

The rest of the steps were uneventful and correct. At the end I had a working app that looked exactly like the view in the tutorial running in the simulator. Hurray for me.