Dealing with Future Inside of a Widget

Question

I'm trying to make my app display the results of a HTTP request as a button. Here is the function that makes the request.

Future<String> client() async {
  return await HttpRequest.getString('localhost:8000');
}

Here is the button I'd like to display it in.

ElevatedButton(
  onPressed: () {},
  child: Text('This is a Deck'),
),

I'd like to display the request in place of the string 'This is a Deck'. I've tried await client() and client().toString() but these did not work. Here is my full widget class if that helps.

class DeckButtons extends StatelessWidget {
  DeckButtons({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ElevatedButton(
            onPressed: () {},
            child: Text('This is a Deck'),
          ),
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {},
            tooltip: 'Add a Card',
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
            tooltip: 'See All Cards',
          ),
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () {},
            tooltip: 'Delete this Deck',
          )
        ],
      ),
    );
  }
}

I'm brand new to Flutter and Asynchronous programming so my apologies if the answer to this question is obvious.

^{Edit: I've been told that my question is a duplicate of "What is a Future and how do I use it?". I don't think that my question is a duplicate because although some parts of the answer may apply to my situation, the question and the accepted answer are much too broad and cover a lot of additional information. Additionally, I still have not implemented a fix for my problem and I am unsure that the answer given in that post is of any help to me}

Does this answer your question? [What is a Future and how do I use it?](https://stackoverflow.com/questions/63017280/what-is-a-future-and-how-do-i-use-it) — nvoigt, Nov 07 '20 at 07:05

score 3 · Accepted Answer · answered Nov 07 '20 at 03:40

For doing async code there are so many options but the below one will be the simplest for getting work done.

Example:

String _deckString  = "This is a Deck"; /// This variable should be used in a text widget, so until the network fetch the real data, till then default text can be shown

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    client().then((value) { /// This code will run only when async operation done inside method client(), so value is its response which need to be shown
      setState(() {
        _deckString = value;
      });
    });
  }

Full Code:

class _HomeScreenState extends State<HomeScreen> {
  String _deckString  = "This is a Deck";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    client().then((value) {
      setState(() {
        _deckString = value;
      });
    });
  }

  Future<String> client() async {
     return await HttpRequest.getString('localhost:8000');
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Example'),),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {},
              child: Text(_deckString),
            ),
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {},
              tooltip: 'Add a Card',
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
              tooltip: 'See All Cards',
            ),
            IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {},
              tooltip: 'Delete this Deck',
            )
          ],
        ),
      ),
    );
  }
}

I would also suggest using try catch, async and await or you're going to experience in callback hell. — CoderUni, Nov 07 '20 at 05:44

Dealing with Future Inside of a Widget

1 Answers1