fluttertextfieldsuffix

TextField suffix animation alignment


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

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

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.


Solution

  • 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 :

    enter image description here