improved thumbnail widget structure
This commit is contained in:
parent
abf7481af5
commit
b488adacf6
1 changed files with 80 additions and 79 deletions
|
@ -7,7 +7,7 @@ import 'package:aves/widgets/common/icons.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:transparent_image/transparent_image.dart';
|
import 'package:transparent_image/transparent_image.dart';
|
||||||
|
|
||||||
class Thumbnail extends StatefulWidget {
|
class Thumbnail extends StatelessWidget {
|
||||||
final ImageEntry entry;
|
final ImageEntry entry;
|
||||||
final double extent;
|
final double extent;
|
||||||
final double devicePixelRatio;
|
final double devicePixelRatio;
|
||||||
|
@ -20,10 +20,71 @@ class Thumbnail extends StatefulWidget {
|
||||||
}) : super(key: key);
|
}) : super(key: key);
|
||||||
|
|
||||||
@override
|
@override
|
||||||
ThumbnailState createState() => ThumbnailState();
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: Border.all(
|
||||||
|
color: Colors.grey.shade700,
|
||||||
|
width: 0.5,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Stack(
|
||||||
|
alignment: AlignmentDirectional.bottomStart,
|
||||||
|
children: [
|
||||||
|
ThumbnailImage(
|
||||||
|
entry: entry,
|
||||||
|
extent: extent,
|
||||||
|
devicePixelRatio: devicePixelRatio,
|
||||||
|
),
|
||||||
|
_buildOverlayIcons(),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildOverlayIcons() {
|
||||||
|
final fontSize = min(14.0, (extent / 8).roundToDouble());
|
||||||
|
final iconSize = fontSize * 2;
|
||||||
|
return DefaultTextStyle(
|
||||||
|
style: TextStyle(
|
||||||
|
color: Colors.grey[200],
|
||||||
|
fontSize: fontSize,
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.end,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
if (entry.hasGps) GpsIcon(iconSize: iconSize),
|
||||||
|
if (entry.isGif)
|
||||||
|
GifIcon(iconSize: iconSize)
|
||||||
|
else if (entry.isVideo)
|
||||||
|
VideoIcon(
|
||||||
|
entry: entry,
|
||||||
|
iconSize: iconSize,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class ThumbnailState extends State<Thumbnail> {
|
class ThumbnailImage extends StatefulWidget {
|
||||||
|
final ImageEntry entry;
|
||||||
|
final double extent;
|
||||||
|
final double devicePixelRatio;
|
||||||
|
|
||||||
|
const ThumbnailImage({
|
||||||
|
Key key,
|
||||||
|
@required this.entry,
|
||||||
|
@required this.extent,
|
||||||
|
@required this.devicePixelRatio,
|
||||||
|
}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<StatefulWidget> createState() => ThumbnailImageState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class ThumbnailImageState extends State<ThumbnailImage> {
|
||||||
Future<Uint8List> _byteLoader;
|
Future<Uint8List> _byteLoader;
|
||||||
Listenable _entryChangeNotifier;
|
Listenable _entryChangeNotifier;
|
||||||
|
|
||||||
|
@ -40,7 +101,7 @@ class ThumbnailState extends State<Thumbnail> {
|
||||||
}
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void didUpdateWidget(Thumbnail oldWidget) {
|
void didUpdateWidget(ThumbnailImage oldWidget) {
|
||||||
super.didUpdateWidget(oldWidget);
|
super.didUpdateWidget(oldWidget);
|
||||||
if (widget.extent == oldWidget.extent && uri == oldWidget.entry.uri && widget.entry.width == oldWidget.entry.width && widget.entry.height == oldWidget.entry.height && widget.entry.orientationDegrees == oldWidget.entry.orientationDegrees) return;
|
if (widget.extent == oldWidget.extent && uri == oldWidget.entry.uri && widget.entry.width == oldWidget.entry.width && widget.entry.height == oldWidget.entry.height && widget.entry.orientationDegrees == oldWidget.entry.orientationDegrees) return;
|
||||||
initByteLoader();
|
initByteLoader();
|
||||||
|
@ -61,84 +122,24 @@ class ThumbnailState extends State<Thumbnail> {
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final fontSize = min(14.0, (widget.extent / 8).roundToDouble());
|
return FutureBuilder(
|
||||||
final iconSize = fontSize * 2;
|
|
||||||
return DefaultTextStyle(
|
|
||||||
style: TextStyle(
|
|
||||||
color: Colors.grey[200],
|
|
||||||
fontSize: fontSize,
|
|
||||||
),
|
|
||||||
child: Container(
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
border: Border.all(
|
|
||||||
color: Colors.grey.shade700,
|
|
||||||
width: 0.5,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: FutureBuilder(
|
|
||||||
future: _byteLoader,
|
future: _byteLoader,
|
||||||
builder: (futureContext, AsyncSnapshot<Uint8List> snapshot) {
|
builder: (futureContext, AsyncSnapshot<Uint8List> snapshot) {
|
||||||
final bytes = (snapshot.connectionState == ConnectionState.done && !snapshot.hasError) ? snapshot.data : kTransparentImage;
|
final bytes = (snapshot.connectionState == ConnectionState.done && !snapshot.hasError) ? snapshot.data : kTransparentImage;
|
||||||
return ThumbnailImage(entry: entry, bytes: bytes, iconSize: iconSize);
|
return bytes.length > 0
|
||||||
}),
|
? Hero(
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class ThumbnailImage extends StatelessWidget {
|
|
||||||
final Uint8List bytes;
|
|
||||||
final ImageEntry entry;
|
|
||||||
final double iconSize;
|
|
||||||
|
|
||||||
const ThumbnailImage({
|
|
||||||
Key key,
|
|
||||||
@required this.bytes,
|
|
||||||
@required this.entry,
|
|
||||||
@required this.iconSize,
|
|
||||||
}) : super(key: key);
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return Stack(
|
|
||||||
alignment: AlignmentDirectional.bottomStart,
|
|
||||||
children: [
|
|
||||||
Hero(
|
|
||||||
tag: entry.uri,
|
tag: entry.uri,
|
||||||
child: LayoutBuilder(builder: (context, constraints) {
|
child: LayoutBuilder(builder: (context, constraints) {
|
||||||
// during hero animation back from a fullscreen image,
|
|
||||||
// the image covers the whole screen (because of the 'fit' prop and the full screen hero constraints)
|
|
||||||
// so we wrap the image to apply better constraints
|
|
||||||
final dim = min(constraints.maxWidth, constraints.maxHeight);
|
final dim = min(constraints.maxWidth, constraints.maxHeight);
|
||||||
return Container(
|
return Image.memory(
|
||||||
alignment: Alignment.center,
|
|
||||||
constraints: BoxConstraints.tight(Size(dim, dim)),
|
|
||||||
child: bytes.length > 0
|
|
||||||
? Image.memory(
|
|
||||||
bytes,
|
bytes,
|
||||||
width: dim,
|
width: dim,
|
||||||
height: dim,
|
height: dim,
|
||||||
fit: BoxFit.cover,
|
fit: BoxFit.cover,
|
||||||
)
|
|
||||||
: Icon(Icons.error),
|
|
||||||
);
|
);
|
||||||
}),
|
}),
|
||||||
),
|
)
|
||||||
Column(
|
: Icon(Icons.error);
|
||||||
mainAxisAlignment: MainAxisAlignment.end,
|
});
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
if (entry.hasGps) GpsIcon(iconSize: iconSize),
|
|
||||||
if (entry.isGif)
|
|
||||||
GifIcon(iconSize: iconSize)
|
|
||||||
else if (entry.isVideo)
|
|
||||||
VideoIcon(
|
|
||||||
entry: entry,
|
|
||||||
iconSize: iconSize,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue