How to show/hide in this particular code in flutter - flutter

I created this code but I don't know how to show/hide the password could anyone help me
Container(
margin: EdgeInsets.all(10),
child: TextField(
controller: nameController3,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
onChanged: (Text) {
setState(() {});
},
)),


You mean like this?
class MyWidgetState extends State<MyWidget> {
TextEditingController nameController3 = TextEditingController();
bool showPassword = false;
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
child: Column(
children: [
TextField(
obscureText: showPassword,
obscuringCharacter: "*",
controller: nameController3,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
onChanged: (Text) {
setState(() {
});
},
),
TextButton(
onPressed: () {
setState(() {
showPassword = !showPassword;
});
},
child: Text('Show / Hide Password')
)
]
)
);
}
}


You shold use the TextField property: obscureText: bool.
Container(
margin: EdgeInsets.all(10),
child: TextField(
controller: nameController3,
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
onChanged: (Text) {
setState(() {});
},
)),
You can pass a boolean fieldNameIsHide property and controll it using state management.


Try as follow:
bool showPassword=false;
TextFormField(
controller: passwordController,
cursorColor: Colors.white24,
focusNode: focusPassword,
validator: passwordValidator,
obscureText: !showPassword,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
counterText: '',
border: InputBorder.none,
labelText: "PASSWORD",
labelStyle: TextStyle(
fontSize: 16,
letterSpacing: 4,
fontWeight: FontWeight.bold,
color: Colors.white.withOpacity(0.5)),
suffixIcon: InkWell(
onTap: () {
setState(() {
showPassword = !showPassword;
});
},
child: Icon(
!showPassword ? Icons.visibility : Icons.visibility_off,
color: Colors.grey,
)),
fillColor: MyTheme.grey,
filled: true),
);

Related

Instance member 'setState' can't be accessed using static access

I am trying to use CheckBox in flutter, but I am facing a problem using setState inside of it.
This the code of the checkbox.
Checkbox(
value: check1,
checkColor: Colors.white,
activeColor: Colors.green,
onChanged: (bool? value1) {
State.setState(() {
check1 = value1;
});
},
),
And this is the whole code
// ignore_for_file: sized_box_for_whitespace, duplicate_ignore, avoid_unnecessary_containers, avoid_print
// ignore: unnecessary_import
import 'dart:ui';
import 'package:flutter/material.dart';
// ignore: must_be_immutable
class Register extends StatelessWidget {
var emailController = TextEditingController();
var passwordController = TextEditingController();
var firstNameController = TextEditingController();
var lastNameController = TextEditingController();
var userNameController = TextEditingController();
var confirmPasswordController = TextEditingController();
bool? check1 = false;
Register({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: const Icon(
Icons.menu,
),
actions: const [
IconButton(onPressed: sSearch, icon: Icon(Icons.search)),
IconButton(
onPressed: noNotification,
icon: Icon(Icons.notification_important_rounded),
)
],
centerTitle: true,
backgroundColor: const Color.fromARGB(255, 80, 146, 4),
elevation: 15,
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Center(
child: SingleChildScrollView(
child:
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Container(
alignment: AlignmentDirectional.center,
child: const Text(
'Register',
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 40,
),
Row(
children: [
Expanded(
child: TextFormField(
controller: firstNameController,
keyboardType: TextInputType.text,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: 'First Name',
border: OutlineInputBorder()),
),
),
Expanded(
child: TextFormField(
controller: lastNameController,
keyboardType: TextInputType.text,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: 'Last Name',
border: OutlineInputBorder()),
),
),
],
),
const SizedBox(
height: 10,
),
TextFormField(
controller: userNameController,
keyboardType: TextInputType.text,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.supervised_user_circle),
labelText: 'UserName',
border: OutlineInputBorder()),
),
const SizedBox(
height: 10,
),
TextFormField(
controller: emailController,
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.email),
labelText: 'Email Address',
border: OutlineInputBorder()),
),
const SizedBox(
height: 10,
),
TextFormField(
controller: passwordController,
keyboardType: TextInputType.visiblePassword,
obscureText: true,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.lock),
suffixIcon: Icon(Icons.remove_red_eye),
labelText: 'Password',
border: OutlineInputBorder()),
),
const SizedBox(
height: 10,
),
TextFormField(
controller: confirmPasswordController,
keyboardType: TextInputType.visiblePassword,
obscureText: true,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.lock),
suffixIcon: Icon(Icons.remove_red_eye),
labelText: 'Confirm Password',
border: OutlineInputBorder()),
),
const SizedBox(
height: 20,
),
Container(
width: double.infinity,
color: Colors.green,
child: MaterialButton(
onPressed: () {
print(emailController.text);
print(passwordController.text);
},
child: const Text(
'LOGIN',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Checkbox(
value: check1,
checkColor: Colors.white,
activeColor: Colors.green,
onChanged: (bool? value1) {
State.setState(() {
check1 = value1;
});
},
),
],
)
]),
),
),
),
);
}
}
void noNotification() {
// ignore: avoid_print
print('Notification Clicked');
}
void sSearch() {
// ignore: avoid_print
print('Search Clicked');
}
I didn't understand what was the problem, I would be appreciated if someone could explain it to me.

for using setstate your widget should be stateful widget
check the code below
// ignore_for_file: sized_box_for_whitespace, duplicate_ignore, avoid_unnecessary_containers, avoid_print
import 'package:flutter/material.dart';
class Register extends StatefulWidget {
const Register({super.key});
#override
State<Register> createState() => _RegisterState();
}
class _RegisterState extends State<Register> {
var emailController = TextEditingController();
var passwordController = TextEditingController();
var firstNameController = TextEditingController();
var lastNameController = TextEditingController();
var userNameController = TextEditingController();
var confirmPasswordController = TextEditingController();
bool? check1 = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: const Icon(
Icons.menu,
),
actions: const [
IconButton(onPressed: sSearch, icon: Icon(Icons.search)),
IconButton(
onPressed: noNotification,
icon: Icon(Icons.notification_important_rounded),
)
],
centerTitle: true,
backgroundColor: const Color.fromARGB(255, 80, 146, 4),
elevation: 15,
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Center(
child: SingleChildScrollView(
child:
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Container(
alignment: AlignmentDirectional.center,
child: const Text(
'Register',
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 40,
),
Row(
children: [
Expanded(
child: TextFormField(
controller: firstNameController,
keyboardType: TextInputType.text,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: 'First Name',
border: OutlineInputBorder()),
),
),
Expanded(
child: TextFormField(
controller: lastNameController,
keyboardType: TextInputType.text,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: 'Last Name',
border: OutlineInputBorder()),
),
),
],
),
const SizedBox(
height: 10,
),
TextFormField(
controller: userNameController,
keyboardType: TextInputType.text,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.supervised_user_circle),
labelText: 'UserName',
border: OutlineInputBorder()),
),
const SizedBox(
height: 10,
),
TextFormField(
controller: emailController,
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.email),
labelText: 'Email Address',
border: OutlineInputBorder()),
),
const SizedBox(
height: 10,
),
TextFormField(
controller: passwordController,
keyboardType: TextInputType.visiblePassword,
obscureText: true,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.lock),
suffixIcon: Icon(Icons.remove_red_eye),
labelText: 'Password',
border: OutlineInputBorder()),
),
const SizedBox(
height: 10,
),
TextFormField(
controller: confirmPasswordController,
keyboardType: TextInputType.visiblePassword,
obscureText: true,
onFieldSubmitted: (String value) {
print(value);
},
onChanged: (String value) {
print(value);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.lock),
suffixIcon: Icon(Icons.remove_red_eye),
labelText: 'Confirm Password',
border: OutlineInputBorder()),
),
const SizedBox(
height: 20,
),
Container(
width: double.infinity,
color: Colors.green,
child: MaterialButton(
onPressed: () {
print(emailController.text);
print(passwordController.text);
},
child: const Text(
'LOGIN',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
),
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Checkbox(
value: check1,
checkColor: Colors.white,
activeColor: Colors.green,
onChanged: (bool? value1) {
setState(() {
check1 = value1;
});
},
),
],
)
]),
),
),
),
);
}
}
void noNotification() {
// ignore: avoid_print
print('Notification Clicked');
}
void sSearch() {
// ignore: avoid_print
print('Search Clicked');
}

Flutter / Dart - making text input boxes small in height, alternatives to using isDense: true,

Flutter / Dart - I have a number of text input boxes on my app, but I still need more rows but haven't got the room, so need to make each one smaller. I have found the command "isDense: true," works to reduce the size slightly, but I need to reduce them much more, what's my best option? The labelText and hintText still need to show in each box.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
const appTitle = 'Diabetic insulin dosage';
return MaterialApp(
debugShowCheckedModeBanner: false,
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
backgroundColor: Colors.green,
foregroundColor: Colors.black,
),
body: const AddTwoNumbers(),
backgroundColor: Colors.white,
),
);
}
}
class AddTwoNumbers extends StatefulWidget {
const AddTwoNumbers({super.key});
#override
// ignore: library_private_types_in_public_api
_AddTwoNumbersState createState() => _AddTwoNumbersState();
}
class _AddTwoNumbersState extends State<AddTwoNumbers> {
Color _fillColor = Colors.white;
TextEditingController numR1C1controller =
TextEditingController(); //Changed name of the texteditingcontroller as Row as R and Column as C
TextEditingController numR1C2controller = TextEditingController();
TextEditingController numR1C3controller = TextEditingController();
TextEditingController numR2C1controller = TextEditingController();
TextEditingController numR2C2controller = TextEditingController();
TextEditingController numR2C3controller = TextEditingController();
TextEditingController numR3C1controller = TextEditingController();
TextEditingController numR3C2controller = TextEditingController();
TextEditingController numR3C3controller = TextEditingController();
TextEditingController numR4C1controller = TextEditingController();
TextEditingController numR4C2controller = TextEditingController();
TextEditingController numR4C3controller = TextEditingController();
String result = "0";
String result2 = "0";
String result3 = "0";
String result4 = "0";
// MAKE LIST OF MAP TO KEEP TRACK OF EACH BUTTONS
List<Map> buttons = [
{"name": "BreakFast", "active": false, "value": 1.0},
{"name": "Lunch", "active": false, "value": 0.6},
{"name": "Tea", "active": false, "value": 0.55},
];
// YOU CAN SET VARIABLE TO CURRENT MEAL NAME AND CAN CHECK WHETHER IT'S (breakFast) OR NOT
String? currentMealType;
// TOGGLE BUTTON FUNCTION
toggleButtons(Map obj) {
for (var i in buttons) {
if (i['name'] == obj['name']) {
i['active'] = !i['active'];
numR2C2controller.text = obj['value'].toString();
_calculateR2();
} else {
i['active'] = false;
}
}
setState(() {});
}
_calculateR1() {
if (numR1C1controller.text.isNotEmpty &&
numR1C2controller.text.isNotEmpty) {
double sum = double.parse(numR1C1controller.text) -
double.parse(numR1C2controller.text);
numR4C2controller.text = numR1C2controller.text;
numR2C1controller.text = numR1C1controller.text; // <-- add this
WidgetsBinding.instance.addPostFrameCallback((_) {
_calculateR3();
_calculateR2();
});
result = sum.toStringAsFixed(1);
}
if (numR1C2controller.text.isNotEmpty) {
setState(() {
_fillColor = double.parse(numR1C2controller.text) < 5
? Colors.red
: double.parse(numR1C2controller.text) > 9.1
? Colors.orange
: Colors.green;
});
} else {
setState(() {
_fillColor = Colors.white;
});
}
}
_calculateR2() {
if (numR2C1controller.text.isNotEmpty &&
numR2C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR2C2controller.text) *
double.parse(numR2C1controller.text);
numR2C3controller.text = sum.toStringAsFixed(1);
numR3C1controller.text = numR2C3controller.text;
WidgetsBinding.instance.addPostFrameCallback((_) {
_calculateR3();
});
result2 = sum.toStringAsFixed(1);
});
}
}
_calculateR3() {
if (numR3C1controller.text.isNotEmpty &&
numR3C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR3C1controller.text) /
double.parse(numR3C2controller.text);
numR3C3controller.text = sum.toStringAsFixed(1);
numR4C1controller.text = numR3C3controller.text;
WidgetsBinding.instance.addPostFrameCallback((_) {
_calculateR3();
_calculateR4();
});
result3 = sum.toStringAsFixed(1);
});
}
}
_calculateR4() {
if (numR4C1controller.text.isNotEmpty &&
numR4C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR4C1controller.text) -
double.parse(numR4C2controller.text);
numR4C3controller.text = sum.toStringAsFixed(1);
result4 = sum.toStringAsFixed(1);
});
}
}
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
const Padding(
padding: EdgeInsets.all(6.0),
child: Text('Please pick a meal'),
),
// HERE IS THE VIEW FOR BUTTONS
//******************************
Row(
children: buttons
.map(
(btn) => Expanded(
child: GestureDetector(
onTap: () => toggleButtons(btn),
child: Container(
padding: const EdgeInsets.all(20.0),
margin: const EdgeInsets.only(bottom: 10, right: 10),
decoration: BoxDecoration(
color: btn['active'] ? Colors.red : Colors.white,
border: Border.all(color: Colors.grey[300]!)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(btn['name'],
style: TextStyle(
color: btn['active']
? Colors.white
: Colors.black)),
Text(btn['value'].toString(),
style: TextStyle(
color: btn['active']
? Colors.white
: Colors.black))
],
),
),
),
),
)
.toList(),
),
const Padding(
padding: EdgeInsets.all(6.0),
child: Text('Input Data'),
),
//******************************
Row(
children: <Widget>[
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 14.0),
controller: numR1C1controller,
onChanged: (value) => _calculateR1(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,1}'))
],
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: 'Carbs in Meal',
isDense: true,
hintText: 'Enter First Number',
fillColor: _fillColor,
filled: false),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 14.0),
onChanged: (value) => _calculateR1(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR1C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,1}'))
],
decoration: InputDecoration(
border: const OutlineInputBorder(),
filled: true,
labelText: 'Current B/G Level',
isDense: true,
hintText: 'Enter Second Number',
fillColor: _fillColor),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 14.0),
onChanged: (value) => _calculateR1(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR1C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Excercise Factor',
isDense: true,
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
const Padding(
padding: EdgeInsets.all(6.0),
child: Text('Calculations'),
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0, height: 1.0),
onChanged: (value) => _calculateR2(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR2C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'T Carbs in meal',
isDense: true,
hintText: 'Enter Third Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR2(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR2C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'T Meal Ratio',
isDense: true,
hintText: 'Enter Fourth Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR2C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Result 2',
isDense: true,
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR3C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'T Result 2',
// isDense: true,
hintText: 'Enter Fifth Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR3C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Correction Factor',
// isDense: true,
hintText: 'Enter Sixth Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR3C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Result 3',
// isDense: true,
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR4(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR4C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'T Target Level',
// isDense: true,
hintText: 'Enter Seventh Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR4(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR4C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'T Current B/G Level',
// isDense: true,
hintText: 'Enter Eighth Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR4(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR4C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Result 4',
// isDense: true,
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
],
),
);
}
}

Simply wrap your your widget with sizedbox for height and width & for inner padding use content padding
SizedBox(
height: 10, // Increase the size as per your requirement
width: 10,
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10), // Increase this for inner padding
),
)

Set contentPadding to zero in the decoration of TextField i.e.
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
),

If you want to make it even smaller, you can wrap it in SizedBox and give it some height (and width).
SizedBox(
height: 50,
width: 50,
child: TextField(),
)

My app uses a number of Input Text boxes to make certain calculations and it works fine, unless I backspace to change the number

My app uses a number of Input Text boxes to make certain calculations and it works fine, unless I backspace to change the number and then Visual Studio Code opens up a screen showing the file "errors_patch.dart". I'm not sure why this happens, but strangely only happens if I haven't filled in all the Input Text boxes. What can I try next?
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
const appTitle = 'Diabetic insulin dosage';
return MaterialApp(
debugShowCheckedModeBanner: false,
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
backgroundColor: Colors.blue,
foregroundColor: Colors.black,
),
body: const AddTwoNumbers(),
backgroundColor: Colors.white,
),
);
}
}
class AddTwoNumbers extends StatefulWidget {
const AddTwoNumbers({super.key});
#override
// ignore: library_private_types_in_public_api
_AddTwoNumbersState createState() => _AddTwoNumbersState();
}
class _AddTwoNumbersState extends State<AddTwoNumbers> {
Color _fillColor = Colors.white;
TextEditingController numR1C1controller =
TextEditingController(); //Changed name of the texteditingcontroller as Row as R and Column as C
TextEditingController numR1C2controller = TextEditingController();
TextEditingController numR1C3controller = TextEditingController();
TextEditingController numR2C1controller = TextEditingController();
TextEditingController numR2C2controller = TextEditingController();
TextEditingController numR2C3controller = TextEditingController();
TextEditingController numR3C1controller = TextEditingController();
TextEditingController numR3C2controller = TextEditingController();
TextEditingController numR3C3controller = TextEditingController();
TextEditingController numR4C1controller = TextEditingController();
TextEditingController numR4C2controller = TextEditingController();
TextEditingController numR4C3controller = TextEditingController();
TextEditingController numR5C1controller = TextEditingController();
TextEditingController numR5C2controller = TextEditingController();
TextEditingController numR5C3controller = TextEditingController();
TextEditingController numR6C1controller = TextEditingController();
TextEditingController numR6C2controller = TextEditingController();
TextEditingController numR6C3controller = TextEditingController();
String result = "0";
String result2 = "0";
String result3 = "0";
String result4 = "0";
String result5 = "0";
String result6 = "0";
// MAKE LIST OF MAP TO KEEP TRACK OF EACH BUTTONS
List<Map> buttons = [
{"name": "BreakFast", "active": false, "value": 1.0},
{"name": "Lunch", "active": false, "value": 0.55},
{"name": "Tea", "active": false, "value": 0.55},
];
// YOU CAN SET VARIABLE TO CURRENT MEAL NAME AND CAN CHECK WHETHER IT'S (breakFast) OR NOT
String? currentMealType;
// TOGGLE BUTTON FUNCTION
toggleButtons(Map obj) {
for (var i in buttons) {
if (i['name'] == obj['name']) {
i['active'] = !i['active'];
numR2C2controller.text = obj['value'].toString();
_calculateR2();
} else {
i['active'] = false;
}
}
setState(() {});
}
_calculateR1() {
if (numR1C1controller.text.isNotEmpty &&
numR1C2controller.text.isNotEmpty) {
double sum = double.parse(numR1C1controller.text) -
double.parse(numR1C2controller.text);
numR4C2controller.text = numR1C2controller.text;
numR2C1controller.text = numR1C1controller.text; // <-- add this
WidgetsBinding.instance.addPostFrameCallback((_) {
_calculateR3();
_calculateR2();
});
result = sum.toStringAsFixed(1);
}
if (numR1C2controller.text.isNotEmpty) {
setState(() {
_fillColor = double.parse(numR1C2controller.text) < 5
? Colors.red
: double.parse(numR1C2controller.text) > 9.1
? Colors.orange
: Colors.green;
});
} else {
setState(() {
_fillColor = Colors.white;
});
}
}
_calculateR2() {
if (numR2C1controller.text.isNotEmpty &&
numR2C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR2C2controller.text) *
double.parse(numR2C1controller.text);
numR2C3controller.text = sum.toStringAsFixed(1);
numR3C1controller.text = numR2C3controller.text;
WidgetsBinding.instance.addPostFrameCallback((_) {
_calculateR3();
});
result2 = sum.toStringAsFixed(1);
});
}
}
_calculateR3() {
if (numR3C1controller.text.isNotEmpty &&
numR3C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR3C1controller.text) /
double.parse(numR3C2controller.text);
numR3C3controller.text = sum.toStringAsFixed(1);
numR6C1controller.text = numR3C3controller.text;
WidgetsBinding.instance.addPostFrameCallback((_) {
_calculateR3();
_calculateR4();
_calculateR6();
});
result3 = sum.toStringAsFixed(1);
});
}
}
_calculateR4() {
if (numR4C1controller.text.isNotEmpty &&
numR4C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR4C1controller.text) -
double.parse(numR4C2controller.text);
numR4C3controller.text = sum.toStringAsFixed(1);
numR5C1controller.text = numR4C3controller.text;
WidgetsBinding.instance.addPostFrameCallback((_) {
_calculateR5();
});
result4 = sum.toStringAsFixed(1);
});
}
}
_calculateR5() {
if (numR5C1controller.text.isNotEmpty &&
numR5C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR5C1controller.text) /
double.parse(numR5C2controller.text);
numR5C3controller.text = sum.toStringAsFixed(1);
numR6C2controller.text = numR5C3controller.text;
result5 = sum.toStringAsFixed(1);
});
}
}
_calculateR6() {
if (numR6C1controller.text.isNotEmpty &&
numR6C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR6C1controller.text) -
double.parse(numR6C2controller.text);
numR6C3controller.text = sum.toStringAsFixed(1);
result6 = sum.toStringAsFixed(1);
});
}
}
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
const Padding(
padding: EdgeInsets.all(6.0),
child: Text('Please pick a meal'),
),
// HERE IS THE VIEW FOR BUTTONS
//******************************
Row(
children: buttons
.map(
(btn) => Expanded(
child: GestureDetector(
onTap: () => toggleButtons(btn),
child: Container(
padding: const EdgeInsets.all(10.0),
margin: const EdgeInsets.only(bottom: 10, right: 10),
decoration: BoxDecoration(
color: btn['active'] ? Colors.blue : Colors.white,
border: Border.all(color: Colors.grey[300]!)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(btn['name'],
style: TextStyle(
color: btn['active']
? Colors.white
: Colors.black)),
Text(btn['value'].toString(),
style: TextStyle(
color: btn['active']
? Colors.white
: Colors.black))
],
),
),
),
),
)
.toList(),
),
const Padding(
padding: EdgeInsets.all(6.0),
child: Text('Input Data'),
),
//******************************
Row(
children: <Widget>[
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 14.0),
controller: numR1C1controller,
onChanged: (value) => _calculateR1(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,1}'))
],
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(20),
border: const OutlineInputBorder(),
labelText: 'Carbs in Meal',
isDense: true,
hintText: 'Enter 1st Number',
fillColor: _fillColor,
filled: false),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 14.0),
onChanged: (value) => _calculateR1(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR1C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,1}'))
],
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(20),
border: const OutlineInputBorder(),
filled: true,
labelText: 'Current B/G Level',
isDense: true,
hintText: 'Enter 2nd Number',
fillColor: _fillColor),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 14.0),
onChanged: (value) => _calculateR1(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR1C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(20),
border: OutlineInputBorder(),
labelText: 'Excercise Factor',
isDense: true,
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
const Padding(
padding: EdgeInsets.all(6.0),
child: Text('Calculations'),
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0, height: 1.0),
onChanged: (value) => _calculateR2(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR2C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'T Carbs in meal',
hintText: 'Enter 3rd Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR2(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR2C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'T Meal Ratio',
hintText: 'Enter 4th Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR2C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'Result 2',
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR3C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'T Result 2',
hintText: 'Enter Fifth Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR3C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'Correction Factor',
hintText: 'Enter Sixth Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR3C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'Result 3',
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR4(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR4C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'T Target Level',
hintText: 'Enter Seventh Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR4(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR4C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'T Current B/G Level',
// isDense: true,
hintText: 'Enter Eighth Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR4(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR4C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'Result 4',
// isDense: true,
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR5(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR5C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'T Result Difference',
hintText: 'Enter 9th Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR5(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR5C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'Correction Factor',
hintText: 'Enter 10th Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR5(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR5C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'Result 5',
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR6(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR6C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'T Result Actual Units',
hintText: 'Enter 11th Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR6(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR6C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'Result Difference',
// isDense: true,
hintText: 'Enter 12th Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR6(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR6C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(3),
border: OutlineInputBorder(),
labelText: 'Result 6',
// isDense: true,
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
],
),
);
}
}

You are most likely facing this issue because of TextEditingController, and you are not disposing the controller when the widget is removed from widget tree
so in order to fix the issue you can try this code:
class _AddTwoNumbersState extends State<AddTwoNumbers> {
// TextEditingController code goes here
// Add a dispose() method to dispose of the controllers
#override
void dispose() {
// Call dispose() on each of the controllers
numR1C1controller.dispose();
numR1C2controller.dispose();
numR1C3controller.dispose();
numR2C1controller.dispose();
numR2C2controller.dispose();
numR2C3controller.dispose();
numR3C1controller.dispose();
numR3C2controller.dispose();
numR3C3controller.dispose();
numR4C1controller.dispose();
numR4C2controller.dispose();
numR4C3controller.dispose();
numR5C1controller.dispose();
numR5C2controller.dispose();
numR5C3controller.dispose();
numR6C1controller.dispose();
numR6C2controller.dispose();
numR6C3controller.dispose();
// Call super.dispose() to ensure the state is properly disposed
super.dispose();
}
}

FLUTTER / DART APP - widget_test.dart - appears to now have a problem

I'm new to coding of any sort and am creating an app that was working fine. From time to time I have been making a copy of the "main.dart" code in case I get any problems and need to copy it back for any reason. Suddenly I seem to have a lot of errors related to the widget_test.dart file - can this be restored from anywhere or recreated from the code in main.dart as I never took a copy of this, just the main.dart code.
UPDATE ** Code added :
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
const appTitle = 'Diabetic insulin dosage';
return MaterialApp(
debugShowCheckedModeBanner: false,
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
backgroundColor: Colors.blue,
foregroundColor: Colors.black,
),
body: const AddTwoNumbers(),
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(label: 'home', icon: Icon(Icons.home)),
BottomNavigationBarItem(
label: 'Defaults',
icon: Icon(Icons.settings),
)
],
),
backgroundColor: Colors.white,
),
);
}
}
class AddTwoNumbers extends StatefulWidget {
const AddTwoNumbers({super.key});
#override
// ignore: library_private_types_in_public_api
_AddTwoNumbersState createState() => _AddTwoNumbersState();
}
class _AddTwoNumbersState extends State<AddTwoNumbers> {
Color _fillColor = Colors.white;
TextEditingController numR1C1controller =
TextEditingController(); //Changed name of the texteditingcontroller as Row as R and Column as C
TextEditingController numR1C2controller = TextEditingController();
TextEditingController numR1C3controller = TextEditingController();
TextEditingController numR2C1controller = TextEditingController();
TextEditingController numR2C2controller = TextEditingController();
TextEditingController numR2C3controller = TextEditingController();
TextEditingController numR3C1controller = TextEditingController();
TextEditingController numR3C2controller = TextEditingController();
TextEditingController numR3C3controller = TextEditingController();
TextEditingController numR4C1controller = TextEditingController();
TextEditingController numR4C2controller = TextEditingController();
TextEditingController numR4C3controller = TextEditingController();
TextEditingController numR5C1controller = TextEditingController();
TextEditingController numR5C2controller = TextEditingController();
TextEditingController numR5C3controller = TextEditingController();
TextEditingController numR6C1controller = TextEditingController();
TextEditingController numR6C2controller = TextEditingController();
TextEditingController numR6C3controller = TextEditingController();
String result = "0";
String result2 = "0";
String result3 = "0";
String result4 = "0";
String result5 = "0";
String result6 = "0";
#override
void dispose() {
super.dispose();
numR1C1controller.dispose();
numR1C2controller.dispose();
numR1C3controller.dispose();
numR2C1controller.dispose();
numR2C2controller.dispose();
numR2C3controller.dispose();
numR3C1controller.dispose();
numR3C2controller.dispose();
numR3C3controller.dispose();
numR4C1controller.dispose();
numR4C2controller.dispose();
numR4C3controller.dispose();
numR5C1controller.dispose();
numR5C2controller.dispose();
numR5C3controller.dispose();
numR6C1controller.dispose();
numR6C2controller.dispose();
numR6C3controller.dispose();
}
// MAKE LIST OF MAP TO KEEP TRACK OF EACH BUTTONS
List<Map> buttons = [
{"name": "BreakFast", "active": false, "value": 1.0},
{"name": "Lunch", "active": false, "value": 0.55},
{"name": "Tea", "active": false, "value": 0.55},
];
// YOU CAN SET VARIABLE TO CURRENT MEAL NAME AND CAN CHECK WHETHER IT'S (breakFast) OR NOT
String? currentMealType;
// TOGGLE BUTTON FUNCTION
toggleButtons(Map obj) {
for (var i in buttons) {
if (i['name'] == obj['name']) {
i['active'] = !i['active'];
numR2C2controller.text = obj['value'].toString();
_calculateR2();
} else {
i['active'] = false;
}
}
setState(() {});
}
_calculateR1() {
if (numR1C1controller.text.isNotEmpty &&
numR1C2controller.text.isNotEmpty) {
double sum = double.parse(numR1C1controller.text) -
double.parse(numR1C2controller.text);
numR4C2controller.text = numR1C2controller.text;
numR2C1controller.text = numR1C1controller.text; // <-- add this
WidgetsBinding.instance.addPostFrameCallback((_) {
_calculateR3();
_calculateR2();
});
result = sum.toStringAsFixed(1);
}
if (numR1C2controller.text.isNotEmpty) {
setState(() {
_fillColor = double.parse(numR1C2controller.text) < 5
? Colors.red
: double.parse(numR1C2controller.text) > 9.1
? Colors.orange
: Colors.green;
});
} else {
setState(() {
_fillColor = Colors.white;
});
}
}
_calculateR2() {
if (numR2C1controller.text.isNotEmpty &&
numR2C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR2C2controller.text) *
double.parse(numR2C1controller.text);
numR2C3controller.text = sum.toStringAsFixed(1);
numR3C1controller.text = numR2C3controller.text;
WidgetsBinding.instance.addPostFrameCallback((_) {
_calculateR3();
});
result2 = sum.toStringAsFixed(1);
});
}
}
_calculateR3() {
if (numR3C1controller.text.isNotEmpty &&
numR3C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR3C1controller.text) /
double.parse(numR3C2controller.text);
numR3C3controller.text = sum.toStringAsFixed(1);
numR6C1controller.text = numR3C3controller.text;
WidgetsBinding.instance.addPostFrameCallback((_) {
_calculateR3();
_calculateR4();
_calculateR6();
});
result3 = sum.toStringAsFixed(1);
});
}
}
_calculateR4() {
if (numR4C1controller.text.isNotEmpty &&
numR4C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR4C1controller.text) -
double.parse(numR4C2controller.text);
numR4C3controller.text = sum.toStringAsFixed(1);
numR5C1controller.text = numR4C3controller.text;
WidgetsBinding.instance.addPostFrameCallback((_) {
_calculateR5();
});
result4 = sum.toStringAsFixed(1);
});
}
}
_calculateR5() {
if (numR5C1controller.text.isNotEmpty &&
numR5C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR5C1controller.text) /
double.parse(numR5C2controller.text);
numR5C3controller.text = sum.toStringAsFixed(1);
numR6C2controller.text = numR5C3controller.text;
result5 = sum.toStringAsFixed(1);
});
}
}
_calculateR6() {
if (numR6C1controller.text.isNotEmpty &&
numR6C2controller.text.isNotEmpty) {
setState(() {
double sum = double.parse(numR6C1controller.text) -
double.parse(numR6C2controller.text);
numR6C3controller.text = sum.toStringAsFixed(1);
result6 = sum.toStringAsFixed(1);
});
}
}
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
const Padding(
padding: EdgeInsets.all(6.0),
child: Text('Please pick a meal'),
),
// HERE IS THE VIEW FOR BUTTONS
//******************************
Row(
children: buttons
.map(
(btn) => Expanded(
child: GestureDetector(
onTap: () => toggleButtons(btn),
child: Container(
padding: const EdgeInsets.all(10.0),
margin: const EdgeInsets.only(bottom: 10, right: 10),
decoration: BoxDecoration(
color: btn['active'] ? Colors.blue : Colors.white,
border: Border.all(color: Colors.grey[300]!)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(btn['name'],
style: TextStyle(
color: btn['active']
? Colors.white
: Colors.black)),
Text(btn['value'].toString(),
style: TextStyle(
color: btn['active']
? Colors.white
: Colors.black))
],
),
),
),
),
)
.toList(),
),
const Padding(
padding: EdgeInsets.all(6.0),
child: Text('Input Data'),
),
//******************************
Row(
children: <Widget>[
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 14.0),
controller: numR1C1controller,
onChanged: (value) => _calculateR1(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,1}'))
],
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(20),
border: const OutlineInputBorder(),
labelText: 'Carbs in Meal',
isDense: true,
hintText: 'Enter 1st Number',
fillColor: _fillColor,
filled: false),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 14.0),
onChanged: (value) => _calculateR1(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR1C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,1}'))
],
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(20),
border: const OutlineInputBorder(),
filled: true,
labelText: 'Current B/G Level',
isDense: true,
hintText: 'Enter 2nd Number',
fillColor: _fillColor),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 14.0),
onChanged: (value) => _calculateR1(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR1C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(20),
border: OutlineInputBorder(),
labelText: 'Excercise Factor',
isDense: true,
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
const Padding(
padding: EdgeInsets.all(6.0),
child: Text('Calculations'),
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0, height: 1.0),
onChanged: (value) => _calculateR2(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR2C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'T Carbs in meal',
hintText: 'Enter 3rd Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR2(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR2C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'T Meal Ratio',
hintText: 'Enter 4th Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR2C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'Result 2',
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR3C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'T Result 2',
hintText: 'Enter Fifth Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR3C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'Correction Factor',
hintText: 'Enter Sixth Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR3(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR3C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'Result 3',
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR4(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR4C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'T Target Level',
hintText: 'Enter Seventh Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR4(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR4C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'T Current B/G Level',
// isDense: true,
hintText: 'Enter Eighth Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR4(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR4C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'Result 4',
// isDense: true,
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR5(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR5C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'T Result Difference',
hintText: 'Enter 9th Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR5(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR5C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'Correction Factor',
hintText: 'Enter 10th Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR5(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR5C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'Result 5',
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
const SizedBox(
height: 8,
),
Row(
children: [
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR6(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR6C1controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'T Result Actual Units',
hintText: 'Enter 11th Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR6(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR6C2controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'Result Difference',
// isDense: true,
hintText: 'Enter 12th Number',
),
),
),
const SizedBox(
width: 8,
),
Expanded(
child: TextField(
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20.0),
onChanged: (value) => _calculateR6(),
keyboardType:
const TextInputType.numberWithOptions(decimal: true),
controller: numR6C3controller,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(2),
border: OutlineInputBorder(),
labelText: 'Result 6',
// isDense: true,
hintText: '',
),
),
),
const SizedBox(
width: 8,
),
],
),
],
),
);
}
}

when you create new flutter project, you can see sample code that have FloatingActionButton with Icons.add and when you press it, increasing counter variable.
this test is write for that. so tester want to find FloatingActionButton by it's icon. it have a problem because tester can not find FloatingActionButton.
if you want to know more about unit-testing I suggest watch this tutorial:
https://www.youtube.com/watch?v=4d6hEaUVvuU

Flutter: Showing both helpText and labelText in TextFormField

I am trying to build a login page using Flutter.
I want to have both hintText and labelText shown for the TextFormField that I'm using, however it only shows me the labelText when I click on the field, that is, when the cursor is in that field.
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
hintText: 'example#email.com',
labelText: 'Username',
labelStyle: TextStyle(
color: Colors.blue,
),
),
);
How it looks initially:
How it looks after I click on it:

You set autofocus: true to to make it focused immediately after the page has been rendered.
TextFormField(
autofocus: true,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
hintText: 'example#email.com',
labelText: 'Username',
labelStyle: TextStyle(
color: Colors.blue,
),
),
);

There is no default properties for it but you can try with this.
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomTextFormField(
labelText: 'EMAIL',
hintText: 'example#email.com',
keyboardType: TextInputType.emailAddress,
validator: (t) {},
),
SizedBox(height: 8),
CustomTextFormField(
labelText: 'PASSWORD',
hintText: 'Enter password',
keyboardType: TextInputType.emailAddress,
validator: (t) {},
),
SizedBox(height: 8),
CustomTextFormField(
labelText: 'NAME',
hintText: 'Enter name',
keyboardType: TextInputType.emailAddress,
validator: (t) {},
)
],
),
)));
Created on CustomTextFormField class
import 'package:flutter/material.dart';
class CustomTextFormField extends StatelessWidget {
final TextEditingController controller;
final String hintText;
final String labelText;
final TextInputType keyboardType;
final Function(String) validator;
final bool obscureText;
CustomTextFormField({
this.controller,
this.hintText,
this.labelText,
this.keyboardType,
this.validator,
this.obscureText: false
});
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Theme(
data: theme.copyWith(
primaryColor: theme.accentColor,
hintColor: Colors.grey[500],
errorColor: Colors.redAccent,
),
child: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
labelText,
textAlign: TextAlign.start,
style: TextStyle(
color: theme.primaryColor,
fontWeight: FontWeight.bold,
fontSize: 15
)
),
TextFormField(
cursorColor: Colors.grey[850],
style: TextStyle(color: Colors.grey[850]),
controller: controller,
decoration: InputDecoration(
hintText: hintText,
enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: theme.primaryColor)),
focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: theme.primaryColor)),
disabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: theme.primaryColor))
),
keyboardType: keyboardType,
obscureText: obscureText,
validator: validator,
),
],
),
)
);
}
}

Add floatingLabelBehavior: FloatingLabelBehavior.always to InputDecoration
enter image description here