yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-10-31 18:15:09 +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

55
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({ const _UnsplashImages({
required this.type, required this.type,
required this.photos, required this.photos,
@ -123,17 +123,24 @@ class _UnsplashImages extends StatelessWidget {
final List<Photo> photos; final List<Photo> photos;
final OnSelectUnsplashImage onSelectUnsplashImage; final OnSelectUnsplashImage onSelectUnsplashImage;
@override
State<_UnsplashImages> createState() => _UnsplashImagesState();
}
class _UnsplashImagesState extends State<_UnsplashImages> {
int _selectedPhotoIndex = -1;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final crossAxisCount = switch (type) { final crossAxisCount = switch (widget.type) {
UnsplashImageType.halfScreen => 3, UnsplashImageType.halfScreen => 3,
UnsplashImageType.fullScreen => 2, UnsplashImageType.fullScreen => 2,
}; };
final mainAxisSpacing = switch (type) { final mainAxisSpacing = switch (widget.type) {
UnsplashImageType.halfScreen => 16.0, UnsplashImageType.halfScreen => 16.0,
UnsplashImageType.fullScreen => 16.0, UnsplashImageType.fullScreen => 16.0,
}; };
final crossAxisSpacing = switch (type) { final crossAxisSpacing = switch (widget.type) {
UnsplashImageType.halfScreen => 10.0, UnsplashImageType.halfScreen => 10.0,
UnsplashImageType.fullScreen => 16.0, UnsplashImageType.fullScreen => 16.0,
}; };
@ -142,17 +149,23 @@ class _UnsplashImages extends StatelessWidget {
mainAxisSpacing: mainAxisSpacing, mainAxisSpacing: mainAxisSpacing,
crossAxisSpacing: crossAxisSpacing, crossAxisSpacing: crossAxisSpacing,
childAspectRatio: 4 / 3, childAspectRatio: 4 / 3,
children: photos children: widget.photos.asMap().entries.map((entry) {
.map( final index = entry.key;
(photo) => _UnsplashImage( final photo = entry.value;
type: type, return _UnsplashImage(
type: widget.type,
photo: photo, photo: photo,
onTap: () => onSelectUnsplashImage( onTap: () {
photo.urls.full.toString(), widget.onSelectUnsplashImage(
), photo.urls.regular.toString(),
), );
) setState(() {
.toList(), _selectedPhotoIndex = index;
});
},
isSelected: index == _selectedPhotoIndex,
);
}).toList(),
); );
} }
} }
@ -162,11 +175,13 @@ class _UnsplashImage extends StatelessWidget {
required this.type, required this.type,
required this.photo, required this.photo,
required this.onTap, required this.onTap,
required this.isSelected,
}); });
final UnsplashImageType type; final UnsplashImageType type;
final Photo photo; final Photo photo;
final VoidCallback onTap; final VoidCallback onTap;
final bool isSelected;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -177,7 +192,19 @@ class _UnsplashImage extends StatelessWidget {
return GestureDetector( return GestureDetector(
onTap: onTap, onTap: onTap,
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: child,
)
: child,
); );
} }