So, I've been tasked with creating an app in Flutter. I'm mostly a React/React Native developer, but I think "Ok, how different can it be?", and cheerfully head off to https://flutter.dev/ and discover that it can be quite a lot different. By this I mean, I have no idea what's going on. Time to start learning, I guess...
What's Flutter?
Flutter is an offering from Google, which provides a framework for building apps. From a single codebase, a Flutter app can be run on Android, iOS, web and desktop; the code is compiled to run "natively", which means that the app should run quickly and efficiently.
What's Dart?
When you start learning Flutter, you'll immediately come across Dart, which is basically the language in which the framework is written, and the language you'll use to build your app. If you're used to React, then Dart is to Flutter as JavaScript is to React. You could just code in Dart, of course, but you'd end up having to create all kinds of listeners and getters and setters and bits and pieces; Flutter is a pre-made box of all those listeners and getters and setters and bits and pieces, so you don't have to make them.
Think of it as a process similar to building a table; you could start with a tree (Dart), and in theory you have all you need at that point. However, the easier way to do it is to start with a catalogue of table tops and table legs; pick what you need and join them together to make the table. The catalogue is a bit like Flutter; a sort of "half way house" which has already chopped down the tree for you and made lots of bits you might need, but which isn't handing you a full-blown table.
Installing Flutter
Ok, first we need to install Flutter (this automatically gives us Dart and everything else we need as well). I followed the instructions at https://docs.flutter.dev/get-started/install (including updating my path and running flutter doctor) and all went smoothly. I already had XCode and Android Studio, so at that point I'm feeling like I'm a step ahead of things.
I also had VSCode, which turned out to have the option to install a handy Dart/Flutter extension that does a lot of the heavy lifting, so I recommend getting that if you haven't already. The extension is easy to find if you search for Flutter.
Creating My First App
Further down that page, there's a section called "Create and run a simple Flutter app", so I followed the instructions there (daring to change the name of my app to first_app, because I like to see what happens if I colour outside the lines), which involves opening a terminal, navigating to the directory where I want my project to go, and typing:
flutter create first_app
All still good.
Running My First App
Initially I kept following the instructions given to run the app, which worked fine, but I've since discovered that VSCode with the Flutter/Dart extension provides a slightly easier way. If you open the project in VSCode (open the root directory, so if your project is called first_app, you open the first_app folder), then, as long as you've installed the Flutter/Dart extension, you should see available devices in the bottom toolbar (just after where it tells you your Flutter version). It may have selected the web version for you, in which case it might say 'Chrome', but if you click on that, you'll see a list of available devices.
If you want to run on an Android emulator or iOS simulator, you'll need to have one running before it appears in this list (so go to Android Studio/XCode and start the emulator/simulator from there).
Select the device you want to use and then hit F5; hopefully the app will build itself and run.
Conclusion
So at this point we've completed the first step of all software development: download all the stuff you need and play around with it a bit. I'll do another post shortly on what to do next.
Comments
Post a Comment