Flutter - multiply the values from different text fields

Question

I need your help please,

I want to multiply the values from different text fields. I am facing the problem that * cant be used with TexteditingController() in:

void _calculation() {
    _volume = lenCon * widCon * higCon;
    print(_volume);
  }

Do I need to transfrom my Variables like lenCon to double before? How can I do that? var lenConInt = double.parse(lenCon); doesnt work.

The RaisedButton must execute _calculation and change the Text with the proper Value. Do I need a StatlessWidget for that or SetState?

Thanks in Advance!

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _volume = 0;

//  var _lenght;
//  var _width;
//  var _hight;

  void _calculation() {
    _volume = lenCon * widCon * higCon;
    print(_volume);
  }

  final lenCon = new TextEditingController();
  final widCon = new TextEditingController();
  final higCon = new TextEditingController();

  // var lenConInt = double.parse(lenCon);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: lenCon,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  hintText: 'Länge',
                ),
              ),
              TextField(
                controller: widCon,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  hintText: 'Breite',
                ),
              ),
              TextField(
                controller: higCon,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  hintText: 'Höhe',
                ),
              ),
              RaisedButton(
                onPressed: (_calculation),
                child: Text('Berechnen'),
              ),
              Text('Your Volume is: $_volume'),
            ],
          ),
        ),
      ),
    );
  }
}

try var lenConDouble = double.parse(lenCon.text); .text retreives the entered value from the TextEditingController flutter.dev/docs/cookbook/forms/retrieve-input — Er1
– Er1, Commented Nov 30, 2020 at 12:05
I advise you to read about differences between Stateless Widget and Stateful Widget ;) — sonic
– sonic, Commented Nov 30, 2020 at 12:23
@sonic the use of a stateful widget here is correct because of the last Text widget he wants to update after calculation. However, the state is not initialized correctly. — Heikkisorsa
– Heikkisorsa, Commented Nov 30, 2020 at 12:31
@Heikkisorsa I am not saying that using stateful widget is mistake here. Im just pointing to the question "Do I need a StatlessWidget for that or SetState?" Im about to answer: "answer yourself what do you really need to use and why" — sonic
– sonic, Commented Nov 30, 2020 at 12:34

Heikkisorsa · Accepted Answer · 2020-11-30 12:28:41Z

Try this in order to get it functional:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _volume;

  @override
  initState(){
      _volume = 0;
  }

  void _calculation() {
    setState((){
        _volume = int.parse(lenCon.text) * int.parse(widCon.text) * int.parse(higCon.text);
        },
    );
    print(_volume);
  }

  final lenCon = TextEditingController();
  final widCon = TextEditingController();
  final higCon = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: lenCon,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  hintText: 'Länge',
                ),
              ),
              TextField(
                controller: widCon,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  hintText: 'Breite',
                ),
              ),
              TextField(
                controller: higCon,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  hintText: 'Höhe',
                ),
              ),
              RaisedButton(
                onPressed: (_calculation),
                child: Text('Berechnen'),
              ),
              Text('Your Volume is: $_volume'),
            ],
          ),
        ),
      ),
    );
  }
}

First, you need some type of conversion between string and integers (or even double if you want). Second, you should put the resulting _volume in a state so that the UI refreshes when you update the state (via setState). Try to avoid var and use concrete types instead. It will help you in the long-run.

this was an "Aha" moment. I need to put SetState into the _calculation Function. Thank you very much!

Dharman · Accepted Answer · 2020-11-30 12:25:53Z

1

The variables lenCon, widCon and higCon are of type TextEditingConroller. The TextEditingController is a class that will help you control the information in the TextField.

In this case you'd probably want to access the value the user inputted into the TextField which you'd be able to access using the text property of the TextEditorController. If you'd update your calculation method to something like below it should work:

void _calculation() {
  final length = double.parse(lenCon.text);
  final width = double.parse(widCon.text);
  final height = double.parse(higCon.text);

  _volume = length * width * height;
  print(_volume);
}

You still need to use the double.parse since the .text property will return a String which needs to be converted to something you make calculations on (a numeric value type).

As mentioned the TextEditingController will give you access to more information about the user's interaction with the TextField. For example the selected part of the text (using the selection property). If you would like to read up you could check out: https://api.flutter.dev/flutter/widgets/TextEditingController-class.html

edited Nov 30, 2020 at 12:25

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Nov 30, 2020 at 12:20

Maurits van Beusekom

6,1193 gold badges23 silver badges44 bronze badges

1 Comment

SiggiSmilez Over a year ago

Awesome! Thank you!

SiggiSmilez · Accepted Answer · 2020-11-30 12:50:38Z

0

Thanks to Maurits van Beusekom I was able to get the calculation done.

But I had to move it to the Button to make the Text('Your Volume is: $_volume'), working.

      RaisedButton(
        onPressed: () {
          setState(() {
            final length = double.parse(lenCon.text);
            final width = double.parse(widCon.text);
            final height = double.parse(higCon.text);

            _volume = length * width * height;
            print(_volume);
          });
        },
        child: Text('Berechnen'),
      ),

Edit:

Nevermind, I just have to put the SetState into the calculation.

edited Nov 30, 2020 at 12:50

answered Nov 30, 2020 at 12:41

SiggiSmilez

571 silver badge5 bronze badges

Collectives™ on Stack Overflow

Flutter - multiply the values from different text fields

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related