Tong Family

I’m learning how to write Dart using Flutter and that’s a whole new tool set of me. It works like React but is much better with nicer debugging tools and way nicer than trying to figure out what Webpack did wrong. The tutorial at Udacity is semi-decent and free. The main issue is that they actually don’t teach that much, you basically have to go look at the examples, but if you’ ve written React or anything like it is, it is pretty straightforward. Also if you know Javascript, then Dart is going to be easy as well.

But as always things are never super clear, so here are some notes, first getting the environment to work on the MacOS is confusing. But, the basics are to stick with using Homebrew for most it, in short, it is to brew cask install flutter android-studio and most of the rest is taken care of for you. The only hangup is that you have to look carefully for the location of the flutter SDK and manually type that into Android Studio when you create a new Flutter project. Today, that default is /usr/local/Caskroom/flutter/latest/flutter and you need the same thing for the Dart SDK. The course is nice though, it incliudes a git repo you can just clone. The only thing is you need to do a flutter create . in each of the development source trees to tell them where the Dart SDK is. Then you can run the Code/Reformat with dartfmt by a Command-Option-L to make sure it looks right. Make sure when you do this, you add the comma at the back and then the thing inside usually needs to become the value of a child: element.

The most horrible thing though is the plethora of parenthesis in a flutter application literally everything looks like a massive return statement with nesting sometimes 10 items deep and it requires semicolons or commas after each and is very picking. I found trying to get this all right manually to be nearly impossible. The main friend you have is the Option-Command-T which calls Surround with Live Template. If you highlight an element just right, it will put surround parentheses around the whole mess and then you can add the object name and the comma behind it. Whew.

OK, one confusing thing about MacOS is how keyboard shortcuts are handling particularly when there are collisions. For instance, Android Studio (which is really Intellij with addons and with Windows and Mac shortcuts), uses Command-\ to do a hot reload, but when I run this, instead 1Password starts. Turns out to figure this out, you have to do two things:

• Go to System Preferences/Keyboard/Shortcuts. You will see about a zillion keyboard shortcuts. Most of these I have never even heard of or used, btw. Option-Command-D shows the Dock, but you might have a collision there and you have to turn it off.
• Next, do some sleuthing, in this case, 1Password came up, so looking through its preferences, it also has three keyboard shortcuts that are on by default so turn those off.

In general, when you are trying to write code, all of those user conveniences are such a pain, but it looks like the system and various utilities can override shortcuts in each application.

Some other tutorials that are quick and useful after the Udacity one are the Flutterbyexample.com which is another quick tutorial.