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

前端 未结 3 1849
鱼传尺愫
鱼传尺愫 2020-12-06 12:11

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

return new Container(
  ...
  decoration: new BoxDecoration(
    gradient: ne         


        
3条回答
  •  难免孤独
    2020-12-06 12:35

    As explained by the accepted answer, const constructors are a small optimization.

    In dart a const MyObject(42) will only be allocated once even when you call it hundreds of time. Which means less memory allocation > faster


    But isn't it a negligible optimization ?

    Well, from dart point of view, yes. But we're in flutter here. We also have a Widget tree that can also use const constructors. Which means that we could change your code example to something like this :

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

    Here, thanks to Color being a constant, we managed to get a constant LinearGradient, and ultimately a constant DecoratedBox widget. So not only will the DecoratedBox widget be instantiated only once ; but thanks to widgets being immutable ; Flutter will recognize that the widget is the same.

    Consequence :

    • The whole sub-tree of DecoratedBox will be built once.
    • The associated RenderObject (RenderDecoratedBox in this case) will be not be updated at all even when it's parent Container change

    This is explained in "Flutter's layered design" video talk. At 31mn to be exact. But I'd suggest to start the video from here to have a bigger understanding of what's skipped.

    PS : Some widgets don't have a const constructor at all. Such as Container. But in the case of Container you could simply use a DecoratedBox instead, which is basically what Container use under the hood. The advantage here is that DecoratedBox do have a const constructor.

提交回复
热议问题