почему я не могу обрезать квадратное изображение png внутри родительского виджета BoxDecoration? Что я сделал не так?
Вот мой код:
final appLogo = Hero(
tag: 'hero',
child: Container(
width: 200.0,
height: 200.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 1.5),
image: DecorationImage(
image: AssetImage('images/logo.png'),
fit: BoxFit.fill,
)),
),
);
.....
return Scaffold(
backgroundColor: Colors.brown.shade100,
body: Center(
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.only(left: 24.0, right: 24.0),
children: <Widget>[
appLogo,
SizedBox(
height: 48,
),
emailField,
SizedBox(
height: 8.0,
),
passwordField,
SizedBox(
height: 24.0,
),
loginButton,
forgotPButton,
],
),
),
);
}
}
На флаттер-гитхабе есть проблема по этой проблеме здесь Добавьте Container.clipBehavior для закрепления украшения #14421.
На данный момент вы можете использовать КругАватар для достижения желаемого.
Я пробовал CircleAvatar раньше, и по какой-то причине он также не обрезал квадратное изображение. Вот почему вместо этого я использовал BoxDecoratin...
Итак, наконец, я понял, почему изображение не может быть обрезано. Кажется, что заполнение ListView фактически растянуло изображение за пределы виджета-контейнера. Мне удалось обрезать изображение, обернув appLogo виджетом Center под макетом ListView.. это очень странно и неприятно.
Просто узнайте это, я сам. Это... глупо. Кажется, я понимаю, почему это происходит, но это глупо. И смехотворно неинтуитивным. :(
Попробуйте использовать КлипОвал?