How can I make a number counter app using textfield in flutter?

Question

import 'package:flutter/material.dart';

void main() => runApp(Spent());

class Spent extends StatefulWidget {

  @override
  SpentState createState() => SpentState();

}

class SpentState extends State<Spent> {

  final _controller = TextEditingController();
  String name = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container (
          padding: const EdgeInsets.all(30.0),
          child: Container(
            child:  Center(
              child:  Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(name),
                  TextFormField(
                    textInputAction: TextInputAction.done,
                    controller: _controller,
                    decoration:  InputDecoration(
                      fillColor: Colors.black,
                      border:  OutlineInputBorder(
                        borderRadius:  BorderRadius.circular(25.0),
                        borderSide: BorderSide(),
                      ),
                    ),
                    keyboardType: TextInputType.number
                  ),
                  FlatButton(
                    child: Text("Enter"),
                    onPressed: () {
                      setState(() {
                        name = _controller.text;
                      });
                    },
                  )
                ]
              )
            ),
          )
        )
      )
    );
  }

}

Like so, I have a TextFormField. What I want my application to do is subtract the number that is currently existing using textfield. So for example if I have the number 5000, the user would type 2000 and press enter. This would make the number to 3000. How can I make this?

Answer 1

Here's a possible solution with basic error checking.

class SpentState extends State<Spent> {
  final _controller = TextEditingController();
  double value = 5000;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Container(
                padding: const EdgeInsets.all(30.0),
                child: Container(
                  child: Center(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                        Text(value.toString()),
                        TextFormField(
                            textInputAction: TextInputAction.done,
                            controller: _controller,
                            decoration: InputDecoration(
                              fillColor: Colors.black,
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(25.0),
                                borderSide: BorderSide(),
                              ),
                            ),
                            keyboardType: TextInputType.number),
                        FlatButton(
                          child: Text("Enter"),
                          onPressed: () {
                            //check if we can parse it
                            if (double.tryParse(_controller.text) == null)
                              return; //can't parse it
                            double enteredValue =
                                double.parse(_controller.text);
                            setState(() {
                              value -= enteredValue;
                            });
                          },
                        )
                      ])),
                ))));
  }
}