Skip to content

BoxDecoration with BoxShape.circle doesn't clip backgroundImage #7289

@HansMuller

Description

@HansMuller

A BoxDecoration widget with shape: BoxShape.circle doesn't clip its backgroundImage.

One consequence of this is that CircleAvatar doesn't clip its backgroundImage either. See #5306

Similarly, using CircleAvatar in UserAccountsDrawerHeader doesn't do what's expected. See #7191.

import 'package:flutter/material.dart';

class BoxDecorationBackgroundImageClipFail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Image clip should be a circle'),
      ),
      body: new Center(
        child: new Container(
          width: 100.0,
          height: 100.0,
          decoration: new BoxDecoration(
            shape: BoxShape.circle,
            backgroundColor: Theme.of(context).primaryColor,
            backgroundImage: new BackgroundImage(
              image: new AssetImage('assets/cat.jpg'),
            ),
          ),
        ),
      ),

    );
  }
}

void main() {
  runApp(new MaterialApp(home: new BoxDecorationBackgroundImageClipFail()));
}

Metadata

Metadata

Assignees

Labels

f: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions