Flutter, reading multiple values from function - list

Question

This is a followup of a question I had a couple off days ago about my first flutter app.
Following advice from PRO I changed my code so that it did what I wanted.
The only problem is that from the function I get only 1 value.
Pro advised to make a list, which worked in the function like it should.
Only how to get these values in a textfield is not clear to me.
I can only show what I want bij sending the full code.
Later I want to build on the same principal with more outcome values.
I use value.toString() as well as value[1].toString().
The first gives me the first value, the second only a caracter.
I hope someone can help
import 'package:flutter/material.dart';
void main() {
runApp(Buis());
}
class Buis extends StatefulWidget {
#override
BuisState createState() => BuisState();
}
class BuisState extends State<Buis> {
var kap2 = '';
var buizen2 = '';
var diam2 = '';
var spev = '';
var spo = '';
var value;
#override
Widget build(BuildContext context) {
TextEditingController kapController = TextEditingController(text: '9.60');
TextEditingController buizenController = TextEditingController(text: '12');
TextEditingController diamController = TextEditingController(text: '51');
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Center(
child: Text("Specifiek buis vermogen"),
),
),
body: Center(
child: Container(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 20),
// Input kap breedte
Container(
width: 170,
height: 30,
child: TextFormField(
controller: kapController,
keyboardType: TextInputType.number,
style: TextStyle(fontWeight: FontWeight.bold),
decoration: InputDecoration(
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 8),
labelText: "Kap breedte (mtr)",
hintText: "$kap2",
fillColor: Colors.cyan[200],
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(40.0),
borderSide: BorderSide(),
),
),
),
),
SizedBox(height: 10),
// Input aantal buizen
Container(
width: 170,
height: 30,
child: TextFormField(
controller: buizenController,
keyboardType: TextInputType.number,
style: TextStyle(fontWeight: FontWeight.bold),
decoration: InputDecoration(
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 8),
labelText: "Aantal buizen",
hintText: "$buizen2",
fillColor: Colors.cyan[200],
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(40.0),
borderSide: BorderSide(),
),
),
),
),
SizedBox(height: 10),
// Input buis diameter
Container(
width: 170,
height: 30,
child: TextFormField(
controller: diamController,
keyboardType: TextInputType.number,
style: TextStyle(fontWeight: FontWeight.bold),
decoration: InputDecoration(
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 8),
labelText: "Buis diameter (mm)",
hintText: '$diam2',
fillColor: Colors.cyan[200],
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(40.0),
borderSide: BorderSide(),
),
),
),
),
SizedBox(height: 10),
// Uitkomsten
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(height: 20),
// Berekenen knop
Center(
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)),
onPressed: () {
value = getValue(kapController.text, buizenController.text, diamController.text).toString();
setState(() {});
},
color: Colors.blue,
textColor: Colors.white,
child: Text("Berekenen".toUpperCase(),
style: TextStyle(fontSize: 14)),
),
),
SizedBox(height: 20),
Text(
'Specifiek vermogen ',
style: TextStyle(
backgroundColor: Colors.white,
fontWeight: FontWeight.bold),
),
// Specifiek vermogen
Container(
alignment: Alignment(0, 0),
width: 80,
height: 30,
margin: const EdgeInsets.only(right: 5.0),
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
color: Colors.red[200],
borderRadius: BorderRadius.horizontal(
left: Radius.circular(40),
right: Radius.circular(40),
),
border: Border.all(width: 1.0),
),
child:Text(
value[2].toString(), //here I read the first outcome
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 10),
Text(
'Specifiek oppervlak ',
style: TextStyle(
backgroundColor: Colors.white,
fontWeight: FontWeight.bold),
),
// Specifiek oppervlak
Container(
alignment: Alignment(0, 0),
width: 80,
height: 30,
margin: const EdgeInsets.only(right: 5.0),
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
color: Colors.red[200],
borderRadius: BorderRadius.horizontal(
left: Radius.circular(40),
right: Radius.circular(40),
),
border: Border.all(width: 1.0),
),
child: Text(
value[3].toString(), // and here the second
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 20),
SizedBox(height: 60),
],
),
],
),
),
),
),
),
);
}
}
getValue(kap, buizen, diam) {
var kap1 = double.parse(kap);
var buizen1 = double.parse(buizen);
var diam1 = double.parse(diam);
var spev = 1.7 * (diam1 / 51) * (buizen1 / kap1);
spev = num.parse(spev.toStringAsFixed(2));
var spo = (buizen1 * diam1 * 0.1) / kap1;
spo = num.parse(spo.toStringAsFixed(2));
print("Spev is " '$spev');
print("Spo is " '$spo');
List<double> valueList = List<double>();
valueList.add(spev);
valueList.add(spo);
print(valueList);
return valueList;
}

Answer 1

#Pim, there are few errors in your code,
you are explicitly calling list item on widget build, here you don't have the value yet
you are converting list into string with value = getValue(kapController.text, buizenController.text, diamController.text).toString(); , not sure why you're doing this but this in not correct.
Try assigning empty value to your textFields on widget build and then assign actual value on button press and finally refresh the state like so,
class Buis extends StatefulWidget {
#override
BuisState createState() => BuisState();
}
class BuisState extends State<Buis> {
var kap2 = '';
var buizen2 = '';
var diam2 = '';
var spev = '';
var spo = '';
var value;
var firstValue = '';
var secondValue = '';
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
TextEditingController kapController = TextEditingController();
TextEditingController buizenController = TextEditingController();
TextEditingController diamController = TextEditingController();
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Center(
child: Text("Specifiek buis vermogen"),
),
),
body: Center(
child: Container(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 20),
// Input kap breedte
Container(
width: 170,
height: 30,
child: TextFormField(
controller: kapController,
keyboardType: TextInputType.number,
style: TextStyle(fontWeight: FontWeight.bold),
decoration: InputDecoration(
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 8),
labelText: "Kap breedte (mtr)",
hintText: "$kap2",
fillColor: Colors.cyan[200],
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(40.0),
borderSide: BorderSide(),
),
),
),
),
SizedBox(height: 10),
// Input aantal buizen
Container(
width: 170,
height: 30,
child: TextFormField(
controller: buizenController,
keyboardType: TextInputType.number,
style: TextStyle(fontWeight: FontWeight.bold),
decoration: InputDecoration(
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 8),
labelText: "Aantal buizen",
hintText: "$buizen2",
fillColor: Colors.cyan[200],
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(40.0),
borderSide: BorderSide(),
),
),
),
),
SizedBox(height: 10),
// Input buis diameter
Container(
width: 170,
height: 30,
child: TextFormField(
controller: diamController,
keyboardType: TextInputType.number,
style: TextStyle(fontWeight: FontWeight.bold),
decoration: InputDecoration(
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 8),
labelText: "Buis diameter (mm)",
hintText: '$diam2',
fillColor: Colors.cyan[200],
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(40.0),
borderSide: BorderSide(),
),
),
),
),
SizedBox(height: 10),
// Uitkomsten
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(height: 20),
// Berekenen knop
Center(
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)),
onPressed: () {
value = getValue(kapController.text, buizenController.text, diamController.text);
//Depending on how many value you will have;
firstValue = value[0].toString();
secondValue = value[1].toString();
setState(() {});
},
color: Colors.blue,
textColor: Colors.white,
child: Text("Berekenen".toUpperCase(),
style: TextStyle(fontSize: 14)),
),
),
SizedBox(height: 20),
Text(
'Specifiek vermogen ',
style: TextStyle(
backgroundColor: Colors.white,
fontWeight: FontWeight.bold),
),
// Specifiek vermogen
Container(
alignment: Alignment(0, 0),
width: 80,
height: 30,
margin: const EdgeInsets.only(right: 5.0),
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
color: Colors.red[200],
borderRadius: BorderRadius.horizontal(
left: Radius.circular(40),
right: Radius.circular(40),
),
border: Border.all(width: 1.0),
),
child:Text(
firstValue.toString(), //here I read the first outcome
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 10),
Text(
'Specifiek oppervlak ',
style: TextStyle(
backgroundColor: Colors.white,
fontWeight: FontWeight.bold),
),
// Specifiek oppervlak
Container(
alignment: Alignment(0, 0),
width: 80,
height: 30,
margin: const EdgeInsets.only(right: 5.0),
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
color: Colors.red[200],
borderRadius: BorderRadius.horizontal(
left: Radius.circular(40),
right: Radius.circular(40),
),
border: Border.all(width: 1.0),
),
child: Text(
secondValue.toString(), // and here the second
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 20),
SizedBox(height: 60),
],
),
],
),
),
),
),
),
);
}
}
getValue(kap, buizen, diam) {
var kap1 = double.parse(kap);
var buizen1 = double.parse(buizen);
var diam1 = double.parse(diam);
var spev = 1.7 * (diam1 / 51) * (buizen1 / kap1);
spev = num.parse(spev.toStringAsFixed(2));
var spo = (buizen1 * diam1 * 0.1) / kap1;
spo = num.parse(spo.toStringAsFixed(2));
print("Spev is " '$spev');
print("Spo is " '$spo');
List<double> valueList = List<double>();
valueList.add(spev);
valueList.add(spo);
print(valueList);
return valueList;
}

Answer 2

When you call a string as string[1], you are asking for the second character in the string.
When you set value, you are setting it as a string. Try removing .toString() from the end of value = getValue(kapController.text, buizenController.text, diamController.text).toString(); This way value will be a list and you can get the nth element of that list.
I'd also suggest setting the type of value when you first declare it. Instead of var value; use List<double> value;