Flutter – Handle Future Methods Using Future.then() Method
Handling the Future methods is am important part ,In Flutter, we can use the Future.then() method to perform an action when a Future completes its execution. In this we are going to create an button by clicking the button a Future Method will start executing for 4 seconds then after the execution the Result will be displayed by the help of Future.then() Method. A sample video is given below to get an idea about what we are going to do in this article.
Basic Example or Syntax of Future.then() Method
Future<int> fetchData() async {
await Future.delayed(Duration(seconds: 2));
return 42;
}
void main() {
fetchData().then((int result) {
print("Data received: $result");
});
}
Step By Step Implementation
Step 1: Create a New Project in Android Studio
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 Package
First of all import material.dart file.
import 'package:flutter/material.dart';
import 'dart:async';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() { runApp(MyApp()); } |
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp, here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false , theme: ThemeData( // Set the app's primary theme color primarySwatch: Colors.green, ), home: MyHomePage(), ); } } |
Step 5: Create MyHomePage Class
In this class we are going to define an Future method which will execute for 4 seconds. Then we display the Result of the future method Using Future.then() method. Comments are added for better understanding. and we created a button by pressing the future method will start its execution for 4 seconds.
Future Method:
// Act as a Future Method that will fetches data from an API.
Future<String> fetchData() async {
// Simulate the time take by API request delay
await Future.delayed(Duration(seconds: 4));
return 'Future Method Execution Completed!';
}
Handling the Future method using Future.then() method:
// by pressing the button Future method will start executing for 4 seconds
ElevatedButton(
onPressed: () {
// Fetch data when the button is clicked
// Call the future Method then show
// the result using then() method
fetchData().then((result) {
setState(() {
data = result;
});
});
},
child: Text('Execute Future Method'),
),
Dart
class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { // Act as a Future Method that // will fetches data from an API. Future<String> fetchData() async { // Simulate the time take by API request delay await Future.delayed(Duration(seconds: 4)); return 'Future Method Execution Completed!' ; } String data = 'Loading...' ; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Future.then() Example' ), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text(data), // by pressing the button Future method // will start executing for 4 seconds ElevatedButton( onPressed: () { // Fetch data when the button is clicked. fetchData().then((result) { setState(() { data = result; }); }); }, child: Text( 'Execute Future Method' ), ), ], ), ), ); } } |
Here is the full Code of main.dart file:
Dart
import 'dart:async' ; import 'package:flutter/material.dart' ; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false , theme: ThemeData( // Set the app's primary theme color primarySwatch: Colors.green, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { // Act as a Future Method that will // fetches data from an API. Future<String> fetchData() async { // Simulate the time take by API request delay await Future.delayed(Duration(seconds: 4)); return 'Future Method Execution Completed!' ; } String data = 'Loading...' ; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Future.then() Example' ), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text(data), // by pressing the button Future method // will start executing for 4 seconds ElevatedButton( onPressed: () { // Fetch data when the button is clicked // Call the future Method then // show the result using then() method fetchData().then((result) { setState(() { data = result; }); }); }, child: Text( 'Execute Future Method' ), ), ], ), ), ); } } |