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 ca

Answer 1

Here is running example with overlay:

class _MyHomePageState extends State {
     double _width = 0.0;
     double _height = 0.0;

     @override
     Widget build(BuildContext context) {
      _width = MediaQuery.of(context).size.width;
      _height = MediaQuery.of(context).size.height;
      return Scaffold(
       backgroundColor: Colors.white,
       body: Stack(
        children: [
          // The containers in the background and scrollable
         getScrollableBody(),

         // This container will work as Overlay
         getOverlayWidget()
        ],
      ),
   );
 }

 Widget getOverlayWidget() {
   return new Container(
     alignment: Alignment.bottomCenter,
     child: new Container(
      height: 100.0,
      width: _width,
      color: Colors.cyan.withOpacity(0.4),
     ),
   );
 }
 Widget getScrollableBody() {
  return SingleChildScrollView(
    child: new Column(
      children: [
        new Container(
         height: _height * .65,
         color: Colors.yellow,
       ),
       new Container(
         height: _height * .65,
         color: Colors.brown,
       ),
       new Container(
        margin: EdgeInsets.only(bottom: 100.0),
        height: _height * .65,
        color: Colors.orange,
       ),
     ],
   ),
  );
 }
}

Here is Result of code: Scrollable Body under customised Bottom Bar