Elevation not working on flutter material

Question

I want to do an app that looks like this with that slice on the corner. I can make that slide but my app doesn't have that shadow.

I have my front layer wraped inside a material wideget with elevation like in the example MDC-104.

Here is my code to make that cut

import 'package:flutter/material.dart';

class ShapeLayer extends StatelessWidget {
  final Widget frontLayer;
  final Widget backLayer = Container(
    color: Colors.green,
  );

  ShapeLayer({Key key, this.frontLayer}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        backLayer,
        Material(
          elevation: 60.0,
          shape: BeveledRectangleBorder(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(46.0)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(child: frontLayer),
            ],
          ),
        ),
      ],
    );
  }
}

I use it like this:

return Scaffold(
  appBar: appBar,
  body: ShapeLayer(frontLayer: Container(//Some stuff here)

And it looks like this:

As you can see it looks flat, with no elevation at all.

How can I fix this?

Thanks!

EDIT: as @SnakeyHips suggests, this is my app with elevation 16.0

score 9 · Accepted Answer · answered Nov 14 '18 at 15:40

9

Change your elevation from 60.0 to 16.0 should do it:

import 'package:flutter/material.dart';

class ShapeLayer extends StatelessWidget {
  final Widget frontLayer;
  final Widget backLayer = Container(
    color: Colors.green,
  );

  ShapeLayer({Key key, this.frontLayer}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        backLayer,
        Material(
          elevation: 16.0,
          shape: BeveledRectangleBorder(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(46.0)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(child: frontLayer),
            ],
          ),
        ),
      ],
    );
  }
}

answered Nov 14 '18 at 15:40

soupjake

3,293
3
17
32

I tried, it's hard to tell, but I would say that it looks pretty much the same. See my edit – Isaac Nov 14 '18 at 18:55
It's there it's just that it's hard to tell with that shade of green. If you were to change the colour to something lighter it'll be more pronounced. – soupjake Nov 15 '18 at 09:10
You're right, I see it if I put a light green background but it's something super subtle. Do you know of any way of making the shadow stronger? – Isaac Nov 15 '18 at 11:40
The amount of elevation determines how "strong" the shadow and is determined by Material Design guidelines so if any elevation value isn't getting the strength that you want then I'm not sure what else to suggest. The idea of elevation is to be a subtle shadow as shown in the Shrine app and anything darker than that would be against Material Design. As I said, a light colour choice for the back layer would be my recommendation. – soupjake Nov 15 '18 at 13:12

Elevation not working on flutter material

1 Answers1