Swipe effect like inshorts news app for Flutter

Question

Unable to achieve the page to start from the bottom in the page viewer I have tried converted bit of code this but was unable to load it from bottom.

Reference link to what I am trying to achieve : Swipe effect like inshorts news app

Here is my code for what I am trying

class InshortsPageTransformer extends PageTransformer {
  @override
  Widget transform(Widget child, TransformInfo info) {
    double position = info.position ?? 0;
    double rotation = position * 0.2;
    double scale = math.max(0.8, 1 - position.abs());
    if (position < -1) {
      rotation = 0;
      child = Opacity(
        opacity: 0,
        child: child,
      );
    } else if (position <= 0) {
      child = Opacity(
        opacity: 1,
        child: child,
      );
      child = Transform(
        transform: Matrix4.identity()
          ..setEntry(3, 2, 0.001)
          ..rotateY(rotation)
          ..scale(scale),
        alignment: Alignment.center,
        child: child,
      );
    } else if (position <= 1) {
      child = Opacity(
        opacity: 1,
        child: child,
      );
      child = Transform(
        transform: Matrix4.identity()
          ..setEntry(3, 2, 0.001)
          ..rotateY(rotation)
          ..scale(scale),
        alignment: Alignment.center,
        child: child,
      );
    } else {
      rotation = 0;
      child = Opacity(
        opacity: 0,
        child: child,
      );
    }

    return Transform(
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001)
        ..rotateY(rotation)
        ..scale(scale),
      alignment: Alignment.center,
      child: child,
    );
  }
}

class ScaleAndFadeTransformer extends PageTransformer {
  final double _scale;
  final double _fade;

  ScaleAndFadeTransformer({double fade = 0.3, double scale = 0.8})
      : _fade = fade,
        _scale = scale;

  @override
  Widget transform(Widget item, TransformInfo info) {
    double position = info.position ?? 0;
    double scaleFactor = (1 - position.abs()) * (1 - _scale);
    double fadeFactor = (1 - position.abs()) * (1 - _fade);
    double opacity = _fade + fadeFactor;
    double scale = _scale + scaleFactor;
    return Opacity(
      opacity: opacity,
      child: Transform.scale(
        scale: scale,
        child: item,
      ),
    );
  }
}

score 0 · Answer 1 · answered Feb 14 '23 at 10:20

0

I recently created the same project look into it

https://github.com/bibek-ranjan-saha/prodt_test

I have used https://pub.dev/packages/another_transformer_page_view this package for achieving this effect.

sample code snippet

       TransformerPageView(
          scrollDirection: Axis.vertical,
          itemCount: snapshot.data?.data.length ?? 0,
          loop: false,
          controller: homePageController,
          transformer: DeepthPageTransformer()
          itemBuilder: (context, index) {
            return NewsView(
               screenSize: screenSize,
               news: snapshot.data!.data[index],
            );
         },
      );

answered Feb 14 '23 at 10:20

Bibek Saha

134
1
7

This is similar to inshorts but the problem faced here is that the next page bottom should be visible at first on scroll – ShikharVayuz Mar 06 '23 at 11:00
Please share in detail – Bibek Saha Mar 07 '23 at 14:18
Please check this snippet for better understanding https://stackoverflow.com/questions/34065003/swipe-effect-like-inshorts-news-app – ShikharVayuz Mar 09 '23 at 05:13
It does have same UI I believe if not check my project it has other effects as well if not customize it accordingly from this file https://github.com/bibek-ranjan-saha/prodt_test/blob/master/lib/widgets/all_transformers.dart – Bibek Saha Mar 10 '23 at 08:22

Swipe effect like inshorts news app for Flutter

1 Answers1