Ch 6.6: Need help understanding syntax of return statement

đź“š Official Books Flutter Apprentice
1

Chapter 6, section 6 includes the following code snippet:

// 1
return Consumer<TabManager>(builder: (context, tabManager, child) {
  return Scaffold(
      appBar: AppBar(
          title: Text(
            'Fooderlich',
            style: Theme.of(context).textTheme.headline6,
          ),
      ),
      // 2
      // TODO: Replace body
      body: pages[tabManager.selectedTab],
      bottomNavigationBar: BottomNavigationBar(
          selectedItemColor: Theme.of(context)
            .textSelectionTheme.selectionColor,
          // 3
          currentIndex: tabManager.selectedTab,
          onTap: (index) {
            // 4
            tabManager.goToTab(index);
          },
          items: <BottomNavigationBarItem>[
            const BottomNavigationBarItem(
                icon: Icon(Icons.explore),
                label: 'Explore',
            ),
            const BottomNavigationBarItem(
                icon: Icon(Icons.book),
                label: 'Recipes',
            ),
            const BottomNavigationBarItem(
                icon: Icon(Icons.list),
                label: 'To Buy',
            ),
          ],
      ),
    );
  },
);

I am having difficulty parsing the first line of this code. Abstracting out the details that I understand, I get this:

return Consumer<TabManager>(builder: (context, tabManager, child) { return Scaffold(...) });

Basically, it appears that the code returns a Consumer widget that is constructed with two arguments:

  1. “builder”, which is (context, tabManager, child)
  2. Syntax I don’t understand: { return Scaffold()}

Could someone explain this syntax use to me?

Thanks!

2

@pmjpmj

In summary when ever you need to listen to some state change, you can wrap your widget in a Consumer widget. When state changes, the builder method is triggered to rebuild the child widgets with the new state.

The Consumer widget is part of the provider package state management solution, you can find more info here:

This is just a small introduction to state management, i believe in the later chapters you will be introduced to the provider package. So feel free to jump to chapter 14 to understand more.

3

Thanks for the quick response!

I’m sorry, I wasn’t clear. I think my question is actually about Dart language syntax. What does it mean when you have a function with a parameter that is in curly braces like this:

return Foo( bar, { return Baz() });

Notice the curly braces and return statement inside the parameters to Foo.

I understand about Consumers and so forth, but this syntax is a mystery to me.

Thanks!

4

It’s called a closure. Think of it like a function. But the difference between a function and a closure is it has no name.

5

Let me try and help, sharing what a newbie like me understood of Dart, but @jomoka might correct me if I’m wrong.

The statement return Consumer( builder: (someArg) {some code},); is returning a constructor of an object called Consumer. This constructor takes an argument named builder. This builder is actually a function that has someArg as argument and a body that is between brackets.

Is it correct, @jomoka ?