TextFormField Focus Causes Rebuild of StoreConnector Widget

[jpgilchrist]

I have a situation where I need the actions from the store, but not any state. So, I setup a widget like this:

class LoginLayout extends StoreConnector<AppState, AppActions, AuthState> {
  final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  final GlobalKey<FormFieldState<String>> _emailKey = new GlobalKey<FormFieldState<String>>();
  final GlobalKey<FormFieldState<String>> _passwordKey = new GlobalKey<FormFieldState<String>>();

  @override
  AuthState connect(AppState state) => state.auth;

  @override
  Widget build(BuildContext context, AuthState state, AppActions actions) {
    print('render login layout $state');

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Veoci Login'),
      ),
      body: new Form(
          key: _formKey,
          autovalidate: true,
          child: new Container(
            padding: new EdgeInsets.all(16.0),
            child: new Column(
              children: <Widget>[
                new TextFormField(
                  key: _emailKey,
                  validator: _validate,
                  autofocus: true,
                  decoration: new InputDecoration(icon: const Icon(Icons.person), labelText: 'Email'),
                ),
                new TextFormField(
                  key: _passwordKey,
                  validator: _validate,
                  decoration: new InputDecoration(
                    icon: const Icon(Icons.lock),
                    labelText: 'Password',
                  ),
                  obscureText: true,
                  onFieldSubmitted: (String value) {
                    _handleSubmitted(context);
                  },
                ),
                new Container(
                    padding: const EdgeInsets.symmetric(vertical: 20.0),
                    alignment: Alignment.centerRight,
                    child: new RaisedButton(
                        child: new Text('Submit'),
                        onPressed: () {
                          _handleSubmitted(context);
                        }))
              ],
            ),
          )),
    );
  }
  ...
}

FYI I am refactoring this from use with redux_dart in favor of built_redux since I've used built_value for my models.

Anyway, I'm not doing anything special here, but when the TextFormField with autofocus: true is focused the _AnimatedState causes the entire state to be "dirty" and re-render LoginLayout. I removed the StoreConnector and turned it into a basic StatefulWidget and the issue went away.

I'm fairly new to Flutter, so I don't quite understand the guts of the rendering engine, but something is clearly causing it to be marked dirty when StoreConnector is used.

[jpgilchrist]

FYI I just tried it with a regular TextField as well and it has the same issue. I'm concerned that it's any widget with an animation.

[jpgilchrist]

I wonder if it's how I set up my data models? Or the connect function? Just in case... here's my app_state.dart

library app_state;

import 'package:built_collection/built_collection.dart';
import 'package:built_value/built_value.dart';
import 'package:built_value/serializer.dart';
import 'package:veoci/models/models.dart';

part 'app_state.g.dart';

abstract class AppState implements Built<AppState, AppStateBuilder> {
  static Serializer<AppState> get serializer => _$appStateSerializer;

  AuthState get auth;

  HomeState get home;

  AppState._();

  factory AppState() => _$AppState._(auth: new AuthState(), home: new HomeState());
}

abstract class AuthState implements Built<AuthState, AuthStateBuilder> {
  static Serializer<AuthState> get serializer => _$authStateSerializer;

  @nullable
  VProfile get currentUser;

  AuthState._();
  factory AuthState() => _$AuthState._(currentUser: null);
}

abstract class HomeState implements Built<HomeState, HomeStateBuilder> {
  static Serializer<HomeState> get serializer => _$homeStateSerializer;

  BuiltList<VAlert> get alerts;

  BuiltList<VListItemInvocation> get workflows;

  BuiltList<VDashboard> get apps;

  @nullable
  VDashboard get dashboard;

  BuiltList<VChatRoom> get rooms;

  BuiltList<VTask> get tasks;

  HomeState._();

  factory HomeState() => new _$HomeState._(
      alerts: new ListBuilder<VAlert>([]).build().toBuiltList(),
      workflows: new ListBuilder<VListItemInvocation>([]).build().toBuiltList(),
      apps: new ListBuilder<VDashboard>([]).build().toBuiltList(),
      rooms: new ListBuilder<VChatRoom>([]).build().toBuiltList(),
      tasks: new ListBuilder<VTask>([]).build().toBuiltList(),
      dashboard: null,
  );
}

[jpgilchrist]

Sorry, I just realized that this should be located in the flutter_built_redux repo