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:
Now if we want to remove this we have to initialize the variable it uses.
_title = "w3wiki";
Now if we see the output, It will work fine and print “w3wiki”. 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 = 'GeekdForBeginner';
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 = 'GeekdForBeginner'; // 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 = 'GeekdForBeginner' ; // 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' ), ), ], ), ); } } |
Contact Us