Flutter showing odd borders that don't actually exist.

[usern3]

Steps to Reproduce

I'm not sure how to reproduce since my app is pretty large. But, this is a pretty simple page. I've attached the bit of code that has anything to do with the affected part.

Expected results:
The menu to display normally

Actual results:
The menu items are surrounded by borders when at the top of the screen. But, if I scroll down they disappear. I originally though it was just an emulator problem. But I built an APK and see this on my actual phone as well.

I am getting these odd borders around my containers. I have a Column made up of ProfileMenuItem's. There is nothing about any borders in this code. I have a divider I've made to split sections of the menu, but that's showing up correctly. Below is a bit of code and the screenshot. Then my user_profile screen calls this ProfileMenu class to render it.

code sample

        return Container(
          color: Colors.white,
          child: Center(
            child: Column(
              children: [
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/svg/user_profile/saved_tips_icon.svg',
                    title: 'Saved tips',
                    onTap: () {
                      // something
                    }),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/svg/user_profile/skin_concerns_icon.svg',
                    title: 'Skin concerns',
                    onTap: () {
                      // something
                    }),
                profileDivider(),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/svg/user_profile/about_icon.svg',
                    title: 'About skica',
                    onTap: () {
                      _launchWebsiteAbout();
                    }),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/svg/user_profile/feedback_icon.svg',
                    title: 'Feedback',
                    onTap: () {
                      _launchWebsiteContact();
                    }),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/svg/user_profile/rate_us_icon.svg',
                    title: 'Rate us',
                    onTap: () {
                      // something
                    }),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/svg/user_profile/facebook_follow_icon.svg',
                    title: 'Follow us on Facebook',
                    onTap: () {
                      _launchFacebook();
                    }),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/svg/user_profile/rate_us_icon.svg',
                    title: 'Invite a friend',
                    onTap: () {
                      // something
                    }),
                profileDivider(),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/svg/user_profile/logout_icon.svg',
                    title: 'Logout',
                    onTap: () {
                      _confirmLogout();
                    }),
              ],
            ),
          ),
        );
      }
    
      Widget profileDivider({double verticalPadding = 10}) {
        return Container(
          padding: EdgeInsets.only(top: verticalPadding, bottom: verticalPadding),
          child: SvgPicture.asset('assets/svg/user_profile/divider.svg'),
        );
      }
    
      Widget profileMenuItem(
          {@required BuildContext context,
          @required String svgAsset,
          @required String title,
          @required Function onTap}) {
        return Material(
          child: InkWell(
            // When the user taps the button, show a snackbar.
            onTap: onTap,
            splashColor: Colors.orange,
            child: Ink(
              width: MediaQuery.of(context).size.width * 1,
              color: Colors.white,
              child: Row(
                children: [
                  Container(
                    child: SvgPicture.asset(svgAsset, height: 60),
                  
                  ),
                  Container(
                    color: Colors.transparent,
                    margin: EdgeInsets.only(left: 20),
                    child:
                        Text(title, style: Theme.of(context).textTheme.bodyText1),
                  ),
                  Expanded(
                    child: Container(
                      alignment: Alignment.centerRight,
                      child:
                          SvgPicture.asset('assets/svg/next_icon.svg', height: 34),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }

And here it is if I scroll to the bottom. They magically disappear.

Logs

   info • Unused import: '../../theme/skica_icons.dart' • lib/app/pages/advanced_routine.dart:5:8 •
          unused_import
   info • Unused import: '../../theme/skica_icons.dart' • lib/app/pages/basic_routine.dart:5:8 •
          unused_import
   info • Unused import: 'package:flutter_svg/flutter_svg.dart' •
          lib/app/widgets/routine_chip_widget.dart:2:8 • unused_import
   info • This class (or a class that this class inherits from) is marked as '@immutable', but one or
          more of its instance fields aren't final: RoutineChipWidget.selected •
          lib/app/widgets/routine_chip_widget.dart:7:7 • must_be_immutable
   info • The declaration '_addRemoveButton' isn't referenced •
          lib/app/widgets/routine_chip_widget.dart:34:10 • unused_element
   info • The value of the field '_themeType' isn't used • lib/models/theme_model.dart:10:13 •
          unused_field
   info • 'await' applied to 'void', which is not a 'Future' • lib/providers/auth_provider.dart:30:7 •
          await_only_futures
   info • 'await' applied to 'void', which is not a 'Future' • lib/providers/auth_provider.dart:51:7 •
          await_only_futures

[✓] Flutter (Channel stable, 2.0.4, on macOS 11.2.3 20D91 darwin-arm, locale en-US)
    • Flutter version 2.0.4 at /Users/nolan/.flutter/flutter
    • Framework revision b1395592de (11 days ago), 2021-04-01 14:25:01 -0700
    • Engine revision 2dce47073a
    • Dart version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/nolan/Library/Android/sdk
    • Platform android-30, build-tools 30.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_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (2 available)
    • iPhone 12 Pro Max (mobile) • 89BF1B69-DABD-4CB2-964A-DB3A4EFEEE02 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)
    • Chrome (web)               • chrome                               • web-javascript • Google
      Chrome 89.0.4389.114

• No issues found!

[TahaTesser]

Hi @nolyoi
Thanks for filing the issue, to reproduce I've created a minimal runnable code sample for your code with svg. However when running the code sample. the issue doesn't reproduce

Please try the code sample (feel free edit and provide the updated code sample that reproduces the issue)

code sample

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Container(
        color: Colors.white,
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                FlutterLogo(
                  size: 400,
                ),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/flutter.svg',
                    title: 'Saved tips',
                    onTap: () {
                      // something
                    }),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/flutter.svg',
                    title: 'Skin concerns',
                    onTap: () {
                      // something
                    }),
                profileDivider(),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/flutter.svg',
                    title: 'About skica',
                    onTap: () {}),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/flutter.svg',
                    title: 'Feedback',
                    onTap: () {}),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/flutter.svg',
                    title: 'Rate us',
                    onTap: () {
                      // something
                    }),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/flutter.svg',
                    title: 'Follow us on Facebook',
                    onTap: () {}),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/flutter.svg',
                    title: 'Invite a friend',
                    onTap: () {
                      // something
                    }),
                profileDivider(),
                profileMenuItem(
                    context: context,
                    svgAsset: 'assets/flutter.svg',
                    title: 'Logout',
                    onTap: () {}),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget profileDivider({double verticalPadding = 10}) {
    return Container(
      color: Colors.grey,
      height: 1,
      margin: EdgeInsets.only(top: verticalPadding, bottom: verticalPadding),
    );
  }

  Widget profileMenuItem(
      {@required BuildContext context,
      @required String svgAsset,
      @required String title,
      @required Function onTap}) {
    return Material(
      child: InkWell(
        // When the user taps the button, show a snackbar.
        onTap: onTap,
        splashColor: Colors.orange,
        child: Ink(
          width: MediaQuery.of(context).size.width * 1,
          color: Colors.white,
          child: Row(
            children: [
              Container(
                child: SvgPicture.asset(svgAsset, height: 60),
              ),
              Container(
                color: Colors.transparent,
                margin: EdgeInsets.only(left: 20),
                child:
                    Text(title, style: Theme.of(context).textTheme.bodyText1),
              ),
              Expanded(
                child: Container(
                  alignment: Alignment.centerRight,
                  child: SvgPicture.asset('assets/next.svg', height: 34),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Preview

Screenshot 1	Screnshot 2

Assets

assets.zip

pubspec.yaml

name: stable_flutter
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_svg: ^0.21.0+1

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/
  #   - images/a_dot_ham.jpeg
  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.
  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages
  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.4, on macOS 11.2.3 20D91 darwin-x64, locale
    en-GB)
    • Flutter version 2.0.4 at /Users/tahatesser/Code/flutter_stable
    • Framework revision b1395592de (11 days ago), 2021-04-01 14:25:01 -0700
    • Engine revision 2dce47073a
    • Dart version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (3 available)
    • iPhone 12 (mobile) • 83060656-28E7-44CD-801E-B11EC3EC89BA • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)
    • macOS (desktop)    • macos                                • darwin-x64
      • macOS 11.2.3 20D91 darwin-x64
    • Chrome (web)       • chrome                               • web-javascript
      • Google Chrome 89.0.4389.114

• No issues found!

[usern3]

Hi @nolyoi
Thanks for filing the issue, to reproduce I've created a minimal runnable code sample for your code with svg. However when running the code sample. the issue doesn't reproduce

Please try the code sample (feel free edit and provide the updated code sample that reproduces the issue)

code sample

Preview

Screenshot 1 Screnshot 2

Assets

assets.zip

pubspec.yaml
flutter doctor -v

I have the repo here that can be cloned. https://github.com/nolyoi/skica_app

The files where this is occuring is lib/app/widgets/user_profile_menu.dart and lib/app/pages/user_profile.dart. It's really bizarre because this just happened recently and I didn't even make any changes to those files. It displayed normally before I upgraded Flutter.

[usern3]

So, I just rebuilt the app and for some reason it's not showing these lines on the emulator or my physical phone anymore. Didn't change any code. Very odd. Could something in the build process have gone wrong or something? This can be closed now.

[HansMuller]

This looks a bit like a known problem with antialiasing and mapping from logical pixels to device pixels. There's an open issue for a documentation fix: #14288

More info about the problem can be found here:
#14288 (comment)
#17084 (comment)
#15035 (comment)

[usern3]

This looks a bit like a known problem with antialiasing and mapping from logical pixels to device pixels. There's an open issue for a documentation fix: #14288

More info about the problem can be found here:
#14288 (comment)
#17084 (comment)
#15035 (comment)

Sounds about right. Found out with mine it was on the dark theme only where the Material widget was given a default gray/black background. Thats what was bleeding through. So the simple solution to that was just setting it's color to white.

[TahaTesser]

@nolyoi
#80330 (comment), that definitely sounds like antialiasing, not the widgets themselves.
Closing as duplicate of #14288

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.