Dart – Late Keyword

In Flutter, the late keyword is used to indicate that a non-nullable variable will be initialized later in the code. if the non-nullable variable does not initialize before it using, it raised an error.

For Example

Let’s create a non-nullable variable _title of type String and make it late.

late String _title;

Now if we do not initialize this variable and  print this non-nullable variable _title 

print(_title);

Now this gives the error something like that:

Error

Now if we want to remove this we have to initialize the variable it uses.

_title = "GeeksforGeeks";

Now if we see the output, It will work fine and print “GeeksforGeeks”. Let’s create a Flutter project to understand late keyword in more detail.

Step By Step Implementation

Step 1: Create a New Project in Android Studio or in Vs code

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

A material package gives us the essential functions and Parameters, Now call the runApp method that needs an Application in the main function.

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

In the above code, runApp method calls the class RunMyApp, Now we have to create it.

Step 3: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application and home property takes the MyWidget as a property.

Shortcut: For creating a stateless or Stateful widget, you can create a stateless or stateful widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.

class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});

@override
Widget build(BuildContext context) {
  return MaterialApp(
          debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.green),
        title: 'Flutter Late Keyword Example',
        home: MyWidget()
  );
 }
}

Step 4: Now we have to create the stateless widget or class MyWidget

This class or stateless widget returns the scaffold, which gives us to set the AppBar and body of the app. Further, the body contains the button by pressing we will show the dialog box, Dialog box further shows the title. But wait, first, we need to declare the non-nullable variable _title of type String.

late String _title;

After this, we will initialize the _title after the 2 seconds.

// simulate fetching data from an API
await Future.delayed(Duration(seconds: 2));

// set the value of _username
_title = 'GeekdForGeeks';

The class looks like below.

class MyWidget extends StatelessWidget {
  MyWidget({super.key});
  late String _title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Late Keyword Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showTitle(context),
          child: Text('Show Title'),
        ),
      ),
    );
  }

  void _showTitle(BuildContext context) async {
    // simulate fetching data from an API
    await Future.delayed(Duration(seconds: 2));

    // set the value of _username
    _title = 'GeekdForGeeks';

    // show the username in a dialog
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text(_title),
        content: Text('Late is Initialized by text : ${_title}'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('OK'),
          ),
        ],
      ),
    );
  }
}

Code Example

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.green),
        title: 'Flutter Late Keyword Example',
        home: MyWidget());
  }
}

class MyWidget extends StatelessWidget {
  MyWidget({super.key});
  late String _title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Late Keyword Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showTitle(context),
          child: Text('Show Title'),
        ),
      ),
    );
  }

  void _showTitle(BuildContext context) async {

    // simulate fetching data from an API
    await Future.delayed(Duration(seconds: 2));

    // set the value of _username
    _title = 'GeekdForGeeks';

    // show the username in a dialog
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text(_title),
        content: Text('Late is Initialized by text : ${_title}'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('OK'),
          ),
        ],
      ),
    );
  }
}

Output