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'),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

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.

Answer 2

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