Shulou(Shulou.com)06/03 Report--

Today, I would like to talk to you about how to achieve Android Flutter adaptive waterfall flow, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something from this article.

Flutter adaptive waterfall flow

In e-commerce app, we often see the waterfall flow of product recommendation on the first page, or similar short video app home page is also a waterfall stream, which need to be adaptive in order to bring a good experience to users.

If you don't have much to say, first put on the effect picture:

According to the effect picture, it can be divided into four steps:

Picture adaptation

Adaptive label

Pull-up refresh and drop-down load

The like button at the bottom can be removed or modified by yourself. The like_ likes library I use here

Note: the library used in this article: why so many, because I have added things such as image caching, using waterfall_flow for simple waterfall streams.

Waterfall_flow: ^ 3.0.1extended_image: anyextended_sliver: anyff_annotation_route_library: anyhttp_client_helper: anyintl: anylike_button: anyloading_more_list: anypull_to_refresh_notification: anyurl_launcher: any1 Image adaptation: Widget image = Stack (children: [ExtendedImage.network (item.imageUrl, shape: BoxShape.rectangle, / / clearMemoryCacheWhenDispose: true, border: Border.all (color: Colors.grey.withOpacity, width: 1.0), borderRadius: const BorderRadius.all (Radius.circular (10.0),) LoadStateChanged: (ExtendedImageState value) {if (value.extendedImageLoadState = = LoadState.loading) {Widget loadingWidget = Container (alignment: Alignment.center, color: Colors.grey.withOpacity (0.8), child: CircularProgressIndicator (strokeWidth: 2.0, valueColor: AlwaysStoppedAnimation (Theme.of (c) .SecretyColor),) ) If (! konwSized) {/ / todo: not work in web loadingWidget = AspectRatio (aspectRatio: 1.0, child: loadingWidget,);} return loadingWidget } else if (value.extendedImageLoadState = = LoadState.completed) {item.imageRawSize = Size (value.extendedImageInfo.image.width.toDouble (), value.extendedImageInfo.image.height.toDouble ());} return null },), Positioned (top: 5.0,5.0,5.0, child: Container (padding: const EdgeInsets.all), decoration: BoxDecoration (color: Colors.grey.withOpacity), border: Border.all (color: Colors.grey.withOpacity, width: 1.0) BorderRadius: const BorderRadius.all (Radius.circular (5.0), child: Text ('${index + 1}', textAlign: TextAlign.center, style: const TextStyle (fontSize: fontSize, color: Colors.white),)],) If (konwSized) {image = AspectRatio (aspectRatio: item.imageSize.width / item.imageSize.height, child: image,);} else if (item.imageRawSize! = null) {image = AspectRatio (aspectRatio: item.imageRawSize.width / item.imageRawSize.height, child: image,) } return Column (crossAxisAlignment: CrossAxisAlignment.start, children: [image, const SizedBox (height: 5.0,), buildTagsWidget (item), const SizedBox (height: 5.0,), buildBottomWidget (item),],);} 2. Adaptive tags: Widget buildTagsWidget (TuChongItem item, {int maxNum = 6,}) {const double fontSize = 12.0; return Wrap (runSpacing: 5.0, spacing: 5.0, children: item.tags.take (maxNum). Map ((String tag) {final Color color = item.tags.indexOf (tag)] Return Container (padding: const EdgeInsets.all, decoration: BoxDecoration (color: color, border: Border.all (color: Colors.grey.withOpacity, width: 1.0), borderRadius: const BorderRadius.all (Radius.circular (5.0),) Child: Text (tag, textAlign: TextAlign.start, style: TextStyle (fontSize: fontSize, color: color.computeLuminance ()

< 0.5 ? Colors.white : Colors.black), ), ); }).toList());}3.上拉刷新和下拉加载class PullToRefreshHeader extends StatelessWidget { const PullToRefreshHeader(this.info, this.lastRefreshTime, {this.color}); final PullToRefreshScrollNotificationInfo info; final DateTime lastRefreshTime; final Color color; @override Widget build(BuildContext context) { if (info == null) { return Container(); } String text = ''; if (info.mode == RefreshIndicatorMode.armed) { text = 'Release to refresh'; } else if (info.mode == RefreshIndicatorMode.refresh || info.mode == RefreshIndicatorMode.snap) { text = 'Loading...'; } else if (info.mode == RefreshIndicatorMode.done) { text = 'Refresh completed.'; } else if (info.mode == RefreshIndicatorMode.drag) { text = 'Pull to refresh'; } else if (info.mode == RefreshIndicatorMode.canceled) { text = 'Cancel refresh'; } final TextStyle ts = const TextStyle( color: Colors.grey, ).copyWith(fontSize: 13); final double dragOffset = info?.dragOffset ?? 0.0; final DateTime time = lastRefreshTime ?? DateTime.now(); final double top = -hideHeight + dragOffset; return Container( height: dragOffset, color: color ?? Colors.transparent, //padding: EdgeInsets.only(top: dragOffset / 3), //padding: EdgeInsets.only(bottom: 5.0), child: Stack( children: [ Positioned( left: 0.0, right: 0.0, top: top, child: Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded( child: Container( alignment: Alignment.centerRight, child: RefreshImage(top), margin: const EdgeInsets.only(right: 12.0), ), ), Column( children: [ Text( text, style: ts, ), Text( 'Last updated:' + DateFormat('yyyy-MM-dd hh:mm').format(time), style: ts.copyWith(fontSize: 12), ) ], ), Expanded( child: Container(), ), ], ), ) ], ), ); }}class RefreshImage extends StatelessWidget { const RefreshImage(this.top); final double top; @override Widget build(BuildContext context) { const double imageSize = 40; return ExtendedImage.asset( Assets.assets_fluttercandies_grey_png, width: imageSize, height: imageSize, afterPaintImage: (Canvas canvas, Rect rect, ui.Image image, Paint paint) { final double imageHeight = image.height.toDouble(); final double imageWidth = image.width.toDouble(); final Size size = rect.size; final double y = (1 - min(top / (refreshHeight - hideHeight), 1)) * imageHeight; canvas.drawImageRect( image, Rect.fromLTWH(0.0, y, imageWidth, imageHeight - y), Rect.fromLTWH(rect.left, rect.top + y / imageHeight * size.height, size.width, (imageHeight - y) / imageHeight * size.height), Paint() ..colorFilter = const ColorFilter.mode(Color(0xFFea5504), BlendMode.srcIn) ..isAntiAlias = false ..filterQuality = FilterQuality.low); //canvas.restore(); }, ); }}4.底部的点赞按钮LikeButton( size: 18.0, isLiked: item.isFavorite, likeCount: item.favorites, countBuilder: (int count, bool isLiked, String text) { final ColorSwatch color = isLiked ? Colors.pinkAccent : Colors.grey; Widget result; if (count == 0) { result = Text( 'love', style: TextStyle(color: color, fontSize: fontSize), ); } else { result = Text( count >

= 1000? (count / 1000.0) .toStringAsFixed (1) +'k': text, style: TextStyle (color: color, fontSize: fontSize),);} return result;}, likeCountAnimationType: item.favorites < 1000? LikeCountAnimationType.part: LikeCountAnimationType.none, onTap: (bool isLiked) {return onLikeButtonTap (isLiked, item);},)

So the adaptive waterfall flow is complete.

After reading the above, do you have any further understanding of how to achieve Android Flutter adaptive waterfall flow? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.