CS 492 Week 8 Exploration 1 Exercise State

main.dart

import 'package:flutter/material.dart';


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

class App extends StatelessWidget { // TODO: Convert to StatefulWidget
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(title: Text('Example')),
        body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          // TODO: Pass down state (once lifted up here).
          children: [DecreasingWidget(), IncreasingWidget()] // TODO: And eventually, a state change function
        )
      )
      )
    );
  }
}

// TODO: After lifting state out of here, change to StatelessWidget
class IncreasingWidget extends StatefulWidget {
  @override
  State createState() => IncreasingWidgetState();
}

class IncreasingWidgetState extends State<IncreasingWidget> {
  
  Counter counter; // TODO: Lift the state up.
  
  void initState() {
    super.initState();
    counter = Counter(initialValue: 0);
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('${counter.value} done', style: Theme.of(context).textTheme.headline3),
        CounterChangingButton() // TODO: Pass down a callback into the constructor.
                                //       After lifting state, you may need to pass
                                //       this down twice.
      ]
    );
  }
}

class DecreasingWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: Use the state to display the number of taps left.
    return Container(
      child: Text('## left', style: Theme.of(context).textTheme.headline3)
    );
  }
}

class CounterChangingButton extends StatelessWidget {

  final void Function() updateCounter;

  CounterChangingButton({this.updateCounter});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: updateCounter,
        child: Text('Tap Me!', style: Theme.of(context).textTheme.headline3)
      );
  }
}


class Counter {

  int value;

  Counter({int initialValue}) : value = initialValue;

  void increment() {
    ++value;
  }

}

solution.dart

import 'package:flutter/material.dart';


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

class App extends StatefulWidget {
  @override
  State createState() => AppState();
}

class AppState extends State<App> {
  
  Counter counter; // DONE: Lifted state up.
  
  void initState() {
    super.initState();
    counter = Counter(initialValue: 0);
  }

  void updateCounter() {
    setState( () {
      counter.increment();
    });
  }
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(title: Text('Example')),
        body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            DecreasingWidget(counter: counter),
            IncreasingWidget(counter: counter, updateCounter: updateCounter)
          ]
        )
      )
      )
    );
  }
}

class IncreasingWidget extends StatelessWidget {
    
  final Counter counter;
  final void Function() updateCounter;
  
  IncreasingWidget({this.counter, this.updateCounter});
  
  @override
  Widget build(BuildContext context) {

    return Column(
      children: [
        Text('${counter.value} done', style: Theme.of(context).textTheme.headline3),
        CounterChangingButton(updateCounter: updateCounter)
      ]
    );
  }
}

class DecreasingWidget extends StatelessWidget {

  final Counter counter;
  
  DecreasingWidget({this.counter});
  
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('${100 - counter.value} left', style: Theme.of(context).textTheme.headline3)
    );
  }
}

class CounterChangingButton extends StatelessWidget {

  final void Function() updateCounter;

  CounterChangingButton({this.updateCounter});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: updateCounter,
        child: Text('Tap Me!', style: Theme.of(context).textTheme.headline3)
      );
  }
}


class Counter {

  int value;

  Counter({int initialValue}) : value = initialValue;

  void increment() {
    ++value;
  }

}