main.dart

import 'package:flutter/material.dart';

/// A customizable low level widget with some default value
/// Default to have a red background
class SomeBaseWidget extends StatelessWidget {
  const SomeBaseWidget({
    Key key,
    this.color = Colors.red,
    this.child,
  }) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    // TODO: uncomment to fix, and remove the default value
    // final color = this.color ?? Colors.red;
    return Container(
      color: color,
      alignment: Alignment.center,
      child: child,
    );
  }
}

/// A widget that uses [SomeBaseWidget] but still expose some customization
/// As is, it is useless – it's just for the sake of example
class SuperWidget extends StatelessWidget {
  const SuperWidget({Key key, this.color, this.child}) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return SomeBaseWidget(
      // WARNING: breaks default value!!!
      color: color,
      child: child,
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        // We did not override `color` here as we don't need it
        // It should therefore use the default value, but fails to do so
        body: SuperWidget(
          child: Text('This is supposed to have a red background'),
        ),
      ),
    ),
  );
}