Oflutter: Create a Recipe List App using Flutter and API
Вставка
- Опубліковано 28 кві 2021
- In this video, we will learn how to create a simple recipe list app using the Flutter framework and API. This tutorial was made for flutter beginners. You will learn how to create the right project structure, models for Recipe and API. And more!!! Some key flutter widgets and points for this tutorial:
------
* API
* RecipeCard ()
* AppBar ()
* MaterialApp ()
* ThemeData ()
* factory Recipe.fromJson ()
* @override toString ()
* RecipeApi ()
------ and more...
Website:
oflutter.com
Official Article + Source Code: [Simple Recipe List App using Flutter and API 2021]
oflutter.com/simple-recipe-li...
Rapid API: Yummly
rapidapi.com/apidojo/api/yummly2
If you buy me a coffee, you will make my day :)
/ oflutter
Tags:
#Oflutter #Flutter #FlutterTutorials
Tons of knowledge very efficiently compressed into 13 mins, and at no point did I feel lost. Thank you!
You are welcome 🤗
Yo don't stop these tutorials 😢😢😢😢
U have performance to become a really leading UA-camr i can assure u that
It would be lovely to get an update on this regarding adding a new feature for checking the description of each recipe and their ingredients etc!
Thanks for the tutorial. I made a hate commend early today but it turns out it was a foolish mistake of mine. Great content.
This so freaking awesome exactly what i needed
I just made a python api and i want my app to display content in cards just like that thanks ❤
Hi instructor , while displaying the items in home.dart i got following error
Expected a value of type 'Iterable', but got one of type 'Null'
Extremely well done example, just what I needed, great job 👍😃
Glad to help you 😌
Great efforts sir we want more videos abouts flutter projects🤩
Amazing tutorial with clear voice 😍
This tutorial was awesome! You should make more videos like this!
Sure! I will
Great video, thanks for the Input.
thanks before even finishing the video, keep up the good work
Thank you so much for the knowledge
Excellent! Please consider making a tutorial with flutter integrated with redux architecture. Thanks
Sure, I will think about it :)
Very good tutorial. I need to design my own api with my urls I own. This helps me get some insights!
You are welcome 🤗
Thanks, brother for the knowledge
is this those are the real videos and if i click on that it will start ?
pls reply beacuse i was searching for an api like videos of recipes.
I tried but this didn't worked for me, So to tell what I have done, I just implemented as he have done it. Now that seems not a nice thing. One more thing, I know nothing about API implementation. So any suggestions on what should I do ??
Greate explanation, subbed!
kudos , you the best man.
Incredible video bro
This was very helpful for me , ❤️❤️❤️
NoSuchMethodError: The method '[]' was called on null. ? this error occured in 'recipeapi' i can not figured out this error since five days will you please help me
Hello, great video but is it possible to add a click function on each item of the list?
Thank you, great explanation. Could you please do a toutrial about notification
i leaned so much from your video, thank u
You are welcome
Perfect video!! Thanks
You are welcome 🙏
Hello I really liked your tutorial. Thank you very much but I have a problem, I can not get the pictures of the kitchens despite the fact that I inserted my API key after registering on yummy. Can you help me please?
very useful. thank you for the tutorial
Thanks 😊
Very well explained.😇But trying to show recipes on my application. However, it keeps loading and doesn’t show recipes on the Emulator. How I fix that.
This video is super duper awesome. it helped me a lot.
I’m glad 😃
You are a very good tutorial, thank you!
Thanks 😊
Could you help me with json['rating'] as double?
Its error in me
Edit: its my final String rating not final double rating. My bad
I created the exact same project but it's not working. All I see is circular progress indicator on the screen. *Can someone help me?*
Hi,I write all code in flutter without error but the program is not running out.
Good tutorial thank you.
You’re welcome, thanks for comment!:)
You really explained this very well
Thanks
Expected a value of type 'Iterable', but got one of type 'Null'
this kind of erroe is comming and the final app is loading noting displayed still
same error...how to solve?
I have the same error did you solve it?
Great
keep it up good tutorial
Thanks)
Thank you 😇Nice tutorial
Thanks
perfect explanation brother
Subbed ;)
Thanks 😊
Hi! Would it be possible to redo this tutorial recipe app with BLoC please? I'm struggling with learning it.
How can I get the data in complex JSON ?
how could you link the xcode emulator to vs code i need an answer sone pls, and ty
Sir I have error the data is not loading from Json using api only the circularProgressIndicator is cycling 😥😭
very thanks you. can you continue with detail screen?
i cant seem to get data from api call as i recieve null
how can to do change other recipe? I mean, if I want to get beef recipe
tysm
Thank you sir
Why is the data from the api not showing up?
awesome
Please, don't stop 🚀🚀🚀
sir how to use directions in yummuly API?
thanks🤝
for everyone who's getting errors in parsing response, put this code in RecipeApi class:
for (var i in data['feed']) {
if (i['type'] == "single recipe") temp.add(i['content']['details']);
}
it is still error
But still eroor the data is not loading 😥😭
tq now my code was functional but can you explain why we add the type and single recipe
whoa thanks it worked!
im still lost tho xD,
compared to javascript way of consuming api this is abit complicated lol
Thanks a lot!
😊
API isn't working nowadays.
this video was so informative and the quality of video was awesome please can you make a video on how to send Post request in flutter thanks
Sure!
Why not use Null safety. So many errors.
This is what i need
I'm glad to hear it!
idk why and idk what is the problem is but last step is not working for me..... it stays at loading and turns into a time out error.. btw it was amazing video taught me lots of things thankss
sorma ilayda bende de aynısı oldu kaldı orda
thank you
Np 😉
Amazing
Thanks 😊
api link is not working
Excuse me, i have a question. Can you explain (or give the example) in the for loop if you want get all the data in the feed
I mean in 9:20 you want to get all data in details, so the for loop is var i on data['feed'] and you add ['content']['details'], can you explain if i want to use for loop to get all feed data
zenkyuu
is this tutorial in null safety? im getting error making api calls like null is not a subtype of string
No, it's not a null safety tutorial
bro just pls try to explain working of json in flutter
I would like to subscribe and like for the youtube algorithm. Helped me find this video by recommending it to me.
Thanks 😊 I appreciate you
(NoSuchMethodError: The method '[]' was called on null. ?
have you find any solutions?
same error bro and still i couldn't find solution can any help us
@@furquanahmad846 null safety issue...still trying to fix it
Loved the tutorial. I learned a lot about APIs.
I encountered a problem (copy and pasting your code) when I try to return the RecipeCard in home.dart
error: 4 positional arguments expected, but 0 found
I copy and pasted your recipe.dart, recipe_card.dart and home.dart
Any idea what could be wrong?
If you hover RecipeCard, you will see that it has 4 required arguments. You need to add them. Hopes that help 😊
@@oflutter I did exactly that. I copy and pasted your code. Error = 4 positional arguments expected, but 0 found
return RecipeCard(
title: _recipes[index].name,
cookTime: _recipes[index].totalTime,
rating: _recipes[index].rating.toString(),
thumbnailUrl: _recipes[index].images);
I thought it couold be in the declaration of the Recipe class,...but I also pasted your code for that
Post your full project on git, and send me a link I will check. If you want to, you can email me privately: hello@oflutter.com
@@oflutter Thank you. Email sent
Hi, what programming languages is this?
Dart
If someone does not see the api in debug mode, you need to add a tag parameter in rapid api.
Thanks
Have you thought about a social media app tutorial?
Yes, I will make it at some point
Thanks for the tutorial, but now your code doesn't work and needs updating.
1. @required --> required (recipe_card.dart)
2. recipe.dart / Recipe ({.. / before every "this." needs --> required
But I couldn't figure out the last error I get in home.dart. "Error: Field '_recipes' should be initialized because its type 'List' doesn't allow null"
Any ideas how to fix this?
These problems appear when SDK is sdk: ">=2.12.0 =2.7.0
Unfortunately still couldn't run the app. Seems that these "null" errors must be fixed after the Flutter latest updates
I have the same error, how can I solve it ?
I am getting the following error:
Unhandled Exception: type 'Null' is not a subtype of type 'String' in type cast
Can you please help?
What video time ?
@@oflutter It is coming when I'm taking data from the api in the list.. As if the format is not supported
@@shailjatripathi1268 you find any solution..?
Amazing, can you please do a tutorial about rest api from woocommerce to flutter app ?
Thanks for comment! Yea, that my be interested. Will take in consideration
you will boom the other's tutorial
Hopefully 😁
The Yummly Recipe API used in this video ceased operation effective September 30, 2019 - so don't waste your time with this tutorial, I can't believe the API ceased to be available 7 months before this video was last edited.
Yummly Recipe API was updated 4 month ago, and it's still working :D
@@oflutter The Yummly API is no longer accepting new applications, it's still working for existing users, hence your perception, but new users can't access it - hence my comments.
Not sure about that, just logged under new account, everything is ok
@@oflutter what URL did you use to create a new account ?
Same what I provided in video
pembohong