Completer – Handling Future async operation using Flutter Completer

In flutter a Completer is a Class that is built to manually complete a future task at some time in future. Basically it’s a way to generate & handle your own Future.

In other words, A ‘Completer’ is an inbuilt class that comes with DART SDK that is basically used to control & manage a ‘Future’ object. A ‘Future’ in flutter we can say it as a value that will be available in future at sometime in time, May be as soon as any asynchronous operation completes.

Video Tutorial on Flutter Completer

When to use completer in flutter

Just Imagine you have ordered a package from a ECommerce Application.

Now you are waiting fro the package to arrive a your door steps.

Then you know that package will be delivered sometime in future or you may know estimate time but not sure exectly when.

In this scenerio, Let’s say Future as Package & Completer as delivery person.

Now, when the delivery person arrives at doorstep the deliver the package, The delivery person make use of Completer to complete the Future i.e The delivery person will mark the package a delivered may be using OTP.

How to use Completer in Flutter App

Syntax of Completer

Completer<dataType> _completer = Completer<dataType>();

Code Example

void main() {
 Completer<String> myCompleter = Completer<String>();

 Future<String> futureValue = myCompleter.future;

 Future.delayed(Duration(seconds: 3),(){
   myCompleter.complete("Hello World");
 });

 futureValue.then((value) {
   print(value);
 });
}

In above code example, First we create a “Completer” object that will result a “String” & then we have created a Future Object by using property i.e. myCompleter.future The futureValue will be listen for myCompleter to complete.

Then, Just for delaying operation we simulate a asynchronous operation using Future.delayed method that sleep for 3 seconds , Then after 2 second the Future.delayed async function will execute & the operation complete, we call ‘completer.complete’ and set a string value “Welcome to Proto Coders Point”, thus this sets a “futureValue” as “Welcome to Proto Coders Point”.

after that we can make use of ‘then’ method to listen for the completion & it print the value on the screen.

Flutter Code Example – How to use Completer in Flutter

In below example, App user can manually complete the completer by clicking on a button.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("Completer Example")),
            body: FutureWidget()));
  }
}

class FutureWidget extends StatefulWidget {
  @override
  _FutureWidgetState createState() => _FutureWidgetState();
}

class _FutureWidgetState extends State<FutureWidget> {
  Completer<String> _completer;

  void _handleButtonClick() {
    // Complete the future with the user input
    _completer.complete(_textEditingController.text);
  }

  TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();

    // Create the completer when the widget is initialized
    _completer = Completer<String>();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextField(
          controller: _textEditingController,
          decoration: InputDecoration(
            hintText: 'Enter some text',
            contentPadding: EdgeInsets.all(10.0),
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
            onPressed: _handleButtonClick, child: Text("Complete Future")),
        SizedBox(height: 20),
        FutureBuilder(
          future: _completer.future,
          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.hasData) {
                return Text("Future completed with: ${snapshot.data}");
              } else {
                return Text("Future completed with no data");
              }
            } else {
              return Text("Future not completed yet");
            }
          },
        ),
      ],
    );
  }
}