Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add border to selected unsplash image (#5428)

Browse Source 
* feat: add border to selected unsplash image

* feat: add border to selected unsplash image

---------

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>
This commit is contained in:
Alain 2024-05-30 10:27:13 +08:00 committed by GitHub
parent ace729eb78
commit e40e1e9a8a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart
View File

@ -112,7 +112,7 @@ class _UnsplashImageWidgetState extends State<UnsplashImageWidget> {
}
}
class _UnsplashImages extends StatelessWidget {
class _UnsplashImages extends StatefulWidget {
const _UnsplashImages({
required this.type,
required this.photos,
@ -123,17 +123,24 @@ class _UnsplashImages extends StatelessWidget {
final List<Photo> photos;
final OnSelectUnsplashImage onSelectUnsplashImage;
@override
State<_UnsplashImages> createState() => _UnsplashImagesState();
}
class _UnsplashImagesState extends State<_UnsplashImages> {
int _selectedPhotoIndex = -1;
@override
Widget build(BuildContext context) {
final crossAxisCount = switch (type) {
final crossAxisCount = switch (widget.type) {
UnsplashImageType.halfScreen => 3,
UnsplashImageType.fullScreen => 2,
};
final mainAxisSpacing = switch (type) {
final mainAxisSpacing = switch (widget.type) {
UnsplashImageType.halfScreen => 16.0,
UnsplashImageType.fullScreen => 16.0,
};
final crossAxisSpacing = switch (type) {
final crossAxisSpacing = switch (widget.type) {
UnsplashImageType.halfScreen => 10.0,
UnsplashImageType.fullScreen => 16.0,
};
@ -142,17 +149,23 @@ class _UnsplashImages extends StatelessWidget {
mainAxisSpacing: mainAxisSpacing,
crossAxisSpacing: crossAxisSpacing,
childAspectRatio: 4 / 3,
children: photos
.map(
(photo) => _UnsplashImage(
type: type,
photo: photo,
onTap: () => onSelectUnsplashImage(
photo.urls.full.toString(),
),
),
)
.toList(),
children: widget.photos.asMap().entries.map((entry) {
final index = entry.key;
final photo = entry.value;
return _UnsplashImage(
type: widget.type,
photo: photo,
onTap: () {
widget.onSelectUnsplashImage(
photo.urls.regular.toString(),
);
setState(() {
_selectedPhotoIndex = index;
});
},
isSelected: index == _selectedPhotoIndex,
);
}).toList(),
);
}
}
@ -162,11 +175,13 @@ class _UnsplashImage extends StatelessWidget {
required this.type,
required this.photo,
required this.onTap,
required this.isSelected,
});
final UnsplashImageType type;
final Photo photo;
final VoidCallback onTap;
final bool isSelected;
@override
Widget build(BuildContext context) {
@ -177,7 +192,19 @@ class _UnsplashImage extends StatelessWidget {
return GestureDetector(
onTap: onTap,
child: child,
child: isSelected
? Container(
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: const BorderSide(width: 1.50, color: Color(0xFF00BCF0)),
borderRadius: BorderRadius.circular(8.0),
),
),
padding: const EdgeInsets.all(2.0),
child: child,
)
: child,
);
}