Invalid constant value error when extracting a widget with a const TextStyle parameter

[stephane-archer]

Originally reported: Dart-Code/Dart-Code#5374

import 'package:flutter/material.dart';

class A extends StatelessWidget {
  const A({super.key});

  @override
  Widget build(BuildContext context) {
    const TextStyle h1 = TextStyle(color: Colors.red);
    return const Text("hello world", style: h1);
  }
}

extract widget Text("hello world", style: h1);

result:

import 'package:flutter/material.dart';

class A extends StatelessWidget {
  const A({super.key});

  @override
  Widget build(BuildContext context) {
    const TextStyle h1 = TextStyle(color: Colors.red);
    return ExtractedWidget(h1: h1);
  }
}

class ExtractedWidget extends StatelessWidget {
  const ExtractedWidget({
    super.key,
    required this.h1,
  });

  final TextStyle h1;

  @override
  Widget build(BuildContext context) {
    return const Text("hello world", style: h1);
  }
}

There is an error regarding h1 Invalid constant value.

expected result

Here is the correct code (the const keyword is not at the right place):

import 'package:flutter/material.dart';

class A extends StatelessWidget {
  const A({super.key});

  @override
  Widget build(BuildContext context) {
    const TextStyle h1 = TextStyle(color: Colors.red);
    return const ExtractedWidget(h1: h1);
  }
}

class ExtractedWidget extends StatelessWidget {
  const ExtractedWidget({
    super.key,
    required this.h1,
  });

  final TextStyle h1;

  @override
  Widget build(BuildContext context) {
    return Text("hello world", style: h1);
  }
}

[lrhn]

I'd suggest that the result becomes

import 'package:flutter/material.dart';

class A extends StatelessWidget {
  const A({super.key});

  @override
  Widget build(BuildContext context) {
    return const ExtractedWidget();
  }
}

class ExtractedWidget extends StatelessWidget {
  const ExtractedWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    const TextStyle h1 = TextStyle(color: Colors.red)
    return const Text("hello world", style: h1);
    // or
    // return const Text("hello world", style: TextStyle(color: Colors.red));
  }
}

That is, when extracting a widget expression that contains a free variable denoting a constant value, the result should have the same constant value. That may require either inlining the expression for the constant value, or introducing a local const variable for it in the new place, if the constant variable is local and not something that can be referenced from the new location. Or maybe hoisting the declaration.

Changing the expression to not be constant is a bigger change than duplicating a constant expression (which evaluates to the same canonicalized value no matter where it occurs).