Random Meal generator App in Flutter

In this article, we will use mealDB api to make http requests, and get the data we want.

What data we are going to get from this api - 

• Recipe Name
• Recipe Type (Dessert or Lunch)
• Dish Image
• Instructions to make the Dish 

Now, follow the below steps to complete this project. 

1. Add http as dependency inside pubspec.yaml file otherwise you will get errors.

2. Create a file named constants.dart and add following code to it - 

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Constants{ static const regularHeading = TextStyle(color: Colors.black, fontWeight: FontWeight.600,fontSize:30); }

3. Create one more file named api.dart, where we will be storing our api and then import it in main.dart to make http requests.

Write this code inside api.dart - 

                       import 'package:flutter/material.dart';

                        String url = 'api here';

Take the api from mealDB and assign it to url.

4. Now, inside main.dart -
	import 'dart:convert'; import 'package:flutter/material.dart';
	import 'package:http/http.dart' as http;
	import 'package:random_meal_generator/api.dart';
	import 'package:random_meal_generator/constants.dart';
	void main() {
	runApp(MyApp());
	}
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	debugShowCheckedModeBanner: false,
	title: 'Flutter Demo',
	theme: ThemeData(
	visualDensity: VisualDensity.adaptivePlatformDensity,
	),
	home: MyHomePage(),
	);
	}
	}
	class MyHomePage extends StatefulWidget {
	@override
	_MyHomePageState createState() => _MyHomePageState();
	}
	class _MyHomePageState extends State<MyHomePage> {
	Map mapResponse;
	List meals;
	Future getMeal() async {
	http.Response response;
	response =
	await http.get(url);
	if (response.statusCode == 200) {
	setState(() {
	mapResponse = json.decode(response.body);
	meals = mapResponse['meals'];
	});
	}
	}
	@override
	void initState() {
	getMeal();
	super.initState();
	}
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(title: Text("Todays Recipe", style: TextStyle(color: Colors.white,fontSize: 20), textAlign: TextAlign.center,
	),
	backgroundColor: Colors.black,),
	body: meals == null
	? Text("wait")
	: ListView.builder(
	itemCount: meals == null ? 0 : meals.length,
	itemBuilder: (context, index) {
	return Container(
	padding: EdgeInsets.all(20),
	child: Column(
	children: <Widget>[
	SizedBox(height: 20,),
	Text(meals[index]['strCategory'], style: Constants.regularHeading,),
	Text(meals[index]['strMeal'], style: TextStyle(color: Colors.black,fontSize: 40, fontWeight: FontWeight.w700),),
	Image.network(meals[index]['strMealThumb']),
	SizedBox(height: 20,),
	Text("Recipe",style: Constants.regularHeading,),
	SizedBox(height: 10,),
	Text(meals[index]['strInstructions'], style: TextStyle(fontSize: 20),),
	],
	),
	);
	},
	));
	}
	}

This will be the output - 

Everytime you open the app you will get different random recipe. I hope you understood how we are doing it, if you have any doubt, do ask in comments or contact us.