Recipe App
Our app will offer a hard-coded list of recipes and let us use a Slider to recalculate quanties based on the number of servings.
Creating a new app
There are two simple ways to start a new Flutter app:
- Create a new project through the IDE.
- Create a new project through
flutter createcommand.
Making the app ours
Change the class MyApp extends StatelessWidget to class RecipeApp extends StatelessWidget.
This defines a new Dart class named RecipeApp which extends -- or inherits from StatelessWidget. In Flutter, almost everything that makes up the user interface is a widget. A StatelessWidget doesn't change after you build it. Think of RecipeApp as the container of the app.
class RecipeApp extends StatelessWidget {
main() is the entry point for the code when the app launches. runApp() tells Flutter which is the top-level widget for the app.
Styling our app
Widget build(BuildContext context) {
const appTitle = "Recipe Calculator";
final ThemeData theme = ThemeData();
return MaterialApp(
title: appTitle,
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
primary: Colors.grey,
secondary: Colors.black,
),
);
home: const MyHomePage(title: appTitle),
);
}
This code changes the appearance of the app:
- A widget's
build()method is the entry point for composing together other widgets to make a new widget. - A theme determines visual aspects like color.
- MaterialApp uses Material Design and is the widget that will be included in RecipeApp
- The title of the app is a description that the device uses to identify the app. The UI won’t display this.
- By copying the theme and replacing the color scheme with an updated copy lets us change the app’s colors. Here, the primary color is
Colors.greyand the secondary color isColors.black.
Building a recipe list
An empty recipe app isn’t very useful. The app should have a nice list of recipes for the user to scroll through. Before we can display these, however, we need the data to fill out the UI.
Adding a data model
String label;
String imageUrl;
int servings;
List<Ingredient> ingredients;
Recipe(
this.label,
this.imageUrl,
this.servings,
this.ingredients,
);
static List<Recipe> samples = [
Recipe(
'Spaghetti and Meatballs',
'assets/2126711929_ef763de2b3_w.jpg',
4,
[
Ingredient(
1,
'box',
'Spaghetti',
),
Ingredient(
4,
'',
'Frozen Meatballs',
),
Ingredient(
0.5,
'jar',
'sauce',
),
],
),
Recipe(
'Tomato Soup',
'assets/27729023535_a57606c1be.jpg',
2,
[
Ingredient(
1,
'can',
'Tomato Soup',
),
],
),
Recipe(
'Grilled Cheese',
'assets/3187380632_5056654a19_b.jpg',
1,
[
Ingredient(
2,
'slices',
'Cheese',
),
Ingredient(
2,
'slices',
'Bread',
),
],
),
Recipe(
'Chocolate Chip Cookies',
'assets/15992102771_b92f4cc00a_b.jpg',
24,
[
Ingredient(
4,
'cups',
'flour',
),
Ingredient(
2,
'cups',
'sugar',
),
Ingredient(
0.5,
'cups',
'chocolate chips',
),
],
),
Recipe(
'Taco Salad',
'assets/8533381643_a31a99e8a6_c.jpg',
1,
[
Ingredient(
4,
'oz',
'nachos',
),
Ingredient(
3,
'oz',
'taco meat',
),
Ingredient(
0.5,
'cup',
'cheese',
),
Ingredient(
0.25,
'cup',
'chopped tomatoes',
),
],
),
Recipe(
'Hawaiian Pizza',
'assets/15452035777_294cefced5_c.jpg',
4,
[
Ingredient(
1,
'item',
'pizza',
),
Ingredient(
1,
'cup',
'pineapple',
),
Ingredient(
8,
'oz',
'ham',
),
],
),
];
}
class Ingredient {
double quantity;
String measure;
String name;
Ingredient(
this.quantity,
this.measure,
this.name,
);
}
This is just an overview of all the step we went through creating our app.
48 Dec 20, 2022
1 Dec 23, 2021
1 Dec 22, 2022
1 Dec 17, 2021
3 Oct 31, 2022
2 Nov 3, 2021
6 Apr 26, 2022
6 Dec 14, 2022
7 Apr 5, 2022
152 Dec 6, 2022