Merge pull request #14 from IgorKhramtsov/IK_slivers

Rewriting feed list to slivers

Author: IgorKhramtsov

ios/Podfile.lock

@@ -5,6 +5,8 @@ PODS:
   - FMDB/standard (2.7.5)
   - path_provider (0.0.1):
     - Flutter
+  - share_plus (0.0.1):
+    - Flutter
   - sqflite (0.0.2):
     - Flutter
     - FMDB (>= 2.7.5)
@@ -14,6 +16,7 @@ PODS:
 DEPENDENCIES:
   - Flutter (from `Flutter`)
   - path_provider (from `.symlinks/plugins/path_provider/ios`)
+  - share_plus (from `.symlinks/plugins/share_plus/ios`)
   - sqflite (from `.symlinks/plugins/sqflite/ios`)
   - url_launcher (from `.symlinks/plugins/url_launcher/ios`)
 
@@ -26,6 +29,8 @@ EXTERNAL SOURCES:
     :path: Flutter
   path_provider:
     :path: ".symlinks/plugins/path_provider/ios"
+  share_plus:
+    :path: ".symlinks/plugins/share_plus/ios"
   sqflite:
     :path: ".symlinks/plugins/sqflite/ios"
   url_launcher:
@@ -35,6 +40,7 @@ SPEC CHECKSUMS:
   Flutter: 50d75fe2f02b26cc09d224853bb45737f8b3214a
   FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a
   path_provider: abfe2b5c733d04e238b0d8691db0cfd63a27a93c
+  share_plus: 056a1e8ac890df3e33cb503afffaf1e9b4fbae68
   sqflite: 6d358c025f5b867b29ed92fc697fd34924e11904
   url_launcher: 6fef411d543ceb26efce54b05a0a40bfd74cbbef
 

lib/presentation/screens/feed/feed_scroll_physics.dart

@@ -25,7 +25,7 @@ extension PositionRetriever on GlobalKey<State<StatefulWidget>> {
   }
 }
 
-/// By element scroll physics
+/// Scroll physics with snaping to elements (based on PageScrollPhysics)
 class FeedScrollPhysics extends ScrollPhysics {
   FeedScrollPhysics(
     this.elementsSizes,

lib/presentation/screens/feed/feed_sliver_list.dart

@@ -0,0 +1,169 @@
+import 'dart:math';
+import 'dart:ui';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+
+/// [SliverList] with bluring and fading of non-center elements based of how far they are.
+class FeedSliverList extends SliverList {
+  /// [SliverList] with bluring and fading of non-center elements based of how far they are.
+  const FeedSliverList({
+    Key? key,
+    required SliverChildDelegate delegate,
+    this.listener,
+  }) : super(key: key, delegate: delegate);
+  final CurrentElementListener? listener;
+
+  @override
+  SliverMultiBoxAdaptorElement createElement() =>
+      SliverMultiBoxAdaptorElement(this, replaceMovedChildren: true);
+
+  @override
+  RenderSliverList createRenderObject(BuildContext context) {
+    final SliverMultiBoxAdaptorElement element =
+        context as SliverMultiBoxAdaptorElement;
+    return RenderFeedSliverList(childManager: element, listener: listener);
+  }
+}
+
+// ignore: public_member_api_docs
+class RenderFeedSliverList extends RenderSliverList {
+  // ignore: public_member_api_docs
+  RenderFeedSliverList({
+    required RenderSliverBoxChildManager childManager,
+    this.listener,
+  }) : super(childManager: childManager);
+
+  final CurrentElementListener? listener;
+
+  /// Calculating how far is center of element from center of viewport in percents (0.0 - 1.0).
+  double getDistanceToViewportCenter(RenderBox child) {
+    final viewportCenter = constraints.viewportMainAxisExtent / 2.0;
+
+    final double mainAxisDelta = childMainAxisPosition(child);
+    final childCenter = mainAxisDelta + (paintExtentOf(child) / 2.0);
+    return (viewportCenter - childCenter).abs() /
+        constraints.viewportMainAxisExtent;
+  }
+
+  @override
+  void performLayout() {
+    super.performLayout();
+    if (firstChild == null) return;
+
+    var minDistanceChild = firstChild!;
+    RenderBox? child = childAfter(minDistanceChild);
+    while (child != null) {
+      final distance = getDistanceToViewportCenter(child);
+      if (distance < getDistanceToViewportCenter(minDistanceChild)) {
+        minDistanceChild = child;
+      } else {
+        break; // If we start having larger number - we cant get minimal distance anymore.
+      }
+
+      child = childAfter(child);
+    }
+    final minDistanceChildIndex = indexOf(minDistanceChild);
+
+    listener?.currentIndex.value = minDistanceChildIndex;
+  }
+
+  /// Copy of original function with bluring side elements.
+  @override
+  void paint(PaintingContext context, Offset offset) {
+    if (firstChild == null) return;
+    // offset is to the top-left corner, regardless of our axis direction.
+    // originOffset gives us the delta from the real origin to the origin in the axis direction.
+    final Offset mainAxisUnit, crossAxisUnit, originOffset;
+    final bool addExtent;
+    switch (applyGrowthDirectionToAxisDirection(
+        constraints.axisDirection, constraints.growthDirection)) {
+      case AxisDirection.up:
+        mainAxisUnit = const Offset(0.0, -1.0);
+        crossAxisUnit = const Offset(1.0, 0.0);
+        originOffset = offset + Offset(0.0, geometry!.paintExtent);
+        addExtent = true;
+        break;
+      case AxisDirection.right:
+        mainAxisUnit = const Offset(1.0, 0.0);
+        crossAxisUnit = const Offset(0.0, 1.0);
+        originOffset = offset;
+        addExtent = false;
+        break;
+      case AxisDirection.down:
+        mainAxisUnit = const Offset(0.0, 1.0);
+        crossAxisUnit = const Offset(1.0, 0.0);
+        originOffset = offset;
+        addExtent = false;
+        break;
+      case AxisDirection.left:
+        mainAxisUnit = const Offset(-1.0, 0.0);
+        crossAxisUnit = const Offset(0.0, 1.0);
+        originOffset = offset + Offset(geometry!.paintExtent, 0.0);
+        addExtent = true;
+        break;
+    }
+    RenderBox? child = firstChild;
+    while (child != null) {
+      final double mainAxisDelta = childMainAxisPosition(child);
+      final double crossAxisDelta = childCrossAxisPosition(child);
+      Offset childOffset = Offset(
+        originOffset.dx +
+            mainAxisUnit.dx * mainAxisDelta +
+            crossAxisUnit.dx * crossAxisDelta,
+        originOffset.dy +
+            mainAxisUnit.dy * mainAxisDelta +
+            crossAxisUnit.dy * crossAxisDelta,
+      );
+      if (addExtent) childOffset += mainAxisUnit * paintExtentOf(child);
+
+      // If the child's visible interval (mainAxisDelta, mainAxisDelta + paintExtentOf(child))
+      // does not intersect the paint extent interval (0, constraints.remainingPaintExtent), it's hidden.
+      if (mainAxisDelta < constraints.remainingPaintExtent &&
+          mainAxisDelta + paintExtentOf(child) > 0) {
+        var fadeStrength = getDistanceToViewportCenter(child);
+        // Special non-linear function, to blur faster
+        fadeStrength =
+            (pow(fadeStrength + 0.4, 4.0) + pow(fadeStrength, 2.0)).toDouble();
+
+        // ImageFilter with blur and blackout effect
+        final filter = ImageFilter.compose(
+          outer: ImageFilter.blur(
+            sigmaX: 6.0 * fadeStrength,
+            sigmaY: 6.0 * fadeStrength,
+          ),
+          inner: ColorFilter.mode(
+            Colors.black.withOpacity(
+              max(min(1.0, .45 * fadeStrength), 0.0), // bound to 0.0 - 1.0
+            ),
+            BlendMode.darken,
+          ),
+        );
+
+        // ClipRect is required to prevent blur from being applied to entire screen
+        context.pushClipRect(
+          needsCompositing,
+          childOffset,
+          Rect.fromLTWH(0, 0, child.size.width, child.size.height),
+          (context, offset) {
+            context.pushLayer(
+              ImageFilterLayer(imageFilter: filter),
+              (context, o) {
+                context.paintChild(child!, o);
+              },
+              offset,
+            );
+          },
+        );
+      }
+
+      child = childAfter(child);
+    }
+  }
+}
+
+class CurrentElementListener {
+  final ValueNotifier<int> currentIndex = ValueNotifier(0);
+}