Flutter - Overlay card widget on a container

Yes, you can acheive it with a Stack widget. You can stack a card over the background and provide a top or bottom padding.

A simple example would look like:

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Stack(
      children: <Widget>[
        // The containers in the background
        new Column(
          children: <Widget>[
            new Container(
              height: MediaQuery.of(context).size.height * .65,
              color: Colors.blue,
            ),
            new Container(
              height: MediaQuery.of(context).size.height * .35,
              color: Colors.white,
            )
          ],
        ),
        // The card widget with top padding, 
        // incase if you wanted bottom padding to work, 
        // set the `alignment` of container to Alignment.bottomCenter
        new Container(
          alignment: Alignment.topCenter,
          padding: new EdgeInsets.only(
              top: MediaQuery.of(context).size.height * .58,
              right: 20.0,
              left: 20.0),
          child: new Container(
            height: 200.0,
            width: MediaQuery.of(context).size.width,
            child: new Card(
              color: Colors.white,
              elevation: 4.0,
            ),
          ),
        )
      ],
    );
  }
}

The output of the above code would look something like:

enter image description here

Hope this helps!


Screenshot:

enter image description here

Instead of hardcoding Positioned or Container, you should use Align.

Code:

@override
Widget build(BuildContext context) {
  final size = MediaQuery.of(context).size;
  return Scaffold(
    body: Stack(
      children: [
        Column(
          children: [
            Expanded(flex: 2, child: Container(color: Colors.indigo)),
            Expanded(child: Container(color: Colors.white)),
          ],
        ),
        Align(
          alignment: Alignment(0, 0.5),
          child: Container(
            width: size.width * 0.9,
            height: size.height * 0.4,
            child: Card(
              elevation: 12,
              child: Center(child: Text('CARD', style: Theme.of(context).textTheme.headline2)),
            ),
          ),
        ),
      ],
    ),
  );
}