skip to Main Content

I would like to animate the icon of this ElevatedButton when pressed.
The idea was to make the icon spin for a few seconds after pressing this button.

Can anyone help me?

This is the code:

ElevatedButton.icon(
     onPressed: () {},
     icon: const Icon(Icons.sync),
     label: const Padding(
     padding: EdgeInsets.symmetric(horizontal: 8.0),
         child: Text("Sincronizza"),
     )
),

2

Answers


  1. I am not sure you could do that in ElevatedButton.icon but, you could achieve it using ElevatedButton with some updates in the child.

    Example:

                      ElevatedButton(
                          onPressed: () {},
                          child: const Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              /// animated this icon as you need OR You could use AnimatedIcon
                              Icon(Icons.sync),
                              Text('Sincronizza'),
                            ],
                          ),
                        )
    
    Login or Signup to reply.
  2. You can use AnimatedBuilder inside elevated button by passing as icon widget. Below I tried code when elevated button clicked the animation starts and will load until button is clicked again. you can control animated icon when to stop by making loader false and setstate it.

    You can preview or play with code here

    import 'package:flutter/material.dart';
    import 'dart:math' as math;
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      final String title;
    
      const MyHomePage({
        Key? key,
        required this.title,
      }) : super(key: key);
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
      
      late AnimationController _countroller;
      bool isLoading = false;
      
      @override
      void initState() {
        super.initState();
        _countroller = AnimationController(duration: const Duration(seconds:1), vsync: this,)..repeat();
      }
      
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text(widget.title),
          ),
          body: Center(
            child: ElevatedButton.icon(
         onPressed: () {
           setState(() {
        isLoading = !isLoading;
      });
         },
         icon: isLoading ? AnimatedBuilder(
                animation: _countroller,
                  builder: (BuildContext context, Widget? child){
                    return Transform.rotate(
                      angle: _countroller.value * 2.0 * math.pi,
                      child: const Icon(
                            Icons.sync,
                            size: 40,
                          ),
                    );
                  }
                )
                  : const Icon(
                            Icons.sync,
                            size: 40,
                          ),
         label: const Padding(
         padding: EdgeInsets.symmetric(horizontal: 8.0),
             child: Text("Sincronizza"),
         )
    ), 
          ),
        );
      }}
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search