У меня есть список контейнерных виджетов в строке, и у каждого из них есть маленький крестик, который позволяет пользователю удалить этот объект из списка. Прямо сейчас нет анимации, и это немного раздражает в пользовательском интерфейсе - кто-нибудь может сказать мне, как более аккуратно анимировать объект из списка и хорошо совместить другие объекты?
my минимальный воспроизводимый код выглядит следующим образом:
var _images = List<Asset>();
...
Widget _buildImagesGrid() {
return Container(
color: Colors.black12,
padding: const EdgeInsets.all(4.0),
child: GridView.count(
crossAxisCount:
isNotEmpty(_fileUploads) || isKeyboardOpen(context) ? 6 : 3,
children: List.generate(_images.length, (index) {
return Container(
padding: const EdgeInsets.all(1.0),
child: Stack(children: [
AssetThumb(
asset: _images[index],
width: 300,
height: 300,
),
Positioned(
right: 0.0,
top: -8.0,
child: RawMaterialButton(
onPressed: () {
setState(() {
_images.removeAt(index);
});
},
child: new Icon(
Icons.close,
color: Colors.black,
size: 20.0,
),
shape: new CircleBorder(),
elevation: 0.0,
constraints: BoxConstraints.tight(Size(24, 24)),
fillColor: Colors.grey[300],
padding: const EdgeInsets.all(0.0),
),
),
]));
}),
),
);
}
![If I deleted the middle one, I would want it to animate out of the screen and for the right-most object to slide over to the left](https://i.stack.imgur.com/6QJbn.jpg)