Has anybody had a similar problem?
TextField
suffixIcon
takes a widget like this:
TextField(
decoration: new InputDecoration(
suffixIcon: Icon(Icons.ac_unit),
),
),
Result of the code
Now I would like to have the same thing but with loading animation:
TextField(
decoration: new InputDecoration(
suffixIcon: Container(
child: SpinKitWave(
color: Colors.red,
size: 20.0,
),
),
Result of the code with animation
Same thing happens if I change suffixIcon
to suffix
.
Question: right alignment like with icons, I tried with HorizontalAlignment
, but that doesn't seem to work.
Here's how you can align the loading animation to the right of the TextField
:
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return SafeArea(
child: Scaffold(
body: Center(
child: Container(
padding: EdgeInsets.symmetric(horizontal: width * 0.025),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(60),
),
),
filled: true,
fillColor: const Color(0xFFE3F8F8),
suffixIcon: Container(
width: width * 0.2,
height: width * 0.1,
child: SpinKitWave(
color: Colors.red,
size: 20.0,
),
),
prefixIcon: Icon(
Icons.search,
color: const Color(0x99000000),
),
),
),
),
),
),
);
}
OUTPUT :