Can we obtain parallax effect on Containers in a listView.

[manujbahl]

Instead of using images I am using containers with background images. Is there a way to get parallax effect on that. I modified your sample code to test it out. The build method changes to

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text(widget.title)),
      body: new Stack(
        children: <Widget>[
          new ListView.builder(
            controller: _scrollController,
            itemBuilder: buildItem,
            itemCount: 10,
          ),
        ],
      ),
    );
  }

  Widget buildItem(BuildContext context, int index) {
    return new Parallax.inside(
      child: new Container(
        decoration: new BoxDecoration(
          image: new DecorationImage(
              image: new NetworkImage("https://flutter.io/images/homepage/header-illustration.png"),
              fit: BoxFit.cover),
        ),
        height: 150.0,
      ),
      mainAxisExtent: 150.0,
    );
  }

[letsar]

Yes you can totally do that! The only thing you have to change here it's the height of your container 😉 . It have to be bigger than the mainAxisExtent.

For example, the following code should work:

 Widget buildItem(BuildContext context, int index) {
    return new Parallax.inside(
      child: new Container(
        decoration: new BoxDecoration(
          image: new DecorationImage(
              image: new NetworkImage("https://flutter.io/images/homepage/header-illustration.png"),
              fit: BoxFit.cover),
        ),
        height: 300.0,
      ),
      mainAxisExtent: 150.0,
    );
  }

[manujbahl]

Thanks.

Another quick question. I am trying to get parallax to work inside a Scrollable widget. The initial positioning works but parallax effect on scrolling does not. Any ideas why? Here is the code. I'm adding a SingleChildScrollView with vertical axis and inserting images into the Column child of the scrollable widget. I do see an exception at getChildScrollRatio in /.pub-cache/hosted/pub.dartlang.org/flutter_parallax-0.1.0/lib/src/rendering/parallax.darthttp://pub.dartlang.org/flutter_parallax-0.1.0/lib/src/rendering/parallax.dart at Line 236 because controller.position.viewportDimension is null.

import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter_parallax/flutter_parallax.dart';

void main() { runApp(new MaterialApp(home: new Sample())); }

class Sample extends StatelessWidget { Widget build(BuildContext context) { var app = new MaterialApp( home: new Container( color: const Color(0xFF00FF00), margin: new EdgeInsets.only(left: 15.0, right: 15.0, top: 50.0, bottom: 50.0), child: new SingleChildScrollView( scrollDirection: Axis.vertical, child: new Column( children: <Widget>[ getImageBox(), getImageBox(), getImageBox(), getImageBox(), getImageBox(), getImageBox(), getImageBox() ] ) ) ), ); return app; }

getImageBox(){ return new Container( decoration: new BoxDecoration( border: new Border.all( color: Colors.white, style: BorderStyle.solid, width: 5.0 ), ), child: new Parallax.inside( child: new Image.network( "https://flutter.io/images/homepage/header-illustration.png", fit: BoxFit.cover, height: 300.0, ), mainAxisExtent: 150.0, ) ); } }

On Mar 27, 2018, at 9:28 AM, Romain Rastel <[email protected]mailto:[email protected]> wrote:

Yes you can totally do that! The only thing you have to change here it's the height of your container 😉 . It have to be bigger than the mainAxisExtent.

For example, the following code should work:

Widget buildItem(BuildContext context, int index) { return new Parallax.inside( child: new Container( decoration: new BoxDecoration( image: new DecorationImage( image: new NetworkImage("https://flutter.io/images/homepage/header-illustration.png"), fit: BoxFit.cover), ), height: 300.0, ), mainAxisExtent: 150.0, ); }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/letsar/flutter_parallax/issues/1#issuecomment-376588802, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AFbLKzmORMJIT88MD0zWtWQ9ofHcnyNQks5timitgaJpZM4S8OtJ.

[letsar]

In the case of a SingleChildScrollView the Parallax.inside does not work (I think it's because the element position to the viewport does not seem to change). You should use a CustomScrollView or a ListView in you case, like this:

Widget build(BuildContext context) {
    var app = new MaterialApp(
        home: new Container(
      color: const Color(0xFF00FF00),
      margin: new EdgeInsets.only(left: 15.0, right: 15.0, top: 50.0, bottom: 50.0),
      child: new ListView.builder(
        scrollDirection: Axis.vertical,
        itemBuilder: (c, i) => getImageBox(),
        itemCount: 7,
      ),
    ));
    return app;
  }