Building an App from Scratch: Part 1
Laying the Foundation
I will not be polluting your feed with paragraphs and bullet points explaining step-by-step on how to install Flutter, Android Studio, and VS Code. There are countless tutorials for each of these, and I prefer not to top the pile with a middling explanation for all three. Instead, I’ll provide a brief justification for each.
Flutter (Dart)
As I have discussed previously, I will be using Flutter as my development kit of choice. In a world where one of the easiest money-making schemes is developing a mobile app as quickly as possible and pumping it full of as many ads as possible and where your company is a joke if you don’t have a mobile app, one might expect there to be thousands of mobile application development frameworks. Indeed, there might be as many, but there are likely only a double-digit number of frameworks one should actually consider. As a beginner, this number might even be single digit. Zooming out, we can first consider the landscape of frameworks as they relate to different programming languages.
Xamarin (C#)
My journey with C# likely echoes the experiences of many STEM students. I called it “C hash” when I first read about it in high school (despite being a die-hard band nerd), I downloaded Unity once in high school and proceeded to launch it twice, I downloaded Unity yet again in college once I had “programming experience” and launched it a maximum of three times, and then frantically read about .NET when I realized plotting numerical approximations with matplotlib wasn’t enough of a portfolio builder to land a real job. For those of you unfamiliar with the language, C# can be described as Microsoft’s take on Java, though that particular interpretation is likely to ruffle many .NET feathers. In short, C# is Microsoft’s gruyere in the ever-expanding fondue pot of application development. For the uninitiated, note that application development or app dev does not refer strictly to mobile application. Indeed many, and likely most, apps developed are for a desktop setting. Pick any .exe on your Windows machine — yep, that’s an app.
Xamarin is a development framework that utilizes C# as its language of choice. Xamarin is cross-platform, and it’s probably what I would be using if Flutter wasn’t around.
What is Xamarin? (microsoft.com)
React Native (JavaScript)
Learn once, write anywhere.
The web is built on JavaScript, so it shouldn’t be too shocking that JS dominates in the realm of mobile apps, too. React Native is one of many JavaScript frameworks for mobile dev, but it . With an impressive array of apps built on React Native, it might objectively be the most desirable toolset in this list. If I was seeking to build a portfolio and get hired in just a few months, React Native is what I would be learning.
Swift
Do you want to develop apps, widgets, and watch complications for iOS? Use Swift. Once upon a time, you might have heard of Objective C and pondered how this fit into the sea of C’s in computer science (C, C++, C#, Visual C, et cetera). Objective C was the precursor to Swift — Apple’s in-house development language. There are many great applications exclusive to the Apple ecosystem. And although it is a great ecosystem, I am not an Apple user. So for now, I will not be using Swift (and Apple’s IDE, Xcode) for my app development journey.
There are many other great tools, but I will not be discussing them here today (sorry Ionic). Onto our chosen arsenal.
Flutter
The flutter install page is straightforward. For those of you coming from the (semi-)structured civilization of scientific computing, installing the Flutter SDK is not just like installing Anaconda or Visual Studio which have lots of useful GUI and out-of-the-box features. You will need to install the development kit per project via the command line. The install page explains all of this in greater detail.
Android Studio
Android is dead. Long live Android.
— Me, trading in my Galaxy S9+ for a Pixel 4a (c. 2020)
The Flutter install page (linked above) provides a brief, easy guide on how to install Android Studio. Android Studio allows you to emulate various Android devices on your local machine (Windows, MacOS, Linux, and even Chrome OS). As you’ll see lower down, this tool is beyond useful and will allow us to continually run and test the application. Chosen arbitrarily because its the phone I have, for the first major stages of the project I plan to emulate and test the app on a Google Pixel 4a.
VS Code
My evangelism for LaTeX is exceeded uniquely by my evangelism for VS Code. No, VS Code is not technically an Integrated Development Environment (IDE). VS Code is a code editor (previously, just text editor). That is, VS Code helps you edit your code, scripts, and basically any file whose contents can be easily expressed via text (.txt, .csv, .xlsx, .tex, and many, many more). The line between code editors and proper IDEs blur as code editors integrate more tools and utilities; e.g., debuggers, IntelliSense, git. If this distinction is new to you, an adequate categorization is that IDEs are used for software development: building and testing UI/UX, updating native versions for new versions of operating systems, and generally deeper level stuff that goes beyond running a single file (common languages are C, C++, C#, and ). Conversely, a code editor might be used to edit you .py script that scrapes and visualizes stock data, or to tweak an HTML file.
The strength of VS Code is in its universality. I mean that you can run nearly any language you can think of in VS Code. Even lower level languages that are suited to developing applications and operating systems (e.g., C/C++, Rust) can be run in VS Code. Filetypes such as .csv and even .hdf5 (arbitrarily, my favorite filetype) can be prettified and helpfully visualized in VS Code. Hell, you can even have a Kanban board in VS Code. This is all done through extensions. Anything useful is likely supported officially or maintained to an adequate level of rigor. This broad range of utility makes VS Code a Swiss army knife for high level coding. Language-dedicated environments such as PyCharm might be better suited for those particular languages (I have heard amorphously that the PyCharm debugger is “better” in some way), but the tradeoff is no comparison to me. As a student who has a passing interest in many languages, having the ability to pull a GitHub repository and mess around with that language and project without having to download a dedicated development environment is a godsend. For reasons like this and many more, VS Code will be my environment of choice.
The First Launch
Finally, we’re past all the fluff. VS Code is up and running with the Flutter extension, I’ve set up a Pixel 4a emulator via Android Studio, and the Flutter SDK is set up in my chosen directory. Here we go:
Breathtaking. If you are one of the many who have at least installed Flutter, you’ve likely seen this familiar screen. As far as Hello, World! ’s go, it’s not so bad. It does a clear enough job of portraying Flutter’s design language, and even integrates some basic functionality. As you might have guessed, pressing the + button increases the number displayed in the center of the screen. Humble beginnings.
To paint a clearer picture of where I plan to go, here is a clip from my first deep dive into Flutter (complete with crusty emulator edges):
It’s a wonder how I’m not living it up in Palo Alto right now.
I’m certain this clip is a smorgasbord of graphics and UI/UX faux pas. It should be clear as well that I’ve taken inspiration from pre-existing social media giants.
Good artists borrow, great artists steal.
— Picasso, allegedly
The breadth of our trail has then narrowed: we will go from the light-moded, single-buttoned, default Flutter application (Fig. 1)to the pleasantly dark-moded, multi-buttoned, barely operational homebrewed application (Fig. 2). It doesn’t look like much right now, and its likely even uglier under the hood.
About the Author
Thanks so much for reading! I’m Garrett — an applied mathematics graduate student, music theory enthusiast, and hobbyist author. My research focuses on computational fluid dynamics, but I am also interested in PDEs in general, graph/hypergraph theory, geometric algebra, cellular automata, and many other fields of STEM.
This series documentaries my attempted transition from the world of academic scientific computing to the realm of full-stack application development.
Feel free to reach out, I love talking to people from all backgrounds, and hopefully each of us can learn something new in the process. You can find me via my personal page:
