Flutter Heroes

New post on /r/flutterdev subreddit:

<b>future? futurebuilder? I'm struggling just a bit</b>
I've been playing around with flutter. I'm completely new to app development, but I've been building backends in PHP for over a decade now.I'm lost on some of the syntax. The app I'm playing with communicates with some API entry points for an existing site of mine. I've so far been mashing together various examples and failing gracefully a lot. I wanted to see if someone could give me some human friendly explainers on some of the code.My questions are largely from this example: <a href="https://flutter.dev/docs/cookbook/networking/fetch-data">https://flutter.dev/docs/cookbook/networking/fetch-data</a>In step 4, they create the initial call for http data<pre>FutureBuilder<Post>( future: fetchPost(), builder: (context, snapshot) { if (snapshot.hasData) { return Text(snapshot.data.title); } else if (snapshot.hasError) { return Text("${snapshot.error}"); } // By default, show a loading spinner. return CircularProgressIndicator(); }, ); </pre>They call FutureBuilder<Post> - why Post? Is that because they built a future of that previously? Or is Post a reserved word? Since This is getting a JSON object from the web, I am possibly confusing a GET and POST request. I think this is just the naming here. But they called it in the next line, fetchPost(), if they're calling the function, why specify <Post>? I don't fully understand the necessity of those two pieces.Then the builder - What is the context and what is the snapshot? From being able to read the function, it looks like the snapshot gets the data from the JSON request. Context I'm guessing passes on something, but I don't fully get what. Are the names changeable? Instead of snapshop, can I call is 'jsondata'?In the step before that, they create the Future. I don't really get what a Future is or does.<pre>Future<Post> fetchPost() async { final response = await http.get('https://jsonplaceholder.typicode.com/posts/1'); if (response.statusCode == 200) { // If server returns an OK response, parse the JSON. return Post.fromJson(json.decode(response.body)); } else { // If that response was not OK, throw an error. throw Exception('Failed to load post'); } } </pre>I am guessing this is a Future of the Post object they created in the first step. If that's the case, why isn't it part of that object? If it is part of that object, then why does the function name matter? Are there instances where you'd want Future<Post> thisFunction() as well as Future<Post> thatFunction()?The Post class in the previous step has something called a factory. This seems to process some data then feed it back into the object. I'm used to objects having constructors, but a factory is new. Am I correct on my interpretation here?Finally, the way they kick this off is weird to me.<pre>MyApp(post: fetchPost()) </pre>Why are the calling the class by passing it the function? And why are they passing post: fetchPost() and not just fetchPost()? This is why I'm inclined to believe the function name does not make it unique on it's own.Oh and in the MyApp class, what the heck is this?<pre>MyApp({Key key, this.post}) : super(key: key); </pre>I don't understand this. I know we defined a post variable in the class that references the Future<Post>, but I don't really get this. Why not just call the function directly? Can't that be done?I'm sure there are gaps in my knowledge since this isn't what I usually work in. I've been googling a lot and not getting too far. I'm hoping someone can just give me a nice human break down. Any bits of it you care to explain, I'd be happy to read.I can report that I've been working at what feels like a nice pace. I'm working on my login mechanism, already have a data feed that I can display and am deciding what to do next. None of it looks stellar, but I love it. It feels like the first time I ever played with HTML. None of it looks amazing, but I made it, and that makes it amazing. I hope you guys can…

docs.flutter.dev

Fetch data from the internet

How to fetch data over the internet using the http package.

431 views15:42