Flutter / Dart referencing function vs inline execution with Widgets

Question

I am trying to understand why the Flutter / Dart HotReload does not work if I reference the appBar: widget as opposed to defining the code inline. Why?

Here is the sample code:

class AppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( 
      appBar: appBar, 
    );
  }
}

AppBar appBar = AppBar(
  title: new Text("App Title"),
);

Notice appBar: appBar is a reference to the AppBar(...) widget definition. In this case, if I change the title: property text, it will not hot reload even though both IDE (VSCode or AStudio) says it reloads. I need to rebuild to make it work.

But if I move the AppBar(...) widget definition into appBar: AppBar(...) and change the title, it Hot Reloads.

Ok, I thought to copy the AppBar appBar=AppBar(...) as a method inside the class. Hot reload works. So I will assume functions outside a class do not hot reload? — user603749
– user603749, Commented Mar 24, 2019 at 0:08

Rémi Rousselet · Accepted Answer · 2019-03-24 00:24:51Z

2

This happens because Flutter's hot-reload is "stateful". It preserves the state of all variables – including the variable you defined.

As such, while you can change the sources of a variable, it will keep its previous state.

In any cases, you shouldn't extract widgets as global variables – but instead, extract them as StatelessWidget and use const constructor.

This has the same performances benefits while being compatible with hot-reload.

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyAppBar({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: const Text('App title'),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

answered Mar 24, 2019 at 0:24

Rémi Rousselet

280k89 gold badges559 silver badges456 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flutter / Dart referencing function vs inline execution with Widgets

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related