It's 4 years old question and now many things have been changed in flutter but I will answer this questino because I recently went through a requirement like this and I bet this solution will work for everybody so let's get started.
So as per my understanding you are having more than 1 text fields in your screen and you want change the color when you click to enter on different text fields.
So it can be done in lot a different ways I will share the most intuitive way which I liked.
Steps :-
1.make Color variables for every textFields which you are having in your screen.
2. Initialize default color in the InItState() {}. (for example I want my all fields with no color so I will Colors.transparent)
3. Make filled: True in your TextFormField.
4. set filledColor to variable which you created for the color for the particular textField.
5. change the value of variable for the onTap: event.
So Now your noodles are ready, just go through the code after reading these steps.
import '../flutter_flow/flutter_flow_theme.dart';
import '../flutter_flow/flutter_flow_util.dart';
import '../flutter_flow/flutter_flow_widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';
import 'package:provider/provider.dart';
import 'personal_info2by2_component_model.dart';
export 'personal_info2by2_component_model.dart';
class PersonalInfo2by2ComponentWidget extends StatefulWidget {
const PersonalInfo2by2ComponentWidget({Key? key}) : super(key: key);
@override
_PersonalInfo2by2ComponentWidgetState createState() =>
_PersonalInfo2by2ComponentWidgetState();
}
class _PersonalInfo2by2ComponentWidgetState
extends State<PersonalInfo2by2ComponentWidget> {
late PersonalInfo2by2ComponentModel _model;
late AutovalidateMode firstNameAutoValidateMode;
late AutovalidateMode lastNameAutoValidateMode;
late AutovalidateMode emailAutoValidateMode;
late AutovalidateMode phoneAutoValidateMode;
late Color firstNameFocusColor;
late Color lastNameFocusColor;
late Color emailFocusColor;
late Color phoneFocusColor;
@override
void setState(VoidCallback callback) {
super.setState(callback);
_model.onUpdate();
}
@override
void initState() {
super.initState();
_model = createModel(context, () => PersonalInfo2by2ComponentModel());
_model.firstNameTextFieldController ??= TextEditingController();
_model.lastNameTextFieldController ??= TextEditingController();
firstNameFocusColor = Colors.transparent;
lastNameFocusColor = Colors.transparent;
WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));
}
@override
void dispose() {
_model.maybeDispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(),
child: Form(
key: _model.formKey,
//autovalidateMode: AutovalidateMode.disabled,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsetsDirectional.fromSTEB(0, 10, 0, 30),
child: Text(
'Personal Details',
style: FlutterFlowTheme.of(context).bodyText1.override(
fontFamily: 'Poppins',
fontSize: 22,
),
),
),
TextFormField(
controller: _model.firstNameTextFieldController,
autovalidateMode: firstNameAutoValidateMode,
autofocus: true,
textCapitalization: TextCapitalization.words,
obscureText: false,
onTap: () {
setState(() {
firstNameFocusColor = Colors.yellow[50]!;
lastNameFocusColor = Colors.transparent;
});
},
decoration: InputDecoration(
fillColor: firstNameFocusColor,
filled: true,
),
),
TextFormField(
controller: _model.lastNameTextFieldController,
autovalidateMode: lastNameAutoValidateMode,
autofocus: true,
textCapitalization: TextCapitalization.words,
obscureText: false,
onTap: () {
setState(() {
lastNameAutoValidateMode = AutovalidateMode.onUserInteraction;
firstNameFocusColor = Colors.transparent;
lastNameFocusColor = Colors.yellow[50]!;
});
},
decoration: InputDecoration(
filled: true,
fillColor: lastNameFocusColor,
),
),
],
),
),
);
}
}
