{"id":1177,"date":"2021-06-18T18:28:05","date_gmt":"2021-06-18T18:28:05","guid":{"rendered":"https:\/\/flutter4fun.com\/?p=1177"},"modified":"2021-06-18T18:29:36","modified_gmt":"2021-06-18T18:29:36","slug":"ui-challenge-5","status":"publish","type":"post","link":"https:\/\/flutter4fun.com\/ui-challenge-5\/","title":{"rendered":"UI Challenge 5 \u2013 Parallax Effect by Marcus Engstrup Dresler"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Hi there. I’m back again.<\/p>\n\n\n\n

Today I decided to write a blog post here. After a little search in the Dribbble I found this amazing design here<\/a> by Marcus Engstrup Dresler<\/a>.<\/p>\n\n\n\n

\n
\nhttps:\/\/cdn.dribbble.com\/users\/941062\/screenshots\/14544247\/media\/3a1557d2fc6862cdc4c8b11644a172a8.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

Okay, let’s break it into some small challenges to solve. First of all, we need to have a single image which supports parallax effect, then we need to put list of images inside a horizontal list and make them parallax based on their offset in the list.<\/p>\n\n\n\n

1. SlidingImage<\/h3>\n\n\n\n

For achieving parallax effect on an image, we need to show part of our image. We can use Alignment in the Image<\/a> widget to achieve that.
Alignment takes x and y which should be between -1.0 and +1.0. In our case, we need to use only X value (-1.0 means left, +1.0 means right, and 0.0 is center)<\/p>\n\n\n\n

\n
\n
class ParallaxImage extends StatelessWidget {\n  final String url;\n  final double horizontalSlide;\n\n  const ParallaxImage({\n    Key? key,\n    required this.url,\n    required this.horizontalSlide,\n  }) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Image.network(\n      imageUrl,\n      alignment: Alignment(horizontalSlide, 1),\n      fit: BoxFit.cover,\n    );\n  }\n}<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
 2. Horizontal Scroll List<\/h3>\n\n\n\n
Now let’s focus on making a horizontal list with a simple widget (like a colored box). There is a widget called PageView<\/a> that can use it for implementing a horizontal list (with snapping effect).<\/p>\n\n\n\n
Below is a simple example of PageView<\/p>\n\n\n\n
\n
\n
@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: Center(\n      child: AspectRatio(\n        aspectRatio: 2.0,\n        child: PageView(\n          controller: PageController(\n            initialPage: 1,\n            viewportFraction: 0.6,\n          ),\n          children: [\n            ColoredBox(color: Colors.red),\n            ColoredBox(color: Colors.green),\n            ColoredBox(color: Colors.blue),\n          ],\n        ),\n      ),\n    ),\n  );\n}<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Now we need to calculate the offset of each box and let them now their offset value.<\/p>\n\n\n\n
We can get the page<\/code> value using PageController<\/a> which contains a value that shows the offset of our PageView<\/a>.<\/p>\n\n\n\n
\n
\n
late PageController _pageController;\ndouble page = 0.0;\n\n@override\nvoid initState() {\n  _pageController = PageController(\n    initialPage: 1,\n    viewportFraction: 0.6,\n  );\n  _pageController.addListener(() {\n    setState(() {\n      page = _pageController.page!;\n    });\n  });\n  super.initState();\n}\n\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: Center(\n      child: AspectRatio(\n        aspectRatio: 2.0,\n        child: PageView(\n          controller: _pageController,\n          children: [\n            ColoredBox(color: Colors.red),\n            ColoredBox(color: Colors.green),\n            ColoredBox(color: Colors.blue),\n          ],\n        ),\n      ),\n    ),\n  );\n}<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Now let’s use PageView.builder<\/a> to access the index<\/code> of each item (also it improves the performance)
Then we can calculate the offset of each item using page - index<\/code> formula. Then we clamp the result between -1 and +1:<\/p>\n\n\n\n
\n
\n
PageView.builder(\n  controller: _pageController,\n  itemBuilder: (context, index) {\n    return ColoredBox(\n      color: colors[index],\n      offset: (index - page).clamp(-1, 1).toDouble(),\n    );\n  },\n  itemCount: colors.length,\n),<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Now we can replace our colored boxes with our ParallaxImage<\/code> widget and use the horizontalSlide<\/code> value to slide each image.<\/p>\n\n\n\n
\n
\n
PageView.builder(\n  controller: _pageController,\n  itemBuilder: (context, index) {\n    return Padding(\n      padding: const EdgeInsets.all(16.0),\n      child: ParallaxImage(\n        url: images[index],\n        horizontalSlide: (index - page).clamp(-1, 1).toDouble(),\n      ),\n    );\n  },\n  itemCount: images.length,\n)<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Okay, now let’s change the width and height of each image based on their offset. Also, we need to make images rounded by wrapping them in a ClipRRect<\/a> widget.<\/p>\n\n\n\n
\n
\n
class ParallaxImage extends StatelessWidget {\n  final String url;\n  final double horizontalSlide;\n\n  const ParallaxImage({\n    Key? key,\n    required this.url,\n    required this.horizontalSlide,\n  }) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    final scale = 1 - horizontalSlide.abs();\n    final size = MediaQuery.of(context).size;\n    return Container(\n      child: Center(\n        child: SizedBox(\n          width: size.width * ((scale * 0.8) + 0.8),\n          height: size.height * ((scale * 0.2) + 0.2),\n          child: ClipRRect(\n            borderRadius: BorderRadius.all(Radius.circular(48)),\n            child: Image.network(\n              url,\n              alignment: Alignment(horizontalSlide, 1),\n              fit: BoxFit.cover,\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}<\/pre>\n<\/div>\n\n\n\n
\n
\"\"
Try it in DartPad<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
I think there is nothing left except replacing images. Unfortunately, I couldn’t find images that have been used in our reference video. If you found them you can replace them easily.<\/p>\n\n\n\n
You can find the source code here<\/a> in my Github.<\/p>\n\n\n\n
Don’t forget to comment and write your feedback.<\/p>\n\n\n\n
Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"
Hi there. I’m back again. Today I decided to write a blog post here. After a little search in the Dribbble I found this amazing design here by Marcus Engstrup Dresler. Okay, let’s break it into some small challenges to solve. First of all, we need to have a single image which supports parallax effect, […]<\/p>\n","protected":false},"author":3,"featured_media":1179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"wp_social_preview_title":"","wp_social_preview_description":"","wp_social_preview_image":0,"footnotes":""},"categories":[32],"tags":[],"class_list":["post-1177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-challenge"],"_links":{"self":[{"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/posts\/1177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/comments?post=1177"}],"version-history":[{"count":33,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/posts\/1177\/revisions"}],"predecessor-version":[{"id":1805,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/posts\/1177\/revisions\/1805"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/media\/1179"}],"wp:attachment":[{"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/media?parent=1177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/categories?post=1177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/tags?post=1177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}