Learning Flutter Redux - what is wrong with this code?

Question

I am just getting into Flutter, Dart and Redux. Have followed a YouTube video to modify the default Flutter example to use Redux but its failing for me and I still have a hard time understanding exceptions and reacting to them effectively. Here is the code:

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
import 'package:redux/redux.dart';
import 'package:flutter_redux/flutter_redux.dart';

// following this youtube video: https://youtu.be/X8B-UzqEaWc

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

@immutable
class AppState {
  final int counter;
  AppState(this.counter);
}

// actions
enum Actions { increment }

// pure function
AppState reducer(AppState prev, action) {
  if(action == Actions.increment) {
    return new AppState(prev.counter + 1);
  }
  return prev;
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData.dark(),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {  

  final store = new Store(reducer, initialState: new AppState(0));

  //print(store.state.counter); <----- Undefined class 'counter'.

  @override
  Widget build(BuildContext context) {
    return new StoreProvider(
      store: store,      
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text("Flutter Redux"),
        ),
        body: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(
                'You have pushed the button this many times:',
              ),
              new StoreConnector(
                converter: (store) => store.state.counter,
                builder: (context, counter) => new Text(
                  "$counter",
                  style: Theme.of(context).textTheme.display1,
                  )
              )
            ],
          ),
        ),
        floatingActionButton: new StoreConnector<int, VoidCallback>(
          converter: (store) {
            return () => store.dispatch(Actions.increment);
          },
          builder: (context, callback) => new FloatingActionButton(
            onPressed: callback,
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          ),
        ) 
      ),
    );
  }
}

So first of all, when I try to run this, I am getting an exception that states that "The following NoSuchMethodError was thrown building StoreConnector(dirty): I/flutter (20662): The getter 'store' was called on null.". Secondary question is why the print method highlighted in the code is not recognizing counter getter? Thanks.

Answer 1

The problem was that I had "dart.previewDart2" set to true and I guess something might be screwed up in the latest preview build. Once I set the option to false, all worked good.

Details:

• Got to File -> Preferences -> Settings.
• Type 'dart" in the search box.
• Once you find the setting dart.previewDart2, click on the pencil icon to the left of it and select "Copy to Settings".
• On the right hand side in user settings, set the setting to true.