What color system does flutter use and why do we use `const Color` instead of `new Color`

Question

Today I came over following snippet of code that implements gradient in flutter

return new Container(
  ...
  decoration: new BoxDecoration(
    gradient: new LinearGradient(
      colors: [
        const Color(0xFF3366FF), 
        const Color(0xFF00CCFF),
      ]
      begin: const FractionalOffset(0.0, 0.0),
      end: const FractionalOffset(1.0, 0.0),
      stops: [0.0, 1.0],
      tileMode: TileMode.clamp
    ),
  ),
),

And it raised 2 questions:

1) What color system is 0xFF3366FF this? it looks somewhat similar to HEX, but it isn't.

2) Why do we use const for const Color() opposed to new Color() I understand different between both, but const here feels unintuitive for me, I'd expect it to be creating a new Color() class instance, similarly to how we use new Text("Some text"). If it needs to be const, why isn't TileMode.clamp also a const?

Answer 1

When we use setState() Flutter calls the build method and rebuilds every widget tree inside it. The best way to avoid this is by using const costructors.

Use const constructors whenever possible when building your own widgets or using Flutter widgets. This helps Flutter to rebuild only widgets that should be updated

So if you have a StatefulWidget and you are using setState((){}) to update that widget and you have widgets like:

class _MyWidgetState extends State<MyWidget> {

  String title = "Title";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: <Widget>[
          const Text("Text 1"),
          const Padding(
            padding: const EdgeInsets.all(8.0),
            child: const Text("Another Text widget"),
          ),
          const Text("Text 3"),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          setState(() => title = 'New Title');
        },
      ),
    );
  }
}

If you run this code and press the floating action button, all the widgets defined as const won't get rebuilded.

For more info: const constructors

Answer 2

From the Flutter source

class Color {
  /// Construct a color from the lower 32 bits of an [int].
  ///
  /// The bits are interpreted as follows:
  ///
  /// * Bits 24-31 are the alpha value.
  /// * Bits 16-23 are the red value.
  /// * Bits 8-15 are the green value.
  /// * Bits 0-7 are the blue value.
  ///
  /// In other words, if AA is the alpha value in hex, RR the red value in hex,
  /// GG the green value in hex, and BB the blue value in hex, a color can be
  /// expressed as `const Color(0xAARRGGBB)`.
  ///
  /// For example, to get a fully opaque orange, you would use `const
  /// Color(0xFFFF9000)` (`FF` for the alpha, `FF` for the red, `90` for the
  /// green, and `00` for the blue).
  const Color(int value) : value = value & 0xFFFFFFFF;

const instances are canonicalized.

If you have multiple const Color(0xFF00CCFF) in your code, only one instance will be created.

const instances are evaluated at compile time. In the Dart VM this is when the code is loaded, but in Flutter production AoT compilation is used and const values therefore provide a small performance benefit.

See also How does the const constructor actually work?