Home > Software design >  InkWell height splash on appbar
InkWell height splash on appbar

Time:04-21

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

enter image description here

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),
  ],
);
  • Related