setState() is not updating the Text() widget in flutter - flutter

Question

I'm trying to build an app that is like a calculator but it has some additional buttons that automaticly sets a number to displayedNumber. I tried the setState() for setting the number but the Text() widget is not updating.
This is what I tried:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatefulWidget {
#override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
String name = 'Amir Mahdi Abravesh';
String phoneNumber = '[phone]';
double input = 0.00;
double displayedNumber = 0.0;
String inputST = '\$' + '$displayedNumber';
void displayingDigits(){
if(displayedNumber == 0.0){
displayedNumber += input;
} else {
displayedNumber = displayedNumber * 10;
displayedNumber += input;
}
}
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Center(
child: Text(
'Send Money to',
style: TextStyle(
color: Colors.black,
// fontFamily: 'SF Pro',
fontWeight: FontWeight.bold,
),
),
),
centerTitle: true,
backgroundColor: Colors.white,
// shadowColor: Color.fromARGB(197, 192, 192, 192),
elevation: 0,
),
body: Column(
children: <Widget>[
SizedBox(height: 10,),
Expanded(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundImage: AssetImage('assets/AMA25 trs.png'),
backgroundColor: Colors.black,
radius: 30,
),
SizedBox(height: 5,),
Text(
'$name',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
SizedBox(height: 5,),
Text(
'$phoneNumber',
style: TextStyle(
color: Colors.grey,
),
),
],
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(30),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
'$displayedNumber',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
Divider(
height: 30,
color: Colors.grey[700],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextButton(
onPressed: () {
setState(() {
displayedNumber = 50.0;
// inputST = '\$' + '$displayedNumber';
});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(15),
),
child: Text(
'\$50',
style: TextStyle(
color: Colors.grey,
// fontSize: 18,
),
),
),
),
],
),
),
),
],
),
);
}
}
You can ignore the inputST that I commented. That's just for showing a $ before the displayedNumber.
I want this button to set 50 to the displayedNumber and update the number on the screen.

Answer 1

Here you go . You just needed to move variables after State
// ignore_for_file: prefer_interpolation_to_compose_strings
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatefulWidget {
#override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
String name = 'Amir Mahdi Abravesh';
String phoneNumber = '[phone]';
double input = 0.00;
double displayedNumber = 0.0;
#override
Widget build(BuildContext context) {
void displayingDigits() {
if (displayedNumber == 0.0) {
displayedNumber += input;
} else {
displayedNumber = displayedNumber * 10;
displayedNumber += input;
}
}
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Center(
child: Text(
'Send Money to',
style: TextStyle(
color: Colors.black,
// fontFamily: 'SF Pro',
fontWeight: FontWeight.bold,
),
),
),
centerTitle: true,
backgroundColor: Colors.white,
// shadowColor: Color.fromARGB(197, 192, 192, 192),
elevation: 0,
),
body: Column(
children: <Widget>[
SizedBox(
height: 10,
),
Expanded(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundImage: AssetImage('assets/AMA25 trs.png'),
backgroundColor: Colors.black,
radius: 30,
),
SizedBox(
height: 5,
),
Text(
'$name',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
SizedBox(
height: 5,
),
Text(
'$phoneNumber',
style: TextStyle(
color: Colors.grey,
),
),
],
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(30),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
'$displayedNumber',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
Divider(
height: 30,
color: Colors.grey[700],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextButton(
onPressed: () {
setState(() {
displayedNumber = 50.0;
// inputST = '\$' + '$displayedNumber';
});
},
child: Container(
padding: EdgeInsets.symmetric(
vertical: 10, horizontal: 15),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(15),
),
child: Text(
'\$50',
style: TextStyle(
color: Colors.grey,
// fontSize: 18,
),
),
),
),
],
),
]),
),
)
],
),
);
}
}

Answer 2

Because you have define double displayedNumber = 0.0; inside build().
Define double displayedNumber = 0.0; outside the build().
class _HomeState extends State<Home> {
double displayedNumber = 0.0; // Initialize here
#override
Widget build(BuildContext context) {}}