What does widget.something in flutter/dart actually call?

Question

I've seen people accessing certain variables via this: widget.something. What is widget. actually doing ? What does it reference.

For example (some random code I was working on):

import 'package:flutter/material.dart';
import 'Constants.dart';
import 'Lesson.dart';
import 'StaticMethods.dart';
import 'DetailPage.dart';
import 'package:garuda_academy_app/Authentication.dart';

class LessonPage extends StatefulWidget {
  LessonPage({Key key, this.auth, this.userId, this.onSignedOut, this.title}) : super(key: key);

  final String title;

  final BaseAuth auth;
  final VoidCallback onSignedOut;
  final String userId;

  @override
  _LessonPageState createState() => _LessonPageState();
}

class _LessonPageState extends State<LessonPage> {
  List lessons;

  @override
  void initState() {
    lessons = StaticMethods.getLessons();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    ListTile makeListTile(Lesson lesson) => ListTile(
          contentPadding:
              EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
          leading: Container(
            padding: EdgeInsets.only(right: 12.0),
            decoration: new BoxDecoration(
                border: new Border(
                    right: new BorderSide(width: 1.0, color: Colors.white24))),
            child: IconButton(
              icon: Icon(Icons.file_download, color: Colors.white),
              onPressed: (){},
            ),
          ),
          title: Text(
            lesson.title,
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),

          subtitle: Row(
            children: <Widget>[
              Expanded(
                  flex: 1,
                  child: Container(
                    child: LinearProgressIndicator(
                        backgroundColor: Color.fromRGBO(209, 224, 224, 0.2),
                        value: lesson.indicatorValue,
                        valueColor: AlwaysStoppedAnimation(Colors.green)),
                  )),
              Expanded(
                flex: 4,
                child: Padding(
                    padding: EdgeInsets.only(left: 10.0),
                    child: Text(lesson.level,
                        style: TextStyle(color: Colors.white))),
              )
            ],
          ),
          trailing:
              Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 30.0),
          onTap: () {
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => DetailPage(lesson: lesson)));
          },
        );

    Card makeCard(Lesson lesson) => Card(
          elevation: 8.0,
          margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
          child: Container(
            decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
            child: makeListTile(lesson),
          ),
        );

    final makeBody = Container(
      child: ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemCount: lessons.length,
        itemBuilder: (BuildContext context, int index) {
          return makeCard(lessons[index]);
        },
      ),
    );

    final makeBottom = Container(
      height: 55.0,
      child: BottomAppBar(
        color: Color.fromRGBO(58, 66, 86, 1.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.school, color: Colors.white),
              onPressed: () => StaticMethods.goToWidget(context, new LessonPage(title: LESSON_PAGE_TITLE, userId: widget.userId, ,)),
            ),
            IconButton(
              icon: Icon(Icons.flight_takeoff, color: Colors.white),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.account_box, color: Colors.white),
              onPressed: () {},
            )
          ],
        ),
      ),
    );
    final topAppBar = AppBar(
      elevation: 0.1,
      backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
      title: Text(widget.title),
      automaticallyImplyLeading: false,
    );

    return Scaffold(
      backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
      appBar: topAppBar,
      body: makeBody,
      bottomNavigationBar: makeBottom,
    );
  }
}

If you notice all the way at the bottom topAppBar uses widget.title. Now this is accessing the title from LessonPage, which I don't get. What exactly does widget.something access?

Answer 1

If you see the code for State<T extends StatefulWidget> inside framework.dart file you will find that widget is nothing but a getter for the private class variable _widget.

framework.dart

abstract class State<T extends StatefulWidget> extends Diagnosticable {
  T get widget => _widget;
  T _widget;
}

The abstract class State defines the widget property getter as below -

A State object's configuration is the corresponding StatefulWidget instance. This property is initialized by the framework before calling initState. If the parent updates this location in the tree to a new widget with the same runtimeType and Widget.key as the current configuration, the framework will update this property to refer to the new widget and then call didUpdateWidget, passing the old configuration as an argument.

---

In simpler words, the widget property of the State class defines the present StatefulWidget that you State is referring to, and hence it can be used to access the run time properties of the StatefulWidget, which as you can see in your example can be one of the values from title to userId.

Hope this helps!