Skip to content

Flutter Web: Image in Container makes shadow different. #55933

@atfa

Description

@atfa

Steps to Reproduce

  1. Enter code below and put a 200x200 logo.jpg file into assets folder.
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _showPic = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(widget.title)),
        body: Padding(
            padding: EdgeInsets.fromLTRB(0, 50, 0, 0),
            child: Center(
                child: Column(children: [
              Container(
                width: 300,
                height: 300,
                decoration: BoxDecoration(
                    boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 26.0)],
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.all(Radius.circular(20.0)),
                    color: Colors.white),
                child: _showPic % 2 == 0 ? Icon(Icons.event) : Image.asset("logo.jpg")
              ),
              Padding(
                  padding: EdgeInsets.fromLTRB(0, 50, 0, 0),
                  child: RaisedButton(
                      child: Text("Switch"), onPressed: () => setState(() => _showPic++)))
            ]))) // This trailing comma makes auto-formatting nicer for build methods.
        );
  }
}
  1. Run flutter build web.
  2. Server web using any http server

Expected results:
The shadow effect on both Android+Chrome and iOS+Safari should be the same.

Actual results:
If there is a Image in the Container, the shadow looks different on both Android+Chrome and iOS+Safari.

Below is the web app under Android+Chrome. There is a Icon in the Container.
android-chrome-icon

Below is the web app under Android+Chrome. There is a Image in the Container. The shadow seems lighter and thiner.
android-chrome-img

Below is the web app under iOS+Safari. There is a Icon in the Container.
Simulator-iPhoneX-icon

Below is the web app under iOS+Safari. There is a Image in the Container. The shadow disappeared.
Simulator-iPhoneX-img

flutter doctor -v

$ flutter doctor -v
[✓] Flutter (Channel dev, v1.18.0-8.0.pre, on Mac OS X 10.13.6 17G2208, locale en-CN)
    • Flutter version 1.18.0-8.0.pre at /Users/atfa/flutter
    • Framework revision e0c63cd35e (5 days ago), 2020-04-23 22:29:01 -0400
    • Engine revision d2ec21221e
    • Dart version 2.9.0 (build 2.9.0-3.0.dev b0d35855d8)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/atfa/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit visit
      https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions.

[!] Xcode - develop for iOS and macOS (Xcode 9.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.3, Build version 9E145
    ✗ Flutter requires a minimum Xcode version of 11.0.0.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.9.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code (version 1.44.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.9.1

[!] Proxy Configuration
    • HTTP_PROXY is set
    ! NO_PROXY is not set

[✓] Connected device (3 available)
    • macOS      • macOS      • darwin-x64     • Mac OS X 10.13.6 17G2208
    • Web Server • web-server • web-javascript • Flutter Tools
    • Chrome     • chrome     • web-javascript • Google Chrome 81.0.4044.122

! Doctor found issues in 3 categories.

Metadata

Metadata

Assignees

Labels

found in release: 1.17Found to occur in 1.17found in release: 1.18Occurs in 1.18frameworkflutter/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

Relationships

None yet

Development

No branches or pull requests

Issue actions