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

Issue

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

Solution

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

Answered By – VampyFowler

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *