i put avatar image on appbar and i gave it inkwell for splash effect but the inkwell height cannot be change, i want to match the inkwell with image. Or if you have any better approach for image ontap with splash but don't give me additional package okay
code:
AppBar(
centerTitle: false,
elevation: 0,
toolbarHeight: 80,
backgroundColor: Colors.blue,
titleSpacing: 24,
title: Text(
'Hello, what\'s your name? ',
style: TextStyle(
fontSize: 22.sp,
),
),
actions: [
CircleAvatar(
radius: 30.0,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(50),
onTap: () {},
),
),
backgroundImage: NetworkImage(
"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8cGVvcGxlfGVufDB8fDB8fA==&auto=format&fit=crop&w=500&q=60"),
backgroundColor: Colors.transparent,
),
SizedBox(width: 24),
],
);
CodePudding user response:
you have to wrap your action with center widget and it should work fine.
AppBar(
centerTitle: false,
elevation: 0,
toolbarHeight: 80,
backgroundColor: Colors.blue,
titleSpacing: 24,
title: Text(
'Hello, what\'s your name? ',
style: TextStyle(
fontSize: 22.sp,
),
),
actions: [
Center(
child:CircleAvatar(
radius: 30.0,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(50),
onTap: () {},
),
),
backgroundImage: NetworkImage(
"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8cGVvcGxlfGVufDB8fDB8fA==&auto=format&fit=crop&w=500&q=60"),
backgroundColor: Colors.transparent,
),),
SizedBox(width: 24),
],
);