I want to achieve the following animation in Flutter. I've created the containers with GestureDetector for that but don't know how to achieve the animation.
Steps will be like:
- Click any of the item
- The item will displaced
- Corresponding page will be opened
- On coming back to previous page, the item will remained displaced until another item is clicked. Clicking on same item won't perform anything.
Currently, if any item is clicked, it's landed to new page without animation
Following is the code I'm using right now. I need the exact output like the attached gif.
GIF: See in Google Drive (Please open in new tab, otherwise this page will be navigated)
Code:
double width = MediaQuery.of(context).size.width;
Container(
height: width * 0.6,
width: width * 0.6,
alignment: Alignment.center,
child: Row(
children: [
Column(
children: [
GestureDetector(
onTap: () {
Methods.navigationToDetailsPage(context, 'Category');
},
child: Container(
height: width * 0.6 * 0.5,
width: width * 0.6 * 0.5,
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(width * 0.06, width * 0.06, 2, 2),
child: Image.asset(
'assets/images/category.png',
),
),
),
GestureDetector(
onTap: () {
Methods.navigationToDetailsPage(context, 'Segment');
},
child: Container(
height: width * 0.6 * 0.5,
width: width * 0.6 * 0.5,
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(width * 0.06, 2, 2, width * 0.06),
child: Image.asset(
'assets/images/segment.png',
),
),
),
],
),
Column(
children: [
GestureDetector(
onTap: () {
Methods.navigationToDetailsPage(context, 'Division');
},
child: Container(
height: width * 0.6 * 0.5,
width: width * 0.6 * 0.5,
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(2, width * 0.06, width * 0.06, 2),
child: Image.asset(
'assets/images/division.png',
),
),
),
GestureDetector(
onTap: () {
Methods.navigationToDetailsPage(context, 'Brand');
},
child: Container(
height: width * 0.6 * 0.5,
width: width * 0.6 * 0.5,
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(2, 2, width * 0.06, width * 0.06),
child: Image.asset(
'assets/images/brand.png',
),
),
),
],
),
],
),
)