title: How can I create this animation on select?
body: <p>I need to make an animation, but I don't know how to do it. When the user clicks on one of the avatars, the avatar will have a blue outline and the camera icon will appear on the selected avatar, the text accompanies the blue color when the avatar is selected. Can you help me please :___.</p>
  <p>This is the code:</p>
  <pre><code>import 'dart:io';
  import 'package:flutter/material.dart';
  import 'package:image_picker/image_picker.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const SettingUser(),
      );
    }
  }
  
  class SettingUser extends StatefulWidget {
    const SettingUser({Key? key}) : super(key: key);
  
    @override
    State&lt;SettingUser&gt; createState() =&gt; _SettingUserState();
  }
  
  class _SettingUserState extends State&lt;SettingUser&gt; {
    bool saved = false;
    ImagePicker imagePicker = ImagePicker();
    XFile? imageSelect;
  
    Future&lt;bool?&gt; showConfirmationDialog() {
      return showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              title: const Text(
                'Exit App',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              content: const Text(
                  'Exit app'),
              actions: [
                TextButton(
                  onPressed: () =&gt; Navigator.pop(context, false),
                  child: const Text('CANCELAR'),
                ),
                TextButton(
                    onPressed: () {},
                    child: const Text(
                      'EXIT',
                      style: TextStyle(color: Colors.red),
                    )),
              ],
            );
          });
    }
  
    imageGallery() async {
      final XFile? imageTemp = await imagePicker.pickImage(
        source: ImageSource.gallery,
      );
  
      setState(() {
        imageSelect = imageTemp;
      });
    }
  
    Widget _buildUserAvatar({
      required ImageProvider image,
      required String name,
    }) {
      return GestureDetector(
        onTap: () {
          imageGallery();
        },
        child: Padding(
          padding: const EdgeInsets.only(left: 16, top: 10.0, right: 0.0, bottom: 5.0),
          child: Column(
            children: [
              SizedBox(
                child: CircleAvatar(
                  backgroundColor: Color(0xFFF3E0A6),
                  radius: 30.0,
                  backgroundImage: image, // if image is a Image
                  child: Align(
                    alignment: Alignment.bottomRight,
                    child: CircleAvatar(
                      backgroundColor: Colors.blue,
                      radius: 12.0,
                      child: Icon(
                        Icons.camera_alt,
                        size: 12.0,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  name,
                  style: TextStyle(fontSize: 14),
                ),
              ),
            ],
          ),
        ),
      );
    }
  
    Widget _renderUserAvatar() {
      if (imageSelect != null) {
        return _buildUserAvatar(
          name: 'Avatar 1',
          image: FileImage(File(imageSelect!.path)),
        );
      }
  
      return _buildUserAvatar(
        name: 'Avatar 1',
        image: AssetImage('assets/images/euQ.png'),
      );
    }
  
    @override
    Widget build(BuildContext context) {
      return WillPopScope(
        onWillPop: () async {
          if (!saved) {
            final confirmation = await showConfirmationDialog();
            return confirmation ?? false;
          }
          return true;
        },
        child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.transparent,
            iconTheme: IconThemeData(color: Colors.blue),
            actions: [
              IconButton(
                icon: Icon(Icons.help_outline,
                ),
                onPressed: () {},
              ),
            ],
          ),
          body: ListView(
            children: [
              Padding(
                padding: EdgeInsets.only(left: 16, top: 5.0),
                child: Text(
                  'Select Avatar:',
                  style: TextStyle(
                    color: Color(0xff8194A9),
                    fontWeight: FontWeight.bold,
                    fontSize: 14,
                  ),
                ),
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _renderUserAvatar(),
                  _buildUserAvatar(
                    name: 'Avatar 2',
                    image: AssetImage('assets/images/'),
                  ),
                  _buildUserAvatar(
                    name: 'Avatar 3',
                    image: AssetImage('assets/images/'),
                  ),
                ],
              ),
              // ButtonConfig(),
              Padding(
                padding: const EdgeInsets.only(left: 15.0, top: 10.0, right: 180.0),
                child: ElevatedButton(
                  onPressed: () {
                    showConfirmationDialog();
                  },
                  child: Text(
                    'Exit App',
                    style: TextStyle(color: Colors.blue),
                  ),
                  style: ElevatedButton.styleFrom(
                    //elevation: 1,
                    primary: Colors.white,
                    padding:
                    EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
                    textStyle: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                    side: BorderSide(
                      width: 1.0,
                      color: Colors.grey,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>