У меня есть форма, в которой я хочу, чтобы кнопка очистки отображалась в правой части текстового поля только тогда, когда пользователь начинает вводить данные, и исчезает, если пользователь удаляет все данные, введенные им в текстовое поле. В настоящее время я смог добавить кнопку очистки, но она есть всегда.
см. Мой код ниже
это код моего текстового сообщения
import 'package:flutter/material.dart';
import 'package:finsec/utils/hex_color.dart';
class CustomTextField extends StatelessWidget {
CustomTextField({
this.textInputType,
this.textController ,
this.errorMessage,
this.labelText,
});
TextInputType textInputType;
TextEditingController textController;
String errorMessage, labelText;
@override
Widget build(BuildContext context) {
bool isError = false;
return Container(
child: TextFormField(
keyboardType: textInputType,
style: Theme
.of(context)
.textTheme
.title,
controller: textController,
validator: (String value) {
if (value.isEmpty) {
return errorMessage;
}
},
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: (){
textController.clear();
},
icon: Icon(
Icons.clear,
color: Colors.grey,
),
),
labelStyle: TextStyle(
color: Colors.grey,
fontSize: 16.0
),
contentPadding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0), //size of textfield
errorStyle: TextStyle(
color: Colors.red,
fontSize: 15.0
),
border: OutlineInputBorder(
borderSide: BorderSide(width:5.0),
borderRadius: BorderRadius.circular(5.0)
)
)
),
);
}
}
here is my code for the form
import 'package:flutter/material.dart';
import 'package:finsec/widget/row_text_input.dart';
import 'package:finsec/widget/text_form_field.dart';
import 'package:finsec/widget/save_button.dart';
import 'package:finsec/utils/strings.dart';
import 'package:finsec/utils/dimens.dart';
import 'package:finsec/utils/colors.dart';
import 'package:finsec/widget/column_text_input.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Simple Interest Calculator App',
home: ThirdFragment(),
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.indigo,
accentColor: Colors.indigoAccent),
));
}
class ThirdFragment extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ThirdFragmentState();
}
}
class _ThirdFragmentState extends State<ThirdFragment> {
var _formKey = GlobalKey<FormState>();
var _currencies = ['Rupees', 'Dollars', 'Pounds'];
final double _minimumPadding = 5.0;
var _currentItemSelected = '';
@override
void initState() {
super.initState();
_currentItemSelected = _currencies[0];
// principalController.addListener(onChange);
}
TextEditingController amountController = TextEditingController();
TextEditingController frequencyController = TextEditingController();
TextEditingController datePaidController = TextEditingController();
TextEditingController categoryController = TextEditingController();
TextEditingController depositToController = TextEditingController();
TextEditingController descriptionController = TextEditingController();
var displayResult = '';
@override
Widget build(BuildContext context) {
TextStyle textStyle = Theme.of(context).textTheme.title;
return Scaffold(
appBar: AppBar(
title: Text('Simple Interest Calculator'),
),
body: Form(
key: _formKey,
onChanged: ,
child: SingleChildScrollView(
child: Column (children: [
Padding(
padding: EdgeInsets.only(top: 10.0, bottom: 5.0, left: 15.0, right: 15.0),
child: CustomTextField(textInputType:TextInputType.number,
textController: amountController,
errorMessage:'Enter Income Amount',
labelText:'Income Amount for testing'),
),
RowTextInput(inputName: 'Frequency:',
textInputType: TextInputType.number,
textController: frequencyController,
errorMessage: 'Choose Income Frequency',
labelText: 'Income Amount for testing'
),
RowTextInput(inputName: 'Date Paid:',
textInputType: TextInputType.number,
textController: datePaidController,
errorMessage: 'Pick Income Payment Date',
labelText: 'Income Amount for testing'
),
RowTextInput(inputName: 'Category:',
textInputType: TextInputType.number,
textController: categoryController,
errorMessage: 'Enter Income Category',
labelText: 'Income Amount for testing'
),
RowTextInput(inputName: 'Deposit To:',
textInputType: TextInputType.number,
textController: depositToController,
errorMessage: 'Choose Bank Acct Where Income Is Deposited',
labelText: 'Income Amount for testing'
),
RowTextInput(inputName: 'Description:',
textInputType: TextInputType.number,
textController: descriptionController,
errorMessage: 'Please enter principal amount',
labelText: 'Income Amount for testing'
),
SizedBox(height: 20),
//saveButton()
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
MaterialButton(
height: margin_40dp,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(margin_5dp)),
minWidth: (MediaQuery.of(context).size.width * .9) / 2,
color: Theme.of(context).primaryColor,
textColor: white,
child: new Text(save),
onPressed: () => {
setState(() {
if (_formKey.currentState.validate()) {
// amountController.text.isEmpty ? amountController.text='Value require' : amountController.text='';
//this.displayResult = _calculateTotalReturns();
}
})
},
splashColor: blueGrey,
),
MaterialButton(
height: margin_40dp,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(margin_5dp)),
minWidth: (MediaQuery.of(context).size.width * .9) / 2,
color: Theme.of(context).primaryColor,
textColor: white,
child: new Text(save_and_continue),
onPressed: () => {},
splashColor: blueGrey,
)
])
]
),
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:finsec/widget/text_form_field.dart';
class RowTextInput extends StatelessWidget {
RowTextInput({
this.inputName,
this.textInputType,
this.textController ,
this.errorMessage,
this.labelText,
// this.hint,
// this.height,
// this.padding,
// this.headerRadius,
});
TextInputType textInputType;
TextEditingController textController;
String inputName, errorMessage, labelText;
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(
top: 5.0, bottom: 5.0, left: 15.0, right: 15.0),
child: Row(children: [
Expanded(
child: Text(this.inputName, maxLines: 1,)
),
Expanded(
flex: 3,
child: CustomTextField(textInputType:TextInputType.number,
textController: this.textController,
errorMessage: this.errorMessage
),
),
]),
);
}
}
Я ожидаю, что очистка (кнопка x) исчезнет, когда текстовое поле пусто, и появится, когда пользователь вводит или выбирает значение из выпадающего списка и т. Д. Может ли кто-нибудь помочь? заранее спасибо