CS 492 Week 4 Exploration 5 Exercise

hint.txt

Look for the occurrences of FIXME.

FIXME 1
Be sure that the parameterized type for State matches the class
name of the state "owner." Who's State is this? It belongs to the
MyHomePage widget.

FIXME 2
Although this method changes the state, it doesn't make Flutter
aware of the state change. Make flutter aware of the state change
so that it knows to rebuild the necessary widgets, using the new
state. Call setState, passing it a closure that wraps the state change.

FIXME 3
The whole point of using the StatefulWidget machinery is because some
widget relies on the state. Be sure to use the state you've got
in this widget (eg display the counter value).

FIXME 4
Careful, function invocations are different than passing something
a function by its name. onPressed needs a function, not the return
value of a function call, per se.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<FIXME_1> {
  int _counter = 0;

  void _incrementCounter() {
    // FIXME 2
    _counter++;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You have pushed the button this many times:'),
            Text(
              'FIXME 3',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter(), // FIXME 4
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

solution.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

// FIXED: Use the widget type for the State.
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() { // FIXED: Call setState, and wrap state changes in a closure.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter', // FIXED: Use the state in the widget.
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // FIXED: Function, not a function call.
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}