L'élévation ne fonctionne pas sur le matériel de flottement

Question

Je souhaite créer une application qui ressemble à ceci avec cette tranche sur le coin. Je peux le faire glisser mais mon application n'a pas cette ombre.

Ma couche frontale est enveloppée dans un matériau large avec une élévation, comme dans l'exemple suivant MDC-104 .

Voici mon code pour effectuer cette coupure

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

Je l'utilise comme suit :

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

Et cela ressemble à ceci :

Comme vous pouvez le voir, il semble plat, sans aucune élévation.

Comment puis-je résoudre ce problème ?

Gracias.

EDIT : comme le suggère @SnakeyHips, voici mon application avec l'élévation 16.0

Answer 1

Changez votre altitude de 60.0 a 16.0 devrait le faire :

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