ParallaxImage with Heros

article_page.dart

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

class ArticlePage extends StatefulWidget {
  @override
  ArticlePageState createState() {
    return new ArticlePageState();
  }
}

class ArticlePageState extends State<ArticlePage> {
  ScrollController _controller;
  @override
  void initState() {
    super.initState();
    _controller = new ScrollController();
  }


  @override
  Widget build(BuildContext context) {
    Widget header = GestureDetector(
      onTap: () {
        Navigator.pop(context);
      },
      child: Container(
          margin: EdgeInsets.symmetric(vertical: 35.0, horizontal: 10.0),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30.0),
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                    color: Colors.grey[300],
                    blurRadius: 5.0,
                    spreadRadius: 2.0,
                    offset: Offset(0, 5)),
              ]),
          child: Hero(
            tag: 'hero',
            child: ClipRRect(
              borderRadius: BorderRadius.vertical(top: Radius.circular(5.0)),
              child: ParallaxImage(
                controller: _controller,
                image: new ExactAssetImage('images/img1.jpg'),
                extent: 300,
              ),
            ),
          )),
    );

    Widget home = Container(
        color: Color(0xffFCFFFC),
        child: MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: ListView(
            controller: _controller,
            children: <Widget>[
              header,
            ],
          ),
        ));
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: home,
    );
  }
}

home_page.dart

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

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() {
    return new HomeScreenState();
  }
}

class HomeScreenState extends State<HomeScreen> {
  final PageController _controller = new PageController(viewportFraction: 0.80, initialPage: 0);
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;

    double w85 = width * 0.85;

    Widget tile = GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => ArticlePage()),
        );
      },
      child: Container(
        margin: EdgeInsets.all(20.0),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5.0),
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                  color: Colors.grey[100],
                  blurRadius: 5.0,
                  spreadRadius: 2.0,
                  offset: Offset(0, 3)),
            ]),
        child: Column(
          children: <Widget>[
            Container(
              height: 350.0,
              child: Hero(
                tag: 'hero',
                child: ClipRRect(
                  borderRadius:
                      BorderRadius.vertical(top: Radius.circular(5.0)),
                  child: ParallaxImage(
                    controller: _controller,
                    image: new ExactAssetImage('images/img1.jpg'),
                    extent: w85,
                  ),
                ),
              ),
            ),
            Container(
                margin: EdgeInsets.all(10.0),
                child: Column(
                  children: <Widget>[
                    Text(
                      "Title of Block",
                      style: TextStyle(
                        fontSize: 15.0,
                      ),
                    ),
                    Text(
                      "Description of text...description...",
                      style: TextStyle(
                        fontSize: 12.0,
                        color: Colors.grey[500],
                        height: 1.2,
                        fontFamily: "Roboto",
                      ),
                    ),
                  ],
                ))
          ],
        ),
      ),
    );

    Widget tile2 = Container(
      margin: EdgeInsets.all(20.0),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30.0),
          color: Colors.white,
          boxShadow: [
            BoxShadow(
                color: Colors.grey[100],
                blurRadius: 5.0,
                spreadRadius: 2.0,
                offset: Offset(0, 3)),
          ]),
      child: Column(
        children: <Widget>[
          Container(
            height: 350.0,
            child: ClipRRect(
              borderRadius: BorderRadius.vertical(top: Radius.circular(30.0)),
              child: ParallaxImage(
                controller: _controller,
                image: ExactAssetImage('images/img2.jpg'),
                extent: w85,
              ),
            ),
          ),
          Container(
              margin: EdgeInsets.all(10.0),
              child: Column(
                children: <Widget>[
                  Text(
                    "Title of Block",
                    style: TextStyle(
                      fontSize: 15.0,
                    ),
                  ),
                  Text(
                    "Description of text...description...",
                    style: TextStyle(
                      fontSize: 12.0,
                      color: Colors.grey[500],
                      height: 1.2,
                      fontFamily: "Roboto",
                    ),
                  ),
                ],
              ))
        ],
      ),
    );

    Widget tile3 = Container(
      margin: EdgeInsets.all(20.0),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50.0),
          color: Colors.white,
          boxShadow: [
            BoxShadow(
                color: Colors.grey[100],
                blurRadius: 5.0,
                spreadRadius: 2.0,
                offset: Offset(0, 3)),
          ]),
      child: Column(
        children: <Widget>[
          Container(
            height: 350.0,
            child: ClipRRect(
              borderRadius: BorderRadius.vertical(top: Radius.circular(50.0)),
              child: ParallaxImage(
                controller: _controller,
                image: ExactAssetImage('images/img3.jpg'),
                extent: w85,
              ),
            ),
          ),
          Container(
              margin: EdgeInsets.all(10.0),
              child: Column(
                children: <Widget>[
                  Text(
                    "Title of Block",
                    style: TextStyle(
                      fontSize: 15.0,
                    ),
                  ),
                  Text(
                    "Description of text...description...",
                    style: TextStyle(
                      fontSize: 12.0,
                      color: Colors.grey[500],
                      height: 1.2,
                      fontFamily: "Roboto",
                    ),
                  ),
                ],
              ))
        ],
      ),
    );

    Widget tile4 = Container(
      margin: EdgeInsets.all(20.0),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30.0),
          color: Colors.white,
          boxShadow: [
            BoxShadow(
                color: Colors.grey[100],
                blurRadius: 5.0,
                spreadRadius: 2.0,
                offset: Offset(0, 3)),
          ]),
      child: Column(
        children: <Widget>[
          Container(
            height: 350.0,
            child: ClipRRect(
              borderRadius: BorderRadius.vertical(top: Radius.circular(30.0)),
              child: ParallaxImage(
                controller: _controller,
                image: ExactAssetImage('images/img4.jpg'),
                extent: w85,
              ),
            ),
          ),
          Container(
              margin: EdgeInsets.all(10.0),
              child: Column(
                children: <Widget>[
                  Text(
                    "Title of Block",
                    style: TextStyle(
                      fontSize: 15.0,
                    ),
                  ),
                  Text(
                    "Description of text...description...",
                    style: TextStyle(
                      fontSize: 12.0,
                      color: Colors.grey[500],
                      height: 1.2,
                      fontFamily: "Roboto",
                    ),
                  ),
                ],
              ))
        ],
      ),
    );

    Widget horizontalList1 = Container(
        margin: EdgeInsets.symmetric(vertical: 20.0),
        height: 450.0,
        child: PageView(
          scrollDirection: Axis.horizontal,
          controller: _controller,
          children: <Widget>[tile, tile2, tile3, tile4],
        ));

    Widget home = Container(
        color: Color(0xffFCFFFC),
        child: MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: ListView(
            children: <Widget>[
              horizontalList1,
            ],
          ),
        ));

    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: home,
    );
  }
}