Flutter - Overlay card widget on a container

Question

In flutter, is it possible to place a part of a card on another container? In CSS, we would set margin-top to a negative value or use translate property. In flutter as we cannot set negative values to margin-top, is there an alternative to that?

Answer 1

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:

Hope this helps!

Answer 2

To do this,You Implement Positioned of the card using Stack widget in Flutter.

Stack class is useful if you want to overlap several children in a simple way,

Positioned widget that controls where a child of a Stack is positioned.

Note: Stack paints its children in order with the first child being at the bottom.

👉 So let's start without wasting time how do we do this.

Create a Stack widget and wrap it inside the Positioned widget for give it the correct position and set a widget position as you needed.

  @override   Widget build(BuildContext context) {     return new Stack(       alignment: Alignment.center,       children: <Widget>[         Positioned(           top: 0,           child: Container(             color: Colors.deepPurple,             width: MediaQuery.of(context).size.width,             height: MediaQuery.of(context).size.height * .35,           ),         ),         Positioned(           top: MediaQuery.of(context).size.height * .25,           left: 15,           right: 15,           child: Card(             elevation: 8,             color: Colors.white,             shape:                 RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),             child: Container(               width: MediaQuery.of(context).size.height * .90,               height: 220,               child: Row(                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,                 children: <Widget>[                   Column(                     mainAxisAlignment: MainAxisAlignment.center,                     children: <Widget>[                       Icon(                         Icons.scanner,                         color: Colors.deepPurple,                         size: 45,                       ),                       Text("SCAN QR")                     ],                   ),                   Container(                     height: 100,                     width: 2,                     color: Colors.deepPurple,                   ),                   Column(                     mainAxisAlignment: MainAxisAlignment.center,                    children: <Widget>[                      Icon(                        Icons.bluetooth,                        color: Colors.deepPurple,                        size: 45,                      ),                      Text("BEACON")                    ],                   )                  ],               ),             ),           ),         ),       ],     );   }