I have a list of card widgets inside a row or listview. When clicking on of these cards i want to create an effect where the card grows and moves to the middle of the screen, and the rest of the screen appears below a grey overlay. These example images should help you understand what i'm trying to explain.

Image #1 - List before Clicking in any card

enter image description here

Image #2 - After clicking a card. The card animates in size and position to the center of the screen. Everything else gets becomes dark. (Ignore bad Photoshop).

enter image description here

I'm not asking for full code or anything, just want to know if it's possible to move a widget outside it's parent and get some ideas of how to achieve this effect. I know AnimatedContainer can be used on the card to make it grow, the positioning part is what need help with. Thanks!


Solution 1: Daniel Eberl

You can use the transform: argument on a Container()

Full Working Example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.black87,
          margin: EdgeInsets.only(top: 100),
          child: Row(
            children: <Widget>[
              Container(
                margin: EdgeInsets.symmetric(horizontal: 16),
                transform: Matrix4.translationValues(0, 50, 0),
                color: Colors.red,
                height: 100,
                width: 100,
              ),
              Container(

                margin: EdgeInsets.symmetric(horizontal: 16),
                color: Colors.red,
                height: 100,
                width: 100,
              ),
              Container(

                margin: EdgeInsets.symmetric(horizontal: 16),
                color: Colors.red,
                height: 100,
                width: 100,
              ),
            ],
          ),
        )
      )
    );
  }
}

The #2 Animation can be accomplished by using a Hero() Widget and Overlay(). Or you can use a custom DialogBuilder just a few Suggestions to get you started.