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();
}
}
This is my current code:
Widget _buildContent(TextStyle _textStyle6) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Focus(
onFocusChange: (hasFocus) => setState(() => focused = hasFocus),
child: widget.scrollController != null
? Scrollbar(
controller: widget.scrollController,
thickness: 10,
trackVisibility: true,
thumbVisibility: true,
radius: Radius.circular(8),
child: _buildTextField(_textStyle6),
)
: _buildTextField(_textStyle6),
),
if (widget.outerHintText != null) Padding(
padding: const EdgeInsets.only(left: 18, top: 6),
child: Text(widget.outerHintText!, style: widget.outerHintStyle),
),
],
);
}
Widget _buildTextField(TextStyle _textStyle6) {
return TextFormField(
style: _textStyle6,
maxLength: widget.maxLength,
minLines: widget.minLines,
maxLines: widget.maxLines,
keyboardType: widget.keyboardType,
scrollController: widget.scrollController,
// scrollPadding: EdgeInsets.all(30),
decoration: InputDecoration(
alignLabelWithHint: widget.alignLabelWithHint,
border: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey.shade300, width: 0.8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0xff1a73e8), width: 2),
),
labelText: widget.label,
labelStyle: TextStyle(color: focused ? Color(0xff1a73e8) : Colors.black),
contentPadding: EdgeInsets.symmetric(horizontal: 18, vertical: 20),
prefixIcon: widget.prefixIcon,
prefixIconColor: widget.prefixIconColor,
constraints: widget.constraints,
),
);
}
Widget returned like this:
I wanna add some padding between the right border of TextField and the scrollbar. How to get it?
Container(
padding: const EdgeInsets.only(
right: 10.0,
),
decoration: BoxDecoration(
color: Color(),
border: Border.all(
color: Color(),
),
),
child: Scrollbar(
thickness: 5.0,
controller: _scrollController,
trackVisibility: true,
thumbVisibility: true,
child: TextFormField(
maxLines: 8,
textCapitalization: TextCapitalization.words,
scrollController: _scrollController,
decoration: const InputDecoration(
hintText: '....',
hintStyle: TextStyles.bodyTextLight,
isDense: true,
border: InputBorder.none,
filled: true,
fillColor: Color(),
),
),
),
),
You can do something like this, wrap your textfield and scrollbar to a container and give that container the same border and background style to it which you are giving to the textfield. And give it padding on the right side of the container.
https://i.stack.imgur.com/B2XIg.png
I have a list of widgets as follows, with a controller variable for user input in a TextField:
final List<Widget> _setsList = [];
TextEditingController repsController = TextEditingController
I am pushing a new widget 'createSetCard' below when the user presses a button and saving their input in the TextEditingController:
Widget createSetCard() {
return Row(
children: [
Expanded(
child: Container(
height: 60,
alignment: Alignment.center,
child: Text(
setNumber.toString(),
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
decoration: const BoxDecoration(color: constants.kHunterColor),
),
),
Expanded(
flex: 3,
child: TextField(
controller:repsController,
enabled: tf,
textAlign: TextAlign.center,
maxLength: 3,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
hintText: "reps",
// suffix: Text('reps'),
counterText: "",
border: InputBorder.none,
),
),
),
const Expanded(
child: Center(child: Text("x")),
),
Expanded(
flex: 3,
child: TextField(
controller: lbsController,
textAlign: TextAlign.center,
maxLength: 3,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
hintText: "lbs",
suffix: Text("lbs"),
counterText: "",
border: InputBorder.none,
//suffix: Text('lbs'),
),
),
),
],
);
}
My question is when I have multiple items being displayed in my ListView, each of the items changes when I change one of the input fields. How can I make each input field separate from one another in the List? As shown below, each TextField in the ListView is being edited when I change any value of any item in the list.
You should create a list of TextEditingController in your controller:
List<TextEditingController> textEditingControllers = [].obs;
I need a Text Area with an enforced maxLength of 250 chars and its label aligned with the hint text. My code is below.
However, the widget is rendering the text on top of the hint. Does anyone know a solution?
It's like if the counter widget forces the actual text field to move upwards.
TextField with maxLength = 250 and alignLabelWithHint = true
TextField(
expands: false,
minLines: null,
maxLines: null,
maxLengthEnforced: maxLengthEnforced,
maxLength: maxLength,
controller: controller,
onChanged: (String value){
print(value);
},
cursorColor: Colors.deepOrange,
keyboardType: keyboardType,
decoration: InputDecoration(
alignLabelWithHint: true,
labelText: text,
labelStyle: TextStyle(color: Colors.grey),
hintText: text,
prefixIcon: Container(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 15.0),
child: Material(
elevation: 0,
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(30)),
child: Icon(
icon,
color: Colors.red,
),
),
),
],
),
),
border: InputBorder.none,
contentPadding: EdgeInsets.only(right: 10, top: 5, bottom: 5)),
)
The purpose of a hint is to disappear when the user start typing I tried your code and it worked with no problem.
TextField(
expands: false,
minLines: null,
maxLines: null,
maxLengthEnforced: true,
maxLength: 250,
// controller: controller,
onChanged: (String value) {
print(value);
},
cursorColor: Colors.deepOrange,
// keyboardType: keyboardType,
decoration: InputDecoration(
alignLabelWithHint: true,
labelText: "hi",
labelStyle: TextStyle(color: Colors.grey),
hintText: "hi",
prefixIcon: Container(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 15.0),
child: Material(
elevation: 0,
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(30)),
child: Icon(
Icons.highlight,
color: Colors.red,
),
),
),
],
),
),
border: InputBorder.none,
contentPadding:
EdgeInsets.only(right: 10, top: 5, bottom: 5)),
),
I'm trying to make my TextFormField 'bigger'. I tried this code, it does make it bigger, but if I type (here: qwerty) it starts in the middle. Is there an option to start in the left upper corner?
Padding(
padding: EdgeInsets.only(top: 8.0),
child: Container(
width: screenWidth / 1.1,
height: screenHeight / 5.5,
child: Form(
key: _form2Key,
autovalidate: true,
child: TextFormField(
validator: (val) {
if (val.trim().length > 200) {
return "Beschrijving te lang";
} else {
return null;
}
},
onSaved: (val) => beschrijving = val,
minLines: null,
maxLines: null,
expands: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.white,
labelText: "",
labelStyle: TextStyle(fontSize: 15.0),
hintText: " ",
),
),
),
),
)
You can try this.
Padding(
padding: EdgeInsets.all(8.0),
child: Container(
width: 400,
height: 120,
child: Form(
autovalidate: true,
child: TextFormField(
autofocus: true,
validator: (val) {
if (val.trim().length > 200)
return "Beschrijving te lang";
else
return null;
},
maxLines: 100,
decoration: InputDecoration(
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.white,
labelText: "",
labelStyle: TextStyle(fontSize: 15.0),
hintText: "Enter a message",
),
),
),
),
)
Output:
in mycase this is how i solved it.
you could ommit the keyboardType: TextInputType.multiline, in order to allow one to move to the next line.(enter)
TextFormField(
keyboardType: TextInputType.multiline,
controller: _description,
maxLines: 10,
decoration: InputDecoration(
hintMaxLines: 10,
hintText: "description",
labelText: "Description",
hintStyle: hintText),
),