Высота не работает на материале флаттера - PullRequest
Новая
       35

Высота не работает на материале флаттера

0 голосов
/ 14 ноября 2018

Я хочу сделать приложение, которое выглядит следующим образом 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

1 Ответ

0 голосов
/ 14 ноября 2018

Измените высоту с 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),
            ],
          ),
        ),
      ],
    );
  }
}
...