web-dev-qa-db-ja.com

高度がフラッターマテリアルで機能しない

次のようなアプリを作りたい Shrine App スライスが隅にあります。スライドを作成できますが、私のアプリにはその影がありません。

MDC-104 のように、前面レイヤーを標高のあるマテリアルワイドジェット内にラップしました。

これがそのカットをするための私のコードです

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

私はそれを次のように使用します：

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

そしてそれは次のようになります： My App

ご覧のとおり、高さはなく、平坦に見えます。

どうすれば修正できますか？

ありがとう！

編集：@SnakeyHipsが示唆するように、これは標高16.0の私のアプリです

elevation 16.0

dartfluttermaterial-designflutter-layoutscaffold
4
Isaac

標高を60.0から16.0に変更してください：

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