Skip to content

BeveledRectangleBorder does not work with material elevation on Web #65498

@arlucio

Description

@arlucio

BeveledRectangleBorder shadow inside a material widget does not work on Web (works perfectly on Mobile).

In the example below, BeveledRectangleBorder and RoundedRectangleBorder shadow appears normally when running on mobile emulator, but just RoundedRectangleBorder shadow appear when running on web.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Material(
                shape: BeveledRectangleBorder(
                  borderRadius: BorderRadiusDirectional.only(
                    topStart: Radius.circular(15.0),
                    bottomStart: Radius.circular(15.0),
                  ),
                ),
                elevation: 10,
                color: Theme.of(context).primaryColor,
                child: Container(
                  padding: EdgeInsets.all(20.0),
                  height: 70.0,
                  width: 70.0,
                  color: Colors.pink,
                ),
              ),
              Material(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadiusDirectional.only(
                    topStart: Radius.circular(15.0),
                    bottomStart: Radius.circular(15.0),
                  ),
                ),
                elevation: 10,
                color: Theme.of(context).primaryColor,
                child: Container(
                  padding: EdgeInsets.all(20.0),
                  height: 70.0,
                  width: 70.0,
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work liste: web_htmlHTML rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 1.21Found to occur in 1.21found in release: 1.22Found to occur in 1.22frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specifically

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions