There are multiple ways to do this. Here is an example:
Container(
height: 200,
width: 300,
color: Colors.grey,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Material(
child: InkWell(
onTap: () {
//Here you can call your own animation for animate the Image
},
// Add Your Own Image
child: Image.network(
'https://images.pexels.com/photos/75973/pexels-photo-75973.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
height: 200,
width: 300,
fit: BoxFit.fill,
),
),
),
),
),
),
If anybody is looking for complete circular button then I achieved it this way:
Center(
child: SizedBox.fromSize(
size: Size(80, 80), // Button width and height
child: ClipOval(
child: Material(
color: Colors.pink[300], // Button color
child: InkWell(
splashColor: Colors.yellow, // splash color
onTap: () {}, // Button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.linked_camera), // Icon
Text("Picture"), // Text
],
),
),
),
),
),
)
