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:

  1. Create a new project through the IDE.
  2. Create a new project through flutter create command.

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:

  1. A widget’s build() method is the entry point for composing together other widgets to make a new widget.
  2. A theme determines visual aspects like color.
  3. MaterialApp uses Material Design and is the widget that will be included in RecipeApp
  4. The title of the app is a description that the device uses to identify the app. The UI won’t display this.
  5. 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.grey and the secondary color is Colors.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.

GitHub

View Github