How to get JSON response after onPresseed button in Flutter // Dart - flutter

Question

I don't get any issues to get JSON data the button is pressed to get JSON response.body is printed successfully but the JSON response is executed before I give _addressController value the if condition executed so the exception is shown on the print state. so please see my code and help me to overcome the issues
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:core';
import 'dart:convert';
import 'package:http/http.dart'as http;
import 'string.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Retrieve Text Input',
home: MyCustomForm(),
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({Key? key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
var url1 = 'This is my first off url';
var _addressControler = TextEditingController();
late Future<Balance> futureBalance;
#override
void initState() {
super.initState();
futureBalance = fetchBalance();
}
Future<Balance> fetchBalance() async {
http.Response response =
await http.get(Uri.parse(url1+_addressControler.text));
print(response.body);
if (response.statusCode == 200) {
return Balance.fromJson(jsonDecode(response.body));
} else {
throw Exception('Failed to load album');
}
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fetch Data Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Fetch Data Example'),
),
body: Center(
key: _formKey,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: TextField(
controller: _addressControler,
decoration: InputDecoration(
labelText: 'Enter the address...',
labelStyle: TextStyle(color: Colors.blue),
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.black)),),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () async {
await fetchBalance();
},
child: const Text('Submit'),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: Text("${_addressControler.text}"),
),
Container(
//color: Colors.blueAccent,
child: FutureBuilder<Balance>(
future: futureBalance,
builder: (context, index) {
if (index.hasData) {
print(index.data!.height);
var x = (index.data!.result[0].amount);
var y = int.parse(x);
assert(y is int);
var z = (y / 1000000);
print(z);
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('${z.toString()}',
style: TextStyle(fontSize: 20,),),
]);
} else if (index.hasError) {
return Text("${index.error}");
}
return CircularProgressIndicator();
},
),
),
]
),
),
)
);
}
}
I have an issue on fetchBalance() function. The if the condition is executed before I click the onPressed button but I what to do after given TextField and submit onPressed to execute the condition. so, is any possible way to overcome this issue please help me...

Answer 1

I am not sure I understand your question, but it seems you get an error because fetchBalance is executed before you expect it to.
Well, you call futureBalance = fetchBalance(); within your initState() method, hence the code is executed when your widget is being initialized and not only after you press the button. This means, you try to parse the url without appending _addressControler.text.

Answer 2

also, you can use it like this.
fetchBalance().then((balance) {
setState(() {
_balance = balance; //need to create one variable of type Balance
});
});

Answer 3

Better put the setState() in your async call:
Future<Balance> fetchBalance() async {
http.Response response =
await http.get(Uri.parse(url1+_addressControler.text));
print(response.body);
if (response.statusCode == 200) {
setState(() {
_balance = Balance.fromJson(jsonDecode(response.body));
});
} else {
throw Exception('Failed to load album');
}
}

Answer 4

First up all I remove the initState() and i use setState() for onPressed() to call the API function fetchBalance() on the state it's working good..
child: ElevatedButton(
onPressed: () {
setState(() {
fetchBalance();
});
fetchBalance();
},
child: const Text('Submit'),
),
),