Building Custom Scroll Physics and Simulations with Dart's Flutter Framework

What Will I Learn?

Write here briefly the details of what the user is going to learn in a bullet list.

• You will learn how to define and create Custom Physics Simulations in Flutter
• You will learn how to apply these Physics Simulations to Scrolling Widgets
• You will learn how to use the Layout Builder Widget
• You will learn about the Render Life Cycle for Flutter
• You will learn how to build an Infinite List View widget using Extents
• You will learn about Flutter Constraints and how they work in the framework

Requirements

System Requirements:

• IDEA intellij, Visual Studio Code with the Dart/Flutter Plugins, Android Studio or Xcode
• The Flutter SDK on the latest Master Build
• An Android or iOS Emulator or device for testing

OS Support for Flutter:

• Windows 7 SP1 or later (64-bit)
• macOS (64-bit)
• Linux (64-bit)

Required Knowledge

• A basic knowledge of Newtonian physics
• A fair understanding of Mobile development and Imperative or Object Oriented Programming
• Some understanding of rendering and rendering life cycles for other frameworks like React

Resources for Flutter and this Project:

• Flutter Website: https://flutter.io/
• Flutter Official Documentation: https://flutter.io/docs/
• Flutter Installation Information: https://flutter.io/get-started/install/
• Flutter GitHub repository: https://github.com/flutter/flutter
• Flutter Dart 2 Preview Information: https://github.com/flutter/flutter/wiki/Trying-the-preview-of-Dart-2-in-Flutter
• Flutter Technical Overview: https://flutter.io/technical-overview/
• Dart Website: https://www.dartlang.org/
• Flutter Awesome GitHub Repository: https://github.com/Solido/awesome-flutter

Sources:

Flutter Logo (Google): https://flutter.io/

Difficulty

• Intermediate

Description

In this Flutter Video Tutorial, we create a custom scroll animation for an infinite list view widget to demonstrate various core Flutter concepts. These concepts include, Physics Simulations, Constraints, Layout Builder Widgets, The Flutter Render Life Cycle, and Custom Scroll Physics Objects. This example works to help the user gain a basic grasp of these concepts so that they can better understand how the framework works overall.

Outline and Overview

Flutter is a Beta technology that was inspired by various other component based frameworks. While many of the concepts in Flutter are similar to these other frameworks, some of them are new and foreign. The render life cycle for instance is very different from the render cycle of component based web frameworks. This idea of Constraints and the layout builder widget is also fairly different when compared to what many UX developers are used to.

Outline for this Tutorial

Item 1: Rendering Widgets

Rendering is a very important part of any UX framework. In Flutter, there is a streamlined process that the rendering pipeline follows when the widgets need to be rebuilt. The primary Isolate sends a message to the Skia engine which then asks the native platform for the next vsync event. Once that vsync event happens, the Dart Code is executed and various steps are then preformed in sequence. The most relevant part of this process for our tutorial is the layout stage which happens after the widgets receive paint.

In this image you can see our infinite list view application and with the debug paint overlay active. This overlay gives us a little insight into how a flutter application is rendered. The big green arrows signify that the painting happens from top to bottom and the small green arrows on the sides of the screens show the max width for each of the constraints attached to the widgets. The larger green arrows pointing towards the text show the constants of the text widget that contains the index numbers.

Item 2: Contraints

Widgets in Flutter are rendered using the RenderBox Objects as an underlying basic element. These render boxes are given constraints by their parent widgets and they use those constraints as a guideline to how they should be rendered. Constraints are not specific sizes but rather a maximum and minimum width and height that the widget is allowed to exist in.

You can see in the builder callback function for the layout builder widget that the Box Constraint object is being passed in by its parent which is the material application widget. We further use these constraints in the Constrained Box widget that surrounds our list view. We specify the max width and max height for the children widget using these constraints. In this example, our Max Height can be infinite.

Item 3: Building an Infinite List View

Using this concept of Constraints to our advantage we are able to create an Infinite list view widget. To accomplish this, we ignore the item count property of the List View builder widget and instead fill in the item extent property. With the max width constraint fixed to a size of 400.0 pixels, we can now use this item extent property to change the size of the height for each of the items in our list view.

We specify our item extent and it indirectly changes the height of each of the List View widgets. The Item Extent itself lets us control the extent or area of each of these widgets. This, together with the set Max Width Constraints, will properly size the List View item's heights in the list view viewport.

Item 4: Adding Custom Scroll Physics

We are able to modify the scroll physics of our list view so that it will be friction-less by extending the Simulation and Scroll Physics Objects. The Simulation class allows us to modify the position and velocity of the list view. It lets us model the physics of the widget compared to time and a single dimension. We can then make use the create ballistic simulation method in the Scroll Physics class to specifically attach this simulation to the scrolling movement of the list view.

This animated GIF shows the normal scroll physics of a scroll-able list view in flutter. These physics act a bit like a ballistic pendulum with the user's finger acting as the ballistic object and the scrolling following the motion of the pendulum. Once the motion for the scrolling list view stops, however, then the movement comes to a complete halt.

In this animated GIF we can see the implemented scroll physics of our list view. Once we the scroll-able hits its max velocity, it will continue at that velocity indefinitely unless the user takes action to stop it. We can also set the velocity to be a specific number which will cause it to run until the user puts their finger down on the list view. This is all possible because we have an infinite list view.

Project GitHub Repository:

The Source Code for this project can be found here

Video Tutorial

Projects and Series

Stand Alone Projects:

• Dart Flutter Cross Platform Chat Application Tutorial
• Building a Temperature Conversion Application using Dart's Flutter Framework
• Managing State with Flutter Flux and Building a Crypto Tracker Application with Dart's Flutter Framework

Building a Calculator

• Building a Calculator Layout using Dart's Flutter Framework
• Finishing our Calculator Application with Dart's Flutter Framework

Movie Searcher Application

• Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 1)
• Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 2)
• Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 3, Final)

Minesweeper Game

• Building a Mine Sweeper Game using Dart's Flutter Framework (Part 1)
• Building a Mine Sweeper Game using Dart's Flutter Framework (Part 2)
• Building a Mine Sweeper Game using Dart's Flutter Framework (Part 3)
• Building a Mine Sweeper Game using Dart's Flutter Framework (Part 4, Final)

Weather Application

• Building a Weather Application with Dart's Flutter Framework (Part 1, Handling Complex JSON with Built Code Generation)
• Building a Weather Application with Dart's Flutter Framework (Part 2, Creating a Repository and Model)
• Building a Weather Application with Dart's Flutter Framework (Part 3, RxCommand (RxDart) and Adding an Inherited Widget)
• Building a Weather Application with Dart's Flutter Framework (Part 4, Using RxWidget to Build a Reactive User Interface)
• Localize and Internationalize Applications with Intl and the Flutter SDK in Dart's Flutter Framework

Curriculum

• Building a Multi-Page Application with Dart's Flutter Mobile Framework
• Making Http requests and Using Json in Dart's Flutter Framework
• Building Dynamic Lists with Streams in Dart's Flutter Framework
• Using GridView, Tabs, and Steppers in Dart's Flutter Framework
• Using Global Keys to get State and Validate Input in Dart's Flutter Framework
• The Basics of Animation with Dart's Flutter Framework
• Advanced Physics Based Animations in Dart's Flutter Framework
• Building a Drag and Drop Application with Dart's Flutter Framework
• Building a Hero Animation and an Application Drawer in Dart's Flutter Framework
• Using Inherited Widgets and Gesture Detectors in Dart's Flutter Framework
• Using Gradients, Fractional Offsets, Page Views and Other Widgets in Dart's Flutter Framework
• Making use of Shared Preferences, Flex Widgets and Dismissibles with Dart's Flutter framework
• Using the Different Style Widgets and Properties in Dart's Flutter Framework
• Composing Animations and Chaining Animations in Dart's Flutter Framework
• Building a Countdown Timer with a Custom Painter and Animations in Dart's Flutter Framework
• Reading and Writing Data and Files with Path Provider using Dart's Flutter Framework
• Exploring Webviews and the Url Launcher Plugin in Dart's Flutter Framework
• Adding a Real-time Database to a Flutter application with Firebase
• Building a List in Redux with Dart's Flutter Framework
• Managing State with the Scoped Model Pattern in Dart's Flutter Framework
• Authenticating Guest Users for Firebase using Dart's Flutter Framework
• How to Monetize Your Flutter Applications Using Admob
• Using Geolocator to Communicate with the GPS and Build a Map in Dart's Flutter Framework
• Managing the App Life Cycle and the Screen Orientation in Dart's Flutter Framework
• Making use of General Utility Libraries for Dart's Flutter Framework
• Interfacing with Websockets and Streams in Dart's Flutter Framework
• Playing Local, Network and YouTube Videos with the Video Player Plugin in Dart's Flutter Framework

---

Posted on Utopian.io - Rewarding Open Source Contributors

---