themed_material_component_v2.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

import 'dart:ui' show lerpDouble;

class FooThemeData extends Diagnosticable {
  const FooThemeData({
    this.color,
    this.shape,
  });

  final Color color;
  final ShapeBorder shape;

  FooThemeData copyWith({
    Color color,
    ShapeBorder shape,
  }) {
    return FooThemeData(
      color: color ?? this.color,
      shape: shape ?? this.shape,
    );
  }

  static FooThemeData lerp(FooThemeData a, FooThemeData b, double t) {
    assert(t != null);
    if (a == null && b == null)
      return null;
    return FooThemeData(
      color: Color.lerp(a?.color, b?.color, t),
      shape: ShapeBorder.lerp(a?.shape, b?.shape, t),
    );
  }

  @override
  int get hashCode {
    return hashValues(
      color,
      shape,
    );
  }

  @override
  bool operator ==(Object other) {
    if (identical(this, other))
      return true;
    if (other.runtimeType != runtimeType)
      return false;
    final FooThemeData typedOther = other;
    return typedOther.color == color
        && typedOther.shape == shape;
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(ColorProperty('color', color, defaultValue: null));
    properties.add(DiagnosticsProperty<ShapeBorder>('shape', shape, defaultValue: null));
  }
}

class FooTheme extends InheritedWidget {
  const FooTheme({
    Key key,
    @required this.data,
    Widget child,
  }) : assert(data != null), super(key: key, child: child);

  final FooThemeData data;

  static FooThemeData of(BuildContext context) {
    FooTheme fooTheme = context.inheritFromWidgetOfExactType(FooTheme);
    return fooTheme?.data ?? Theme.of(context).fooThemeData;
  }

  @override
  bool updateShouldNotify(FooTheme oldWidget) => data != oldWidget.data;
}

/*
ThemeData gets a new field and all of the related plumbing:
  final FooThemeData fooTheme;
Which is initialized like this:
    fooTheme ??= const FooThemeData();
*/

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

  final Color color;
  final ShapeBorder shape;

  @override
  Widget build(BuildContext context) {
    final TextTheme textTheme = Theme.of(context).textTheme;
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    final FooThemeData fooTheme = FooTheme.of(context);
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 300,
          height: 300,
          child: Card(
            color: color ?? fooTheme.color ?? colorScheme.primary,
            shape: shape ?? fooTheme.shape,
            child: Center(
              child: Text(
                'Hello Word',
                style: textTheme.display1.copyWith(color: colorScheme.onPrimary),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: FooTheme(
      data: FooThemeData(color: Colors.purple),
      child: Foo(),
    ),
  );
}