Oflutter: Create a Recipe List App using Flutter and API
HTML-код
- Опубликовано: 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 🤗
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!
Yo don't stop these tutorials 😢😢😢😢
U have performance to become a really leading RUclipsr i can assure u that
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 ❤
Extremely well done example, just what I needed, great job 👍😃
Glad to help you 😌
This tutorial was awesome! You should make more videos like this!
Sure! I will
thanks before even finishing the video, keep up the good work
Thanks for the tutorial. I made a hate commend early today but it turns out it was a foolish mistake of mine. Great content.
Amazing tutorial with clear voice 😍
Great efforts sir we want more videos abouts flutter projects🤩
Great video, thanks for the Input.
Very good tutorial. I need to design my own api with my urls I own. This helps me get some insights!
You are welcome 🤗
Excellent! Please consider making a tutorial with flutter integrated with redux architecture. Thanks
Sure, I will think about it :)
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'
Greate explanation, subbed!
This was very helpful for me , ❤️❤️❤️
Thank you so much for the knowledge
Thank you, great explanation. Could you please do a toutrial about notification
very useful. thank you for the tutorial
Thanks 😊
You are a very good tutorial, thank you!
Thanks 😊
This video is super duper awesome. it helped me a lot.
I’m glad 😃
Thanks, brother for the knowledge
kudos , you the best man.
Perfect video!! Thanks
You are welcome 🙏
i leaned so much from your video, thank u
You are welcome
perfect explanation brother
Subbed ;)
Thanks 😊
You really explained this very well
Thanks
Incredible video bro
Good tutorial thank you.
You’re welcome, thanks for comment!:)
Thank you 😇Nice tutorial
Thanks
Hello, great video but is it possible to add a click function on each item of the list?
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?*
Great
Thank you sir
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.
Thanks a lot!
😊
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.
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
awesome
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?
thanks🤝
tysm
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!
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?
very thanks you. can you continue with detail screen?
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
keep it up good tutorial
Thanks)
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 ??
zenkyuu
thank you
Np 😉
This is what i need
I'm glad to hear it!
Please, don't stop 🚀🚀🚀
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
Amazing
Thanks 😊
Hi,I write all code in flutter without error but the program is not running out.
Hi! Would it be possible to redo this tutorial recipe app with BLoC please? I'm struggling with learning 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
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
how can to do change other recipe? I mean, if I want to get beef recipe
How can I get the data in complex JSON ?
i cant seem to get data from api call as i recieve null
Sir I have error the data is not loading from Json using api only the circularProgressIndicator is cycling 😥😭
Why is the data from the api not showing up?
how could you link the xcode emulator to vs code i need an answer sone pls, and ty
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
sir how to use directions in yummuly API?
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
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
bro just pls try to explain working of json in flutter
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
(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
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 ?
you will boom the other's tutorial
Hopefully 😁
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
api link is not working
Hi, what programming languages is this?
Dart
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..?
Why not use Null safety. So many errors.
API isn't working nowadays.
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