I've gotten feedback that this library, asking for more comments within the code demonstrating the flow of these apps.
[ ] vanilla
[ ] redux
[ ] built_redux
[ ] inherited_widget
[ ] scoped_model
Example from Scott Stoll:
import "1_main.dart";
import '5_MyInheritedWidget.dart';
import '6_MiddleWidget.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
/*Brian,
Use the TODOs to follow the logic of how this code flows. Hopefully you'll
agree that this explains what's going on here clearly enough that a 5 year old
could follow it. "Explain it to me like I'm 5" is a great way to go when
trying to teach someone things for their very first time. There are more notes
at the bottom of the page, after you're done.*/
class BaseStatefulWidgetState extends State<BaseStatefulWidget> with WidgetsBindingObserver {
// TODO (1) var "name" will store the current name during rebuild, much like "Saved Instance State" would in Android
// TODO (6) Store the new name here, then go rebuild
String name = '..loading';
static const int _NUMBER_OF_USERS = 10;
// TODO (2) 'i' is used to track which record we want within the JSON data
int i = 0;
onTap() {
// TODO: (3) User has tapped. Incrementing i tells us which name to get from the JSON data next (1st, 2nd, etc.).
i++;
_getName();
}
@override
void didChangeAppLifecycleState(AppLifecycleState appLifecycleState) {
}
_getName() async {
// TODO (4) Start async task for JSON operation. Fetch data & get name for record number 'i'
var res = await http.get('https://jsonplaceholder.typicode.com/users');
var name = JSON.decode(res.body)[i % _NUMBER_OF_USERS]['name'];
// TODO (5) Send the name value of the above record to the global var "name" and trigger setState
setState(() => this.name = name);
}
@override
void initState() {
super.initState();
_getName();
WidgetsBinding.instance.addObserver(this);
}
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
}
@override
Widget build(BuildContext context) {
// TODO (6) Notice that MyInheritedWidget is built / rebuilt with the current global name value.
return new MyInheritedWidget(
// TODO (7) MyInheritedWidget has the child MiddleWidget, so the UI widgets are going to be children of MyInheritedWidget
name: name, onTap: onTap, child: const MiddleWidget());
}
/*From here the code leaves this class and goes to another class that builds the rest of the UI,
including a text field that contains the updated name. The overall point is that, when dealing with a file
people are supposed to be learning from, we really want to idiot proof the explaination of how the code
flows.It's only when people understand the overall structure and how it flows that they'll be able to
go on and implement it in their own creations. By using a TODO list, the student can move from step
to step with a simple mouse click.
Of course, in the working world, code that people are not trying to learn from should merely be expressive
enough that people who are already familiar with the SDK will be able to follow.*/
}
I've gotten feedback that this library, asking for more comments within the code demonstrating the flow of these apps.
Example from Scott Stoll: