Flutter: Showing both helpText and labelText in TextFormField - flutter

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

Related

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

How do I center the posts in the widget I created?

TextField textWidget(String text, IconData icon, bool isPasswordType,
TextEditingController controller, TextAlign align) {
return TextField(
controller: controller,
obscureText: isPasswordType,
enableSuggestions: !isPasswordType,
autocorrect: !isPasswordType,
cursorColor: Colors.white,
style: TextStyle(color: Colors.white.withOpacity(0.9)),
decoration: InputDecoration(
prefixIcon: Icon(
icon,
color: Colors.white70,
),
labelText: text,
labelStyle: TextStyle(color: Colors.white.withOpacity(0.9)),
filled: true,
floatingLabelBehavior: FloatingLabelBehavior.never,
fillColor: const Color.fromARGB(255, 209, 107, 107).withOpacity(0.7),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(width: 0, style: BorderStyle.none)),
),
keyboardType: isPasswordType
? TextInputType.visiblePassword
: TextInputType.emailAddress,
);}
I created a widget called textWidget and it's;
child: textWidget(
"Mail Adress",
Icons.people_alt_outlined,
false,
_numberController,
TextAlign.center),
I tried to add it like this. I call in textWidget;
(String text, IconData icon, bool isPasswordType,TextEditingController controller, TextAlign align)
I assigned all the values ​​as seen in the second code. However, this did not bring the articles to the middle of the label.

You can use label to place Text widget instead of labelText
decoration: InputDecoration(
label: Center(
child: Text(
text,
style: TextStyle(
color: Colors.white.withOpacity(0.9),
),
),
),
TextField textWidget(String text, IconData icon, bool isPasswordType,
TextEditingController controller, TextAlign align) {
return TextField(
controller: controller,
obscureText: isPasswordType,
enableSuggestions: !isPasswordType,
autocorrect: !isPasswordType,
cursorColor: Colors.white,
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white.withOpacity(0.9)),
decoration: InputDecoration(
label: Center(
child: Text(
text,
style: TextStyle(
color: Colors.white.withOpacity(0.9),
),
),
),
prefixIcon: Icon(
icon,
color: Colors.white70,
),
filled: true,
floatingLabelBehavior: FloatingLabelBehavior.never,
fillColor: const Color.fromARGB(255, 209, 107, 107).withOpacity(0.7),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(width: 0, style: BorderStyle.none)),
),
keyboardType: isPasswordType
? TextInputType.visiblePassword
: TextInputType.emailAddress,
);
}

How to show/hide in this particular code in 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),
);

How to emptying hint text when focus in TextFormField Flutter

I want to make the hint text in TextFormField disappear when the field focused. But the hint text won't disappear until I insert a character in the field. I did the following. How can I make the hint text disappear when the field focused? Thanks!
Container buildTextField(bool isObscure, TextEditingController textEditingController, String hintText, bool onlyNumber) {
return Container(
width: double.infinity,
height: 60,
color: MyColors.primary,
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.only(left: 15, right: 10),
child: TextFormField(
textAlign: TextAlign.center,
keyboardType: onlyNumber ? TextInputType.number : TextInputType.text,
decoration: InputDecoration(
hintText: hintText,
hintStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
),
border: InputBorder.none,
),
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.none,
fontWeight: FontWeight.w600,
),
obscureText: isObscure,
controller: textEditingController,
),
),
);
}

You probably have to add a listener to listen to focus changes:
FocusNode myFocusNode = FocusNode();
myFocusNode.addListener( () {
setState((){});
}
And then, inside your InputDecoration you update the value:
hintText: myFocusNode.hasFocus ? hintText : ''

Use labelText instead,
TextFormField(
controller: fullNameController,
validator: (value) {
if (value.trim().isEmpty) {
return Lang.enterFullName;
}
return null;
},
decoration: InputDecoration(
labelText: Lang.fullName,
prefixIcon: Icon(Icons.person),
),
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
),