Unfortunately i don't know how to do it with default tools, but i do it with another way, may be it will be helpful for you.
- Create variable for
FocusNode
and border color inside of your widget:
// Use it to change color for border when textFiled in focus
FocusNode _focusNode = FocusNode();
// Color for border
Color _borderColor = Colors.grey;
- Inside of
initState
create listener for textField
, if textField
will be in focus, change border color to orange, otherwise change to grey:
@override
void initState() {
super.initState();
// Change color for border if focus was changed
_focusNode.addListener(() {
setState(() {
_borderColor = _focusNode.hasFocus ? Colors.orange : Colors.grey;
});
});
}
- Create
Container
with border for textField
, add focusNode
and set decoration to textField
:
Container(
decoration: BoxDecoration(
border: Border.all(color: _borderColor),
borderRadius: BorderRadius.circular(4),
),
child: TextField(
focusNode: _focusNode,
style: TextStyle(color: Colors.grey),
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
labelText: "Amount",
prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),
prefixIcon: Padding(
padding: EdgeInsets.symmetric(vertical: 18, horizontal: 8),
child: Text("₦", style: TextStyle(fontSize: 16, color: Colors.grey)),
),
),
),
),
- Don't forget call
dispose
for focusNode
:
@override
void dispose() {
_focusNode.dispose();
super.dispose();
}
Full code:
class TextFieldDesignPage extends StatefulWidget {
TextFieldDesignPage({Key? key}) : super(key: key);
@override
_TextFieldDesignPageState createState() => _TextFieldDesignPageState();
}
class _TextFieldDesignPageState extends State<TextFieldDesignPage> {
// Use it to change color for border when textFiled in focus
FocusNode _focusNode = FocusNode();
// Color for border
Color _borderColor = Colors.grey;
@override
void initState() {
super.initState();
// Change color for border if focus was changed
_focusNode.addListener(() {
setState(() {
_borderColor = _focusNode.hasFocus ? Colors.orange : Colors.grey;
});
});
}
@override
void dispose() {
_focusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
border: Border.all(color: _borderColor),
borderRadius: BorderRadius.circular(4),
),
child: TextField(
focusNode: _focusNode,
style: TextStyle(color: Colors.grey),
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
labelText: "Amount",
prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),
prefixIcon: Padding(
padding: EdgeInsets.symmetric(vertical: 18, horizontal: 8),
child: Text("₦", style: TextStyle(fontSize: 16, color: Colors.grey)),
),
),
),
),
),
);
}
}
Result:
