skip to Main Content

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 = '+989920250829';
    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.

The phone view

2

Answers


  1. 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) {}}
    
    Login or Signup to reply.
  2. 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 = '+989920250829';
      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,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ]),
                ),
              )
            ],
          ),
        );
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search