Build a Recipe App with Flutter

Build a Recipe App with Flutter

Let’s make a recipe app with flutter, basically learning how to build full app with flutter, also learning how to use API in a flutter app, It is a good flutter project to add to cv.

If you like to learn via video then you can watch the video

Full app Source Code: github.com/theindianappguy/recipe_app

📕 Things covered in this Series:

  • Fetch data from an API with flutter
  • How useState in a flutter app
  • How to pass down data in a flutter widget
  • Using Custom Font in Flutter App
  • How to show a grid view and much more.

Prerequisites :

So let’s get started coding,

Step 1: Create a flutter project,

I am going to do it with Android studio you can user terminal/cmd or VS code there will be no difference.

Step 2: Code Cleanup

We will start by getting rid of all the comments in the main.dart and getting rid of MyHomePage() stateful widget

Step 3: Install the required package

to install just add then to pubspec.yaml file below cupertino_icons and then for vs code CTRL + S (save) , Android Studio click on Packages get at the top right hand corner.

Step 4: Create home.dart

inside views folder and add it to main.dart like this.

import 'package:flutter/material.dart';
import 'package:recipe_app/views/home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Recipe',
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

Step 5: Let’s create the User Interface for our app now.

As a beginner to understand all the widgets (everything is widget in flutter image, text, container…..) check out flutter official Widget catalog : https://flutter.dev/docs/development/ui/widgets

Let’s discuss most important once i will recommend to watch the video to understand better.

What is Scaffold?

It’s a wrapper which provides prebuild widgets like appbar, floating action button, drawer and much more so we don’t have to create all of them from scratch.

What is Stack?

We use stack to put one widget above another think of it like a sandwich but instead of brads we have some widgets, it can be text above image, may be full app above custom image/background and many more

What is Column?

Column are used to arrange widgets in Vertical Manner one below the other.

What is Row?

Row are used to arrange widget in Horizontal Manner one after the other.

What is Sizedbox?

Sizedbox are used to create space in our app that can be space between between the image and the text and text and text and in general with any widgets.

How to use Gradient Color background?

For Gradient color we use Box Decoration property if Container which have a Linear Gradient property.

Furthermore we have used Textedit Controller to keep track of what user is typing in the field. I have also used a custom font Overpass(i really like this one) so next step will be to add it as well.

This all sums up what we have built in home.dart file. ( did i miss anything? let me know in the comments)

Step 6: Add Custom Font to Flutter App:

First download the font .otf files from my github repo : here and add then to the assets/ fonts folder

then mention them in the pubspec.yaml file like this. check the full pubspec.yaml file here

 fonts:
    - family: Overpass
      fonts:
       - asset: assets/fonts/overpass_bold.otf
    - family: OverpassRegular
      fonts:
        - asset: assets/fonts/overpass_regular.otf

Step 7: Using Api in Flutter App

now we will add the Edamam Api to use their database of recipes and show when requested in out app

  • First Signup : https://developer.edamam.com/edamam-recipe-api
  • Click on Dashboard > Applications > View > Copy the application key.

Step8: Call the api and get data on search in the app so when app user submit something and click on search we will run this onTap:

code is already added in the top home.dart file so now if you will run it should work. Just make sure to update the Api Key

Step 8: Add Web View in the App.

it’s pretty simple to show web view the extra code is just the app bar, also i faced this issue that only https website were visible in webview so i made a custom function to redirect http sites to https. Here is the code just create a new file in views recipe_view.dart

Run the app and test if it is running fine any problems? Google it 😅 (it works for me),……. ohhh still not solved comment it down below all the FlutterNerd community will love to help.

Step 9: Running Flutter App On Web.

First make sure you are in beta channel to run flutter web apps step by step > here <

Then just run the app selecting chrome voila 🥳 it works it’s that simple no setup required.

If you are facing problem i will highly recommend to follow the video it’s better and i tried to explain each step visually.

🎓 More tutorials you may like

In this one you learn to build a fully functioning chat app with one-2-one real time chat search user like Insta DM.

In this You will learn how to build a Wallpaper app with Flutter this is a great project to add to portfolio

In this project we will use NewsAPI.org and build a news app with it

Written by
Sanskar Tiwari
Join the discussion

Instagram

Connection error. Connection fail between instagram and your server. Please try again