Hope this will help you!
[This is how the output looks like.][1]
import 'package:flutter/material.dart';
class SearchInputWidget extends StatefulWidget {
final String? hintText;
final EdgeInsetsGeometry outsidePadding, contentPadding;
SearchInputWidget({
Key? key,
this.hintText = "Search",
this.outsidePadding = const EdgeInsets.only(top: 18, bottom: 0),
this.contentPadding = const EdgeInsets.all(16),
}) : super(key: key);
@override
State<SearchInputWidget> createState() => _SearchInputWidgetState();
}
class _SearchInputWidgetState extends State<SearchInputWidget> {
final ValueNotifier<bool> hintVisibilityNotifier = ValueNotifier(true);
final TextEditingController textEditingController = TextEditingController();
@override
Widget build(BuildContext context) {
return Padding(
padding: widget.outsidePadding,
child: Stack(
children: [
TextFormField(
textAlign: TextAlign.center,
controller: textEditingController,
style: TextStyle(
// color: Colors.grey.shade500,
color: Colors.black,
fontFamily: "Asap",
fontSize: 20),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide.none),
filled: true,
fillColor: Colors.grey.shade300,
contentPadding: widget.contentPadding),
onChanged: (text) {
if (text.isEmpty) {
hintVisibilityNotifier.value = true;
} else {
hintVisibilityNotifier.value = false;
}
},
onEditingComplete: () {
if (textEditingController.text.isEmpty) {
hintVisibilityNotifier.value = true;
} else {
hintVisibilityNotifier.value = false;
}
},
),
ValueListenableBuilder(
valueListenable: hintVisibilityNotifier,
builder: (BuildContext context, bool isVisible, Widget? child) {
if (isVisible) {
return Positioned.fill(
child: Align(
alignment: Alignment.center,
child: IgnorePointer(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.search,
color: Colors.grey.shade500,
size: 26,
),
SizedBox(
width: 5,
),
Text(
widget.hintText!,
style: TextStyle(
color: Colors.grey.shade500,
fontFamily: "Asap",
fontSize: 20,
),
),
],
),
),
),
);
} else {
return SizedBox.shrink();
}
})
],
),
);
}
}
[1]: https://i.stack.imgur.com/Y1qNk.png
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,
),
],
),
)
);
}
}
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/JcNbx.png
