web-dev-qa-db-fra.com

L'élévation ne fonctionne pas sur le matériau flottant

Je veux faire une application qui ressemble à ceci Shrine App avec cette tranche dans le coin. Je peux faire cette diapositive mais mon application n'a pas cette ombre.

J'ai ma couche avant enveloppée à l'intérieur d'un objet matériel avec élévation comme dans l'exemple MDC-104 .

Voici mon code pour faire cette coupe

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 ceci:

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

Et cela ressemble à ceci: My App

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

Comment puis-je réparer cela?

Merci!

EDIT: comme @SnakeyHips le suggère, voici mon application avec une élévation de 16,0

elevation 16.0

dartfluttermaterial-designflutter-layoutscaffold
4
Isaac

Changez votre altitude de 60.0 à 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),
            ],
          ),
        ),
      ],
    );
  }
}
5
SnakeyHips