How can I create this animation on select? - flutter

Question

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 :___.
This is the 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<SettingUser> createState() => _SettingUserState();
}
class _SettingUserState extends State<SettingUser> {
bool saved = false;
ImagePicker imagePicker = ImagePicker();
XFile? imageSelect;
Future<bool?> 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: () => 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,
),
),
),
),
],
),
),
);
}
}

Answer 1

I managed to make it work only on the first avatar.
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<SettingUser> createState() => _SettingUserState();
}
class _SettingUserState extends State<SettingUser> {
bool saved = false;
ImagePicker imagePicker = ImagePicker();
XFile? imageSelect;
Future<bool?> 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: () => 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(bool hasFocus, {
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: AnimatedContainer(
duration: const Duration(milliseconds: 1000),
width: hasFocus ? 120 : 100,
height: hasFocus ? 120 : 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
width: hasFocus ? 4 : 3,
color: hasFocus ? Colors.black : Colors.blue,
),
),
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: const TextStyle(fontSize: 14),
),
),
],
),
),
);
}
Widget _renderUserAvatar(bool hasFocus) {
if (imageSelect != null) {
return _buildUserAvatar(
true,
name: "Avatar 1",
image: FileImage(File(imageSelect!.path)),
);
}
return _buildUserAvatar(
false,
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: const IconThemeData(color: Colors.blue),
actions: [
IconButton(
icon: const Icon(Icons.help_outline,
),
onPressed: () {},
),
],
),
body: ListView(
children: [
const 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(true),
_buildUserAvatar(
false,
name: 'Avatar 2',
image: AssetImage('assets/images/euQ.png'),
),
_buildUserAvatar(
false,
name: 'Avatar 3',
image: AssetImage('assets/images/euQ.png'),
),
],
),
// ButtonConfig(),
Padding(
padding: const EdgeInsets.only(left: 15.0, top: 10.0, right: 180.0),
child: ElevatedButton(
onPressed: () {
showConfirmationDialog();
},
child: const Text(
'Exit App',
style: TextStyle(color: Colors.blue),
),
style: ElevatedButton.styleFrom(
//elevation: 1,
primary: Colors.white,
padding:
const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
textStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
side: const BorderSide(
width: 1.0,
color: Colors.grey,
),
),
),
),
],
),
),
);
}
}