How to Assign Future to a Widget In Flutter?

How to Assign Future to a Widget In Flutter?

FutureBuilder Widget calls the future function to wait for the result, and as soon as it produces the result it calls the builder function where we build the widget. So in this article, we will go through How to Assign Future to a Widget in Flutter?

How to Assign Future to a Widget In Flutter?

StatefulWidget can be used for this purpose. Declare a member variable String _textFromFile = “”; in your State class and update its value on future resolve by using setState() method.

We can also use the getTextFromFile() method from the constructor, but you may call it from anywhere. Our code snippet will look like the below:

import 'package:flutter/material.dart';
import 'dart:async';

class StatefullWidgetDemo extends StatefulWidget {
  @override
  _StatefulWidgetDemoState createState() {
    return new _StatefulWidgetDemoState();
  }
}

class _StatefulWidgetDemoState extends State<StatefullWidgetDemo> {
  String _textFromFile = "";

  _StatefulWidgetDemoState() {
    getTextFromFile().then((val) => setState(() {
          _textFromFile = val;
        }));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Stateful Demo'),
      ),
      body: new SingleChildScrollView(
        padding: new EdgeInsets.all(8.0),
        child: new Text(
          _textFromFile,
          style: new TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 19.0,
          ),
        ),
      ),
    );
  }

  Future<String> getFileData(String path) async {
    return "your data from file";
  }

  Future<String> getTextFromFile() async {
    return await getFileData("test.txt");
  }
}

Another solution to get data on initialization would be to call getTextFromFile() in initState(), set state with a new string, and use that string. our code snippet will look like the below:

String fileData = '';

Future<String> getFileData(String path) async {
    return await rootBundle.loadString(path);
  }

void getTextFromFile() async {
    try {
      String data = await getFileData("test.txt");
      setState(() {
        fileData = data;
      });
    } catch (ex) {
      print(ex);
    }
  }

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

new singleChildScrollView(
        padding: new EdgeInsets.all(8.0),
        child: new Text(
          fileData,
          style: new TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 19.0,
          ),
        ));

A Class which calls the function will look like the below:

@override
Widget build(BuildContext context) {
return new Scaffold(
 child: FutureBuilder(
  future: function(),
  builder: (BuildContext context, AsyncSnapshot<String> text) {
    return new Text(text.data);
  });
)}

and the function will look like the below:

Future<String> function() async {
   return 'abc';
}

Conclusion:

In this article, we have been through How to assign Future to a widget in Flutter?

That’s it for today.

Still, need support for Flutter Mobile Application? We Would love to assist you.

Flutter Agency is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.