Can we obtain parallax effect on Containers in a listView. about flutter_parallax

[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.dart<http://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 GitHub<#1 (comment)>, or mute the thread<https://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;
  }