Skip to content

Commit

Permalink
update demo about hero, make it better when slide out.
Browse files Browse the repository at this point in the history
  • Loading branch information
zmtzawqlp committed May 5, 2021
1 parent 2d44d98 commit 3a05871
Show file tree
Hide file tree
Showing 9 changed files with 207 additions and 139 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

* Improve:
1. add [ExtendedImage.network.cacheMaxAge] to set max age to be cached.
2. update demo about hero, make it better when slide out.

## 4.0.1

Expand Down
3 changes: 1 addition & 2 deletions example/lib/common/text/emoji_text.dart
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import 'package:extended_text_library/extended_text_library.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

///emoji/image text
Expand All @@ -14,7 +13,7 @@ class EmojiText extends SpecialText {

///https://github.com/flutter/flutter/issues/42086
/// widget span is not working on web
if (EmojiUitl.instance.emojiMap.containsKey(key) && !kIsWeb) {
if (EmojiUitl.instance.emojiMap.containsKey(key)) {
//fontsize id define image height
//size = 30.0/26.0 * fontSize
const double size = 20.0;
Expand Down
7 changes: 0 additions & 7 deletions example/lib/common/text/my_special_text_span_builder.dart
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,6 @@ class MySpecialTextSpanBuilder extends SpecialTextSpanBuilder {

/// whether show background for @somebody
final bool showAtBackground;
@override
TextSpan build(String data,
{TextStyle? textStyle, SpecialTextGestureTapCallback? onTap}) {
final TextSpan textSpan =
super.build(data, textStyle: textStyle, onTap: onTap);
return textSpan;
}

@override
SpecialText? createSpecialText(String flag,
Expand Down
6 changes: 3 additions & 3 deletions example/lib/common/widget/crop_image.dart
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,9 @@ class CropImage extends StatelessWidget {
//return null;
//return state.completedWidget;
widget = Hero(
tag: imageItem.imageUrl,
child:
buildImage(state.extendedImageInfo!.image, num300, num400));
tag: imageItem.imageUrl,
child: buildImage(state.extendedImageInfo!.image, num300, num400),
);

break;
case LoadState.failed:
Expand Down
99 changes: 99 additions & 0 deletions example/lib/common/widget/hero.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import 'package:flutter/material.dart';
import 'package:extended_image/extended_image.dart';

/// make hero better when slide out
class HeroWidget extends StatefulWidget {
const HeroWidget({
required this.child,
required this.tag,
required this.slidePagekey,
this.slideType = SlideType.onlyImage,
});
final Widget child;
final SlideType slideType;
final Object tag;
final GlobalKey<ExtendedImageSlidePageState> slidePagekey;
@override
_HeroWidgetState createState() => _HeroWidgetState();
}

class _HeroWidgetState extends State<HeroWidget> {
late RectTween _rectTween;
@override
Widget build(BuildContext context) {
return Hero(
tag: widget.tag,
createRectTween: (Rect? begin, Rect? end) {
_rectTween = RectTween(begin: begin, end: end);
return _rectTween;
},
// make hero better when slide out
flightShuttleBuilder: (BuildContext flightContext,
Animation<double> animation,
HeroFlightDirection flightDirection,
BuildContext fromHeroContext,
BuildContext toHeroContext) {
// make hero more smoothly
final Hero hero = (flightDirection == HeroFlightDirection.pop
? fromHeroContext.widget
: toHeroContext.widget) as Hero;
if (flightDirection == HeroFlightDirection.pop) {
final bool fixTransform = widget.slideType == SlideType.onlyImage &&
(widget.slidePagekey.currentState!.offset != Offset.zero ||
widget.slidePagekey.currentState!.scale != 1.0);

final Widget toHeroWidget = (toHeroContext.widget as Hero).child;
return AnimatedBuilder(
animation: animation,
builder: (BuildContext buildContext, Widget? child) {
Widget animatedBuilderChild = hero.child;

// make hero more smoothly
animatedBuilderChild = Stack(
clipBehavior: Clip.antiAlias,
alignment: Alignment.center,
children: <Widget>[
Opacity(
opacity: 1 - animation.value,
child: UnconstrainedBox(
child: SizedBox(
width: _rectTween.begin!.width,
height: _rectTween.begin!.height,
child: toHeroWidget,
),
),
),
Opacity(
opacity: animation.value,
child: animatedBuilderChild,
)
],
);

// fix transform when slide out
if (fixTransform) {
final Tween<Offset> offsetTween = Tween<Offset>(
begin: Offset.zero,
end: widget.slidePagekey.currentState!.offset);

final Tween<double> scaleTween = Tween<double>(
begin: 1.0, end: widget.slidePagekey.currentState!.scale);
animatedBuilderChild = Transform.translate(
offset: offsetTween.evaluate(animation),
child: Transform.scale(
scale: scaleTween.evaluate(animation),
child: animatedBuilderChild,
),
);
}

return animatedBuilderChild;
},
);
}
return hero.child;
},
child: widget.child,
);
}
}
144 changes: 69 additions & 75 deletions example/lib/common/widget/pic_swiper.dart
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import 'package:oktoast/oktoast.dart';
import 'package:flutter/material.dart' hide Image;
import 'package:flutter/rendering.dart';
import 'package:url_launcher/url_launcher.dart';
import 'hero.dart';
import 'item_builder.dart';

const String attachContent =
Expand Down Expand Up @@ -121,27 +122,6 @@ class _PicSwiperState extends State<PicSwiper> with TickerProviderStateMixin {
enableSlideOutPage: true,
mode: ExtendedImageMode.gesture,
imageCacheName: 'CropImage',
heroBuilderForSlidingPage: (Widget result) {
if (index < min(9, widget.pics!.length)) {
return Hero(
tag: item,
child: result,
flightShuttleBuilder: (BuildContext flightContext,
Animation<double> animation,
HeroFlightDirection flightDirection,
BuildContext fromHeroContext,
BuildContext toHeroContext) {
final Hero hero =
(flightDirection == HeroFlightDirection.pop
? fromHeroContext.widget
: toHeroContext.widget) as Hero;
return hero.child;
},
);
} else {
return result;
}
},
initGestureConfigHandler: (ExtendedImageState state) {
double? initialScale = 1.0;

Expand Down Expand Up @@ -268,6 +248,16 @@ class _PicSwiperState extends State<PicSwiper> with TickerProviderStateMixin {
return null;
},
);

if (index < min(9, widget.pics!.length)) {
image = HeroWidget(
child: image,
tag: item,
slideType: SlideType.onlyImage,
slidePagekey: slidePagekey,
);
}

image = GestureDetector(
child: image,
onTap: () {
Expand Down Expand Up @@ -560,6 +550,7 @@ class ImageDetail extends StatelessWidget {
),
padding: const EdgeInsets.all(20.0),
child: Stack(
clipBehavior: Clip.none,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
Expand All @@ -585,26 +576,27 @@ class ImageDetail extends StatelessWidget {
//overflow: ExtendedTextOverflow.ellipsis,
style: const TextStyle(fontSize: 14, color: Colors.grey),
maxLines: 10,
overflowWidget: kIsWeb
? null
: TextOverflowWidget(
//maxHeight: double.infinity,
//align: TextOverflowAlign.right,
//fixedOffset: Offset.zero,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('\u2026 '),
TextButton(
child: const Text('more'),
onPressed: () {
launch(
'https://github.com/fluttercandies/extended_text');
},
)
],
),
),
overflowWidget: TextOverflowWidget(
//maxHeight: double.infinity,
//align: TextOverflowAlign.right,
//fixedOffset: Offset.zero,
//debugOverflowRectColor: Colors.red,
child: Material(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('\u2026 '),
InkWell(
child: const Text('more'),
onTap: () {
launch(
'https://github.com/fluttercandies/extended_text');
},
)
],
),
),
),
selectionEnabled: true,
selectionControls: MyTextSelectionControls(),
),
Expand All @@ -628,43 +620,45 @@ class ImageDetail extends StatelessWidget {
'${(index + 1).toString().padLeft(tuChongItem!.images!.length.toString().length, '0')}/${tuChongItem!.images!.length}',
),
),
if (tuChongItem != null)
Positioned(
top: -30.0,
right: -15.0,
child: FloatText(
'${tuChongItem?.imageSize.width.toInt()} * ${tuChongItem?.imageSize.height.toInt()}',
),
),
Positioned(
top: -30.0,
right: -15.0,
child: FloatText(
'${info!.imageInfo.image.width} * ${info!.imageInfo.image.height}',
top: -33.0,
right: 0,
left: 0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: const <Widget>[
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
],
),
),
Positioned(
top: -33.0,
right: 0,
left: 0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: const <Widget>[
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
],
)),
],
),
decoration: BoxDecoration(
Expand Down

0 comments on commit 3a05871

Please sign in to comment.