How do I run the debugger in Android Studio in order to figure out this error?

Issue

When my app goes from one screen to the other, there is a very brief moment where the app shows the red screen with some error about a Null in yellow letters and then it disappears. Is there a way to run Android Studio in a "step-by-step" way so that I can see exactly what variable is Null and when it gets filled?

======== Exception caught by widgets library =======================================================
The following _TypeError was thrown building ChatScreen(dirty, dependencies: [_InheritedStateContainer], state: _ChatScreenState#93181):
type 'Null' is not a subtype of type 'String'

Code:

return GestureDetector(
                  child: groupWidget(groupName, groupID),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => ChatScreen(groupID: groupID,)), //The error is on this line
                    );
                  }
              );

Update: Ok so I found a way to start the debugger, set a breakpoint where the error was pointing to, and then stepped through each line using F7. It looks like the problem isn't actually on this starting screen, it's on the landing screen (which is strange because the console points to a line on the starting screen). The problem is with the variable groupName in the code below. For some reason it starts as Null and then gets filled. My intention here is that when the user loads this screen, the name of the group is retrieved from Firestore and then displayed at the top. Why would this variable be null if I'm initializing it in initState()?

class _ChatScreenState extends State<ChatScreen> {
  final database = Database();
  var groupMembersList = [];
  var groupName;
  FirebaseFirestore firestore = FirebaseFirestore.instance;
  late final Stream<QuerySnapshot> groupMembersStream = firestore.collection('groups').doc(widget.groupID).collection('GroupMembers').snapshots();

  @override
  void initState() {
    super.initState();
    initialize();
    activateGroupMembersListener();
  }

  void initialize() async {
    var tempGroupName = await database.getGroupName(widget.groupID);

    setState(() {
      groupName = tempGroupName;
    });
  }
  
  
  @override
  Widget build(BuildContext context) {
    final container = StateContainer.of(context);

    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          color: Colors.white,
          onPressed: () {
            container.stopMyApp();
            Navigator.pop(context);
          },
        ),
        title: Text(
          groupName, //ERROR IS HERE, THIS VARIABLE IS NULL
        ),
        
        //...rest of code//
        
        )
    )
    }
    
}
        

Solution

Adding a breakpoint where you initialized groupName should help, also at MaterialPageRoute line.

Answered By - Adedokun Emmanuel