add hover border to image tiles

This commit is contained in:
lukas-heiligenbrunner 2022-10-07 17:32:39 +02:00
parent d2fa3022d7
commit cc5c3bb2a6
2 changed files with 64 additions and 41 deletions

View File

@ -113,8 +113,10 @@ class _SSHImageProvider extends ImageProvider<_SSHImageProvider> {
} else { } else {
final file = await sftpClient.open(uri.toFilePath()); final file = await sftpClient.open(uri.toFilePath());
bytes = await file.readBytes(); bytes = await file.readBytes();
() async {
await tmpPic.create(recursive: true); await tmpPic.create(recursive: true);
await tmpPic.writeAsBytes(bytes); await tmpPic.writeAsBytes(bytes);
}();
} }
if (bytes.lengthInBytes == 0) { if (bytes.lengthInBytes == 0) {

View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:gallery/data_provider/data_provider.dart'; import 'package:gallery/data_provider/data_provider.dart';
import 'package:gallery/hover_detector.dart';
import 'package:gallery/utils/tile_size.dart'; import 'package:gallery/utils/tile_size.dart';
class ImageTile extends StatelessWidget { class ImageTile extends StatelessWidget {
@ -20,22 +21,54 @@ class ImageTile extends StatelessWidget {
child: Container( child: Container(
padding: const EdgeInsets.all(3), padding: const EdgeInsets.all(3),
child: imageUri == null child: imageUri == null
? Container( ? HoverDetector(
defaultChild: _renderIcon(false),
hoverChild: _renderIcon(true))
: HoverDetector(
defaultChild: _renderImage(false),
hoverChild: _renderImage(true)),
));
}
Widget _renderIcon(bool border) {
return Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.all( border: border
Radius.circular(calcTileMaxWidth() / 30)), ? Border.all(color: const Color(0x7f444444), width: 3)
: null,
borderRadius:
BorderRadius.all(Radius.circular(calcTileMaxWidth() / 30)),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.black12, color: Colors.black12,
spreadRadius: calcTileMaxWidth() / 150, spreadRadius: calcTileMaxWidth() / 150,
blurRadius: calcTileMaxWidth() / 60), blurRadius: calcTileMaxWidth() / 60),
]), ]),
child: child) child: child);
: Container( }
Widget _renderImage(bool border) {
final image = Image(
fit: BoxFit.cover,
filterQuality: FilterQuality.high,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
return frame == null
? const Center(
child: CircularProgressIndicator(),
)
: child;
},
image: dtaProvider!.getImageProvider(imageUri!),
);
return Container(
decoration: BoxDecoration( decoration: BoxDecoration(
border: border
? Border.all(color: const Color(0x7f444444), width: 3)
: null,
borderRadius: BorderRadius.all( borderRadius: BorderRadius.all(
Radius.circular(calcTileMaxWidth() / 30)), Radius.circular(calcTileMaxWidth() / (border ? 25 : 30))),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.black12, color: Colors.black12,
@ -46,19 +79,7 @@ class ImageTile extends StatelessWidget {
borderRadius: BorderRadius.all( borderRadius: BorderRadius.all(
Radius.circular(calcTileMaxWidth() / 30), Radius.circular(calcTileMaxWidth() / 30),
), ),
child: Image( child: image,
fit: BoxFit.cover,
frameBuilder:
(context, child, frame, wasSynchronouslyLoaded) {
return frame == null
? const Center(
child: CircularProgressIndicator(),
)
: child;
},
image: dtaProvider!.getImageProvider(imageUri!),
)),
),
)); ));
} }
} }