Parallax Image Slider In Flutter

Parallax Image Slider In Flutter :

Screenshot :

Parallax Image Slider In Flutter

page_transformer.dart

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

typedef PageView PageViewBuilder(
    BuildContext context, PageVisibilityResolver visibilityResolver);

class PageVisibilityResolver {
  PageVisibilityResolver({
    ScrollMetrics metrics,
    double viewPortFraction,
  })  : this._pageMetrics = metrics,
        this._viewPortFraction = viewPortFraction;

  final ScrollMetrics _pageMetrics;
  final double _viewPortFraction;

  PageVisibility resolvePageVisibility(int pageIndex) {
    final double pagePosition = _calculatePagePosition(pageIndex);
    final double visiblePageFraction =
        _calculateVisiblePageFraction(pageIndex, pagePosition);

    return PageVisibility(
      visibleFraction: visiblePageFraction,
      pagePosition: pagePosition,
    );
  }

  double _calculateVisiblePageFraction(int index, double pagePosition) {
    if (pagePosition > -1.0 && pagePosition <= 1.0) {
      return 1.0 - pagePosition.abs();
    }

    return 0.0;
  }

  double _calculatePagePosition(int index) {
    final double viewPortFraction = _viewPortFraction ?? 1.0;
    final double pageViewWidth =
        (_pageMetrics?.viewportDimension ?? 1.0) * viewPortFraction;
    final double pageX = pageViewWidth * index;
    final double scrollX = (_pageMetrics?.pixels ?? 0.0);
    final double pagePosition = (pageX - scrollX) / pageViewWidth;
    final double safePagePosition = !pagePosition.isNaN ? pagePosition : 0.0;

    if (safePagePosition > 1.0) {
      return 1.0;
    } else if (safePagePosition < -1.0) {
      return -1.0;
    }

    return safePagePosition;
  }
}

class PageVisibility {
  PageVisibility({
    @required this.visibleFraction,
    @required this.pagePosition,
  });

  final double visibleFraction;

  final double pagePosition;
}

class PageTransformer extends StatefulWidget {
  PageTransformer({
    @required this.pageViewBuilder,
  });

  final PageViewBuilder pageViewBuilder;

  @override
  _PageTransformerState createState() => _PageTransformerState();
}

class _PageTransformerState extends State<PageTransformer> {
  PageVisibilityResolver _visibilityResolver;

  @override
  Widget build(BuildContext context) {
    final pageView = widget.pageViewBuilder(
      context,
      _visibilityResolver ?? PageVisibilityResolver(),
    );

    final controller = pageView.controller;
    final viewPortFraction = controller.viewportFraction;

    return NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification notification) {
        setState(() {
          _visibilityResolver = PageVisibilityResolver(
            metrics: notification.metrics,
            viewPortFraction: viewPortFraction,
          );
        });
      },
      child: pageView,
    );
  }
}

parallax_cards.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
import 'main.dart';
import 'page_transformer.dart';

class ParallaxCards extends StatelessWidget {
  ParallaxCards({
    @required this.item,
    @required this.pageVisibility,
  });

  final ParallaxCardItem item;
  final PageVisibility pageVisibility;

  Widget _applyTextEffects({
    @required double translationFactor,
    @required Widget child,
  }) {
    final double xTranslation = pageVisibility.pagePosition * translationFactor;

    return Opacity(
        opacity: pageVisibility.visibleFraction,
        child: Transform(
          alignment: FractionalOffset.topLeft,
          transform: Matrix4.translationValues(
            xTranslation,
            0.0,
            0.0,
          ),
          child: child,
        ));
  }

  _buildTextContainer(BuildContext context) {
    var categoryText = _applyTextEffects(
        translationFactor: 300.0,
        child: Padding(
            padding: EdgeInsets.all(5.0),
            child: Text(
              item.body,
              style: TextStyle(
                  fontWeight: FontWeight.w400, fontSize: 20.0, color: Colors.lightBlueAccent),
              textAlign: TextAlign.center,
            )));

    var titleText = _applyTextEffects(
      translationFactor: 200.0,
      child: Padding(
        padding: EdgeInsets.all(5.0),
        child: Text(
          item.title,
          style: TextStyle(
              fontWeight: FontWeight.w200, fontSize: 16.0, color: Colors.black),
          textAlign: TextAlign.center,
        ),
      ),
    );

    return Positioned(
        bottom: 50.0,
        left: 10.0,
        right: 10.0,
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              categoryText,
              titleText,
            ]));
  }

  @override
  Widget build(BuildContext context) {
    var image = Image.asset(item.imagePath,
        fit: BoxFit.cover,
        alignment: FractionalOffset(
          0.5 + (pageVisibility.pagePosition / 3),
          0.5,
        ));

    var imageOverlayGradient = DecoratedBox(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
          Colors.transparent,
        ])));

    return Padding(
        padding: EdgeInsets.symmetric(
          vertical: 22.0,
          horizontal: 8.0,
        ),
        child: ClipRRect(
            borderRadius: BorderRadius.circular(10.0),
            child: Material(
                child: Stack(fit: StackFit.expand, children: [
              image,
              imageOverlayGradient,
              _buildTextContainer(context),
            ]))));
  }
}

pubspec.yaml

name: hive_db_local
description: A new Flutter application.
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

  assets:
    - assets/images/

main.dart

import 'package:flutter/material.dart';
import 'page_transformer.dart';
import 'parallax_cards.dart';

void main() => runApp(MaterialApp(
      home: ExampleScreen(),
      debugShowCheckedModeBanner: false,
    ));

class ExampleScreen extends StatefulWidget {
  @override
  _ExampleScreenState createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.only(bottom: 30.0),
          child: SizedBox.fromSize(
            size: Size.fromHeight(500.0),
            child: PageTransformer(
              pageViewBuilder: (context, visibilityResolver) {
                return PageView.builder(
                  controller: PageController(viewportFraction: 0.85),
                  itemCount: parallaxCardItemsList.length,
                  itemBuilder: (context, index) {
                    final item = parallaxCardItemsList[index];
                    final pageVisibility =
                        visibilityResolver.resolvePageVisibility(index);

                    return ParallaxCards(
                      item: item,
                      pageVisibility: pageVisibility,
                    );
                  },
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

class ParallaxCardItem {
  ParallaxCardItem({
    this.title,
    this.body,
    this.imagePath,
  });

  final String title;
  final String body;
  final String imagePath;
}

final parallaxCardItemsList = <ParallaxCardItem>[
  ParallaxCardItem(
    title: 'Blurryface',
    body: 'Twenty One Pilots',
    imagePath: 'assets/images/slider_1.jpg',
  ),
  ParallaxCardItem(
    title: 'Free Spirit',
    body: 'Khalid',
    imagePath: 'assets/images/slider_1.jpg',
  ),
  ParallaxCardItem(
    title: 'Overexposed',
    body: 'Maroon 5',
    imagePath: 'assets/images/slider_1.jpg',
  ),
];

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in