Elevation not working on flutter material
17,179
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),
],
),
),
],
);
}
}
Author by
Isaac
Updated on June 15, 2022Comments
-
Isaac almost 2 years
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)
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
-
Isaac over 5 yearsI tried, it's hard to tell, but I would say that it looks pretty much the same. See my edit
-
soupjake over 5 yearsIt'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.
-
Isaac over 5 yearsYou'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?
-
soupjake over 5 yearsThe 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.