MDC-103 - Codelabs page - Step 5 - overriding accentColor doesn't work

[bonlot]

I realise there are already closed bugs regarding this but I'd like to suggest that the code be checked again.

In my experience, to get the final pictured behaviour of the login screen in step 5 of MDC-103 on the codelabs page (with the border of the focused TextField being coloured kShrineBrown900) it is necessary to override primaryColor. Overriding accentColor doesn't work.

But overriding accentColor in step 9 does give the final pictured behaviour of the login screen (with the border of the focused TextField being coloured kShrineAltYellow).

I have checked this with the 104-starter_and_103-complete branch GitHub code.

With reference to the discussion of issue #106, looking through input_decorator.dart this behaviour appears to make sense.

In step 5, the ThemeData Brightness is set to light so, as far as I can tell, _getActiveColor (and _getDefaultBorder) of input_decorator.dart ultimately result in primaryColor being used for the borderColor of the focused TextField.

In step 9, the ThemeData Brightness is set to dark so _getActiveColor ultimately results in accentColor being used for the borderColor of the focused TextField.

Cheers.

[jswh]

same problem

Per description by @boltonhenry , the code should be

class AccentColorOverride extends StatelessWidget {
  const AccentColorOverride({Key key, this.color, this.child})
      : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Theme(
      child: child,
      data: Theme.of(context).copyWith(
        accentColor: color,
        brightness: Brightness.dark
      ),
    );
  }
}

[willlarche]

This should be corrected now both in document and sample code. Thank you!

[li2]

@willlarche
The codelab doc is still not updated, coz someone like me might just follow the codelab doc without reading the codebase. thanks

https://codelabs.developers.google.com/codelabs/mdc-103-flutter/#4