Rochester, United Kingdom
Joseph is an indie game developer and student from Rochester, England, who is currently in the process of completing a degree in Computer Science. He occasionally participates in game jams where contestants have limited time to build a game from scratch. Check out some of his projects on his itch.io creator page. When Joseph is not creating games, you can find him playing the guitar, bass, and piano, tinkering with his music or obsessing over guitar pedals. He also never misses a chance to play CS:GO with his friends and humiliate them with his superior skills. As part of our dedicated support team, Joseph is constantly looking for ways to help Transloadit's customers reach their goals.
Let's Build: Transloadit Recipes App Pt. 1/2
After recently working on the Flutter SDK, I thought it would be appropriate to demo a small app. Today, we're designing a food app that allows us to choose a dish, 'cook' it, and receive a receipt, which can be accessed by tapping a Firebase notification.
This blog is the first of two parts. We'll build out the UI in this part, with functionality being added in the following post.
Put your chef hat and apron on, and let's get cooking!
Taking a sneak peek, at the end of this blog, you will have an app that looks like this:
Setting up the app
First things first, create a new Flutter project with:
flutter create transloadit_recipes
Run flutter doctor to make sure your setup is working, then navigate to lib/, and create five new folders: /defs, /res, /screens, /utils, and /widgets.
Next, let's install some packages inside of pubspec.yaml. Modify your dependencies as shown below, then run flutter pub get.
Create /lib/res/colors.dart so we can define some custom colors.
Inside the same folder, create theme.dart to define a custom light theme that we will apply universally to our app's UI.
Setting up our scaffolding
We're going to try to set up some basic UI on our homepage. But before we can do that, we'll need to modify main.dart.
Note how we're using a ValueNotifier for both the results and isLoading flags. This enables us to trigger a state update whenever the value of one of these variables changes. Later, we use this in conjunction with ValueListenableBuilder.
You'll notice main.dart refers to a few files that we haven't yet created. Let's go over them quickly:
Contains the blueprint of our Food objects:
Contains the blueprint of our Response objects:
Here, we define a list of all our food objects.
Creating our widgets
For our app, we'll need a variety of widgets. It's a little outside the scope of what we're covering today, so we won't go over how to make them. Instead, you can grab all of the files you need to place in your /widgets folder here.
Setting up our screens
Now, we need to use the widgets on our screens to display some visual feedback to the user.
Let's create our home page.
That should look something like this:
Next, let's put the receipt page together, although we won't be able to see it for a little while.
And wrapping up, update main.dart with our new pages.
That's all we'll be doing for the time being! Congratulations for making it this far, and don't forget to read part two, where we'll round out this project by integrating our Flutter app with Firebase and Transloadit.
We love seeing how our community uses Transloadit. Tweet
@transloadit to get your
proposal approved, share what you’ve built in the form of a blog post or a
tutorial on your website, and earn a
$300 Gift certificate of your choice as well as a full year
of the Startup Plan, at no cost after you publish.
Transloadit is a file uploading & encoding service for developers. Customers from 135 different countries, such as Coursera and The New York Times, have been loving our clever API, reliability, and fantastic customer support since we launched in 2009. We recently celebrated our 41th petabyte encoded. That's 41 million gigabytes.
As the first company to run Node.js in production, our founders have shaped much of its early ecosystem. Transloadit also built Uppy and Tus, two open source projects that are redefining how people share files on the internet.
We offer a free plan with 5GB of monthly traffic included, and an additional free service for students, teachers, open source projects, and charities. Sign up today and discover the power of our platform.