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?

For your question "is it possible?", of course yes. What have you tried? — Hemanth Raj, Mar 21 '18 at 10:40
I have tried using stack widget.. but was not able to overlay only part of a widget on another one.. — Praveen Kumar, Mar 21 '18 at 10:44

score 72 · Accepted Answer · edited Jul 14 '21 at 14:49

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!

score 6 · Answer 2 · answered Jul 13 '21 at 15:12

6

Screenshot:

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)),
            ),
          ),
        ),
      ],
    ),
  );
}

answered Jul 13 '21 at 15:12

CopsOnRoad

237,138
77
654
440

This seems like the best answer. You mean the others are not responsive where as this one is right? I'm coming from HTML, CSS, Bootstrap so I really dislike hard coding anything for layout unless that is the only option. – mLstudent33 Sep 16 '21 at 23:33
By the way, nesting stacks is okay right? Say I want a little half circle sticking out the top of the card for my user avatar like this: https://stackoverflow.com/questions/51343527/flutter-a-card-with-a-circleavatar-which-stick-out – mLstudent33 Sep 17 '21 at 00:18
1

@mLstudent33 Yes, nesting like that in Flutter isn't an issue. – CopsOnRoad Sep 22 '21 at 19:04

score 0 · Answer 3 · answered Feb 20 '20 at 13:03

Here is running example with overlay:

class _MyHomePageState extends State<MyHomePage> {
     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: <Widget>[
          // 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: <Widget>[
        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

Flutter - Overlay card widget on a container

3 Answers3

Linked