parallax_image 0.3.1

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 92

A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content.

demo.gif

Installation

Add dependency to your pubspec.yaml:

dependencies:
  parallax_image: ^0.2.0

Usage

ParallaxImage can be used with any Scrollable (ListView for instance). When created, it subscribes to scroll updates on nearest Scrollable ancestor. It is also possible to specify custom ScrollController in which case this widget subscribes to updates on ScrollController.position (assumes that controller is attached to only one Scrollable).

class MyWidget extends StatefulWidget {
  @override
  MyWidgetState createState() => new MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  final _controller = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new ListView(controller: _controller, children: [
      new ParallaxImage(
        image: new AssetImage('images/january.jpg'),
        // Extent of this widget in scroll direction.
        // In this case it is vertical scroll so extent defines
        // the height of this widget.
        // The image is scaled with BoxFit.fitWidth which makes it
        // occupy full width of this widget.
        // After image is scaled it should normally have height greater
        // than this value to allow for parallax effect to be
        // visible.
        extent: 100.0,
        // Optionally specify child widget.
        child: new Text('January'),
        // Optinally specify scroll controller.
        controller: _controller,
      ),
      // ...add more list items
    ]);
  }
}

See example/ folder for a complete demo.

Features and bugs

Please file feature requests and bugs at the issue tracker.

[0.3.0]

  • Enable hit testing so that ParallaxImage can be used inside GestureDetector.

[0.2.0+1]

  • Readme updates.

[0.2.0]

  • controller argument in ParallaxImage constructor is no longer required. If controller is not specified then ParallaxImage looks for nearest Scrollable ancestor and subscribes to scrolling updates on it.

[0.1.0]

  • Initial release

example/lib/main.dart

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Parallax Image Demo',
      theme: new ThemeData(primarySwatch: Colors.blueGrey),
      home: new MyHomePage(title: 'Parallax Image Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return new Scaffold(
      appBar: new AppBar(title: new Text(title)),
      body: new Column(
        children: <Widget>[
          new Container(
            padding: const EdgeInsets.all(20.0),
            child: new Text(
              'Horizontal scroll parallax',
              style: theme.textTheme.title,
            ),
          ),
          new Container(
            padding: const EdgeInsets.symmetric(vertical: 10.0),
            constraints: const BoxConstraints(maxHeight: 200.0),
            child: new ListView.builder(
              scrollDirection: Axis.horizontal,
              itemBuilder: _buildHorizontalChild,
            ),
          ),
          new Container(
            padding: const EdgeInsets.all(20.0),
            child: new Text(
              'Vertical scroll parallax',
              style: theme.textTheme.title,
            ),
          ),
          new Expanded(
            child: new ListView.builder(
              itemBuilder: _buildVerticalChild,
            ),
          )
        ],
      ),
    );
  }

  Widget _buildVerticalChild(BuildContext context, int index) {
    index++;
    if (index > 7) return null;
    return new Padding(
      padding: const EdgeInsets.only(bottom: 10.0),
      child: new GestureDetector(
        onTap: () {
          print('Tapped $index');
        },
        child: new ParallaxImage(
          extent: 150.0,
          image: new ExactAssetImage(
            'images/img$index.jpg',
          ),
        ),
      ),
    );
  }

  Widget _buildHorizontalChild(BuildContext context, int index) {
    index++;
    if (index > 7) return null;
    return new Padding(
      padding: const EdgeInsets.only(right: 10.0),
      child: new ParallaxImage(
        extent: 100.0,
        image: new ExactAssetImage(
          'images/img$index.jpg',
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  parallax_image: ^0.3.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:parallax_image/parallax_image.dart';
  
Version Uploaded Documentation Archive
0.3.1 Jul 24, 2018 Go to the documentation of parallax_image 0.3.1 Download parallax_image 0.3.1 archive
0.3.0 May 9, 2018 Go to the documentation of parallax_image 0.3.0 Download parallax_image 0.3.0 archive
0.2.0+1 Feb 23, 2018 Go to the documentation of parallax_image 0.2.0+1 Download parallax_image 0.2.0+1 archive
0.2.0 Feb 21, 2018 Go to the documentation of parallax_image 0.2.0 Download parallax_image 0.2.0 archive
0.1.0 Feb 20, 2018 Go to the documentation of parallax_image 0.1.0 Download parallax_image 0.1.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
85
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
92
Learn more about scoring.

We analyzed this package on Sep 18, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.12.3
  • Flutter: 0.8.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8