应用栏上的 InkWell 高度飞溅

Question

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%3D%3D&auto=format&fit=crop&w=500&q=60"),
      backgroundColor: Colors.transparent,
    ),
    SizedBox(width: 24),
  ],
);

Answer 1

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%3D%3D&auto=format&fit=crop&w=500&q=60"),
      backgroundColor: Colors.transparent,
    ),),
    SizedBox(width: 24),
  ],
);