Flutter: How can I access element from API in my UI

Question

I successfully get data from API. I test it using the Print command and the element displayed successfully in the console. When I tried to access the same element in TEXT Widget it displays null.

Here is the code:

import 'package:api_practice/worker/data.dart';
import 'package:flutter/material.dart';
import 'package:api_practice/worker/data.dart';

class WeatherHome extends StatefulWidget {
  @override
  _WeatherHomeState createState() => _WeatherHomeState();
}

class _WeatherHomeState extends State<WeatherHome> {
  TextEditingController searchcont = TextEditingController();
  DataClass datainstace = DataClass();

  void data() async {
    await datainstace.getcurrentlocation();
    await datainstace.getdata();
    print(datainstace.area);
  }

  @override
  void initState() {
    data();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Text(
                ("${datainstace.area}"),
                style: TextStyle(fontSize: 25, color: Colors.white),
              ),
    );
  }
}

output on console: output in console

App looks like: appscreen

score 2 · Accepted Answer · answered Sep 12 '21 at 22:42

In addition to the previous answers, you can use a value listenable builder, this improves performance and thus it is not necessary to use a setState.

You can check the following link to obtain information on how to use it Explore ValueListenableBuilder in Flutter

score 1 · Answer 2 · answered Sep 12 '21 at 20:44

You should use setState method in data function. Because your build method is finishing before your async method.

Use it like this:

import 'package:api_practice/worker/data.dart';
import 'package:flutter/material.dart';
import 'package:api_practice/worker/data.dart';

class WeatherHome extends StatefulWidget {
  @override
  _WeatherHomeState createState() => _WeatherHomeState();
}

class _WeatherHomeState extends State<WeatherHome> {
  TextEditingController searchcont = TextEditingController();
  DataClass datainstace = DataClass();

  void data() async {
    await datainstace.getcurrentlocation();
    await datainstace.getdata();
    print(datainstace.area);
    setState(() {});
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Text(
                "${datainstace.area}",
                style: TextStyle(fontSize: 25, color: Colors.white),
              ),
    );
  }
}

Breno Macêdo · Answer 3 · 2021-09-12T21:04:06.600

0

when you want to update the state of your widget, you have to call the setState function to make the widget re-render with the changes.

  void data() {
    setState(() async {
      await datainstace.getcurrentlocation();
      await datainstace.getdata();
      print(datainstace.area);
    });
  }

edited Sep 12 '21 at 21:04

answered Sep 12 '21 at 20:47

Breno Macêdo

62
5

Flutter: How can I access element from API in my UI

3 Answers3