Flutter Launch Timeline Demo

Overview

The History of Everything

The History of Everything is a vertical timeline that allows you to navigate, explore, and compare events from the Big Bang to the birth of the Internet. Events are beautifully illustrated and animated.

The concept for this app was inspired by the Kurzgesagt video, Time: The History & Future of Everything.

The app was built with Flutter by 2Dimensions and it's available on Android and iOS.

Usage

Make sure you have Flutter installed on your local machine. For more instructions on how to install flutter, look here.

git clone https://github.com/2d-inc/HistoryOfEverything.git
cd HistoryOfEverything/app
git submodule init
git submodule update
flutter run

Overview

The app consists of three main views:

  1. Main Menu - /app/lib/main_menu
    This is the initial view for the app when it opens up. It shows a search bar on top, three menu sections for each major time era, and three buttons on the bottom for accessing favorites, sharing a link to the store, and the about page.

  2. Timeline - /app/lib/timeline
    This view is displayed when an item from the menu is selected: the user is presented with a vertical timeline. It can be scrolled up and down, zoomed in and out.
    When an event is in view, a bubble will be shown on screen with a custom animated widget right next to it. By tapping on either, the user can access the ArticlePage.

  3. ArticlePage - /app/lib/article
    The ArticlePage displays the event animation, together with a full description of the event.

Animated Widgets

This relies heavily on the animations built on 2dimensions and they are seamlessly integrated with Flutter by using the Flare and Nima libraries.

One of Flutter's biggest strengths is its flexibility, because it exposes the architecture of its components, which can be built entirely from scratch: it's possible to create custom widgets out of the SDK's most basic elements.

An example can be found in /app/lib/article/timeline_entry_widget.dart
This file contains two classes:

  • TimelineEntryWidget that extends LeafRenderObjectWidget
  • VignetteRenderObject that extends RenderBox

LeafRenderObjectWidget

This class (docs) is a Widget: it can be inserted in any widget tree without any other default component:

Container(
  child: TimelineEntryWidget(
        isActive: true,
        timelineEntry: widget.article,
        interactOffset: _interactOffset
    )
)

This snippet is used in /app/lib/article/article_widget.dart

The LeafRenderObjectWidget is responsible for having a constructor and encapsulating the values that the RenderObject needs.

The following two overrides are also fundamental:

  • createRenderObject()
    Instantiates the actual RenderObject in the Widget Tree;
  • updateRenderObject()
    Any change to the parameters that are passed to the Widget can be reflected also on the UI, if needed. Updating a RenderObject will cause the object to redraw.

RenderObject

As specified in the docs, this is an object in the render tree, and it defines what and how its creator Widget will paint on the screen.

The key override here is paint():
    the current PaintingContext exposes the canvas, and this class can draw, taking full advantage of the exposed API.
The Flare library, granted access to the canvas, draws the animation.
To have the animation reproduce correctly, it's also necessary to call advance(elapsed) on the current FlutterActor each frame. Moreover, the current ActorAnimation requires that the function apply(time) is called on it to display it's correct interpolated values.
This is all made possible by relying on Flutter's SchedulerBinding.scheduleFrameCallback().

This is just a brief overview of how the Flare widgets can be customized for every experience.

License

All the animations in the /assets folder are distributed under the CC-BY license.

All the articles in assets/articles are from Wikipedia, and are thus distributed under the GNU Free Documentation License.

The rest of the repository's code and contents are distributed under the MIT license as specified in LICENSE.

Comments
  • Unable to run the app

    Unable to run the app

    I am getting this error 66 - Could not find a file named "pubspec.yaml". Even when it is present. I am a beginner in flutter so could you please help me out.

    opened by TanujChaniyari07 21
  • documentation -

    documentation - "getting started" doesn't seem to "just work"

    I try to follow the steps in getting started which are

    git clone https://github.com/2d-inc/timeline.git
    cd timeline/app
    flutter run
    

    when i use these steps i get an error as below

    flutter run
    Running "flutter packages get" in app...                         
    Could not find a file named "pubspec.yaml" in "/Users/neil/timeline/dependencies/Flare-Flutter".
     
    pub get failed (66)
    
    opened by neiljaywarner 10
  • Experiment with higher inertia for scrolling

    Experiment with higher inertia for scrolling

    Flinging doesn't seem right, at least not on Android. As a user, I am used to fling and see the contents scroll with inertia.

    Gif: screencapture-1541253095698 2018-11-03 14_53_56

    Expected scroll behavior: screencapture-1541253316814 2018-11-03 14_56_24

    (This could also be true for zooming, but I'm less sure about that.)

    tentative 
    opened by filiph 8
  • Few cleanups to be done

    Few cleanups to be done

    • [ ] Updating flare dependency in pubspec.yaml
    • [ ] Updating nima dependency in pubspec.yaml
    • [ ] Updating all int values to double to prevent this error -> error: The argument type 'int' can't be assigned to the parameter type 'double'.
    • [ ] Adding import Future to prevent this error -> error: Undefined class 'Future'. (undefined_class at [timeline] lib\main_menu\menu_data.dart:86)
    opened by knightcube 6
  • Improve scrolling behavior on the main menu screen

    Improve scrolling behavior on the main menu screen

    On Android, there are two problems with the main menu:

    1. The scroll container is narrower than the screen, so that the blue overscroll animation looks weird (it should cover the whole width of the screen).
    2. There should be more padding between the top of the screen and the subtitle ("Flutter Presents"), if we choose to keep it.

    Gif: screencapture-1541253036713 2018-11-03 14_58_51

    tentative 
    opened by filiph 4
  • unable to run the downloaded app, even after updating to androidX

    unable to run the downloaded app, even after updating to androidX

    Hi, I have downloaded the code, and updated to android x

    the nima & flare were not recognized pathes even after efforts, so replaced with nima: ^1.0.5 flare_flutter: ^2.0.6

    now the application loads but I'm getting exception in file timeline.dart (#496): flareAsset.actor.advance(0.0);

    please upload bug free project

    error_timeline

    opened by arfeenmushtaq 3
  • Can't display correctly

    Can't display correctly

    After following the usage section's steps, I got an error: resource android:attr/fontVariationSettings not found. So I changed compileSdkVersion to 28, it ran successfully. But can't display any media. Here's some screenshots: Screenshot_1583043164 Screenshot_1583043188 Thanks for your kind reply. :)

    opened by KernelErr 3
  • Tried calling: color=Instance of 'Color'

    Tried calling: color=Instance of 'Color'

    Hello,

    This is my first time cloning the HistoryOfEverything I follow the steps git clone https://github.com/2d-inc/HistoryOfEverything.git cd HistoryOfEverything/app git submodule init git submodule update flutter run

    and is working until I hit on any article to read it show this error: I/flutter (18745): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter (18745): The following NoSuchMethodError was thrown building Container(constraints: I/flutter (18745): BoxConstraints(0.0<=w<=Infinity, h=280.0)): I/flutter (18745): The setter 'color=' was called on null. I/flutter (18745): Receiver: null I/flutter (18745): Tried calling: color=Instance of 'Color' I/flutter (18745): I/flutter (18745): User-created ancestor of the error-causing widget was: I/flutter (18745): GestureDetector

    opened by superaldo 3
  • error with Nima-Flutter

    error with Nima-Flutter

    Error: The argument type 'Int32List' can't be assigned to the parameter type 'Uint16List'.

    • 'Int32List' is from 'dart:typed_data'.
    • 'Uint16List' is from 'dart:typed_data'. Try changing the type of the parameter, or casting the argument to 'Uint16List'. _canvasVertices = new ui.Vertices.raw(ui.VertexMode.triangles, _vertexBuffer, indices: _indices, textureCoordinates: _uvBuffer);
    opened by GuixiangCao 2
  • App compiles despite presence of A lot of compiler error..

    App compiles despite presence of A lot of compiler error..

    App compiles and runs but when I want to see the code, there are a lot of compiler errors, that I can't ignore. Am I missing something? How to fix the errors?

    screen shot 2019-01-19 at 4 22 19 pm screen shot 2019-01-19 at 4 22 54 pm
    opened by erluxman 2
  • Error running Gradle

    Error running Gradle

    I ran the commands in the readme below but came across an error with running Gradle. Startup commands:

    git clone https://github.com/2d-inc/HistoryOfEverything.git
    cd HistoryOfEverything/app
    git submodule init
    git submodule update
    flutter run
    

    Error: Launching lib/main.dart on SM G935P in debug mode... Initializing gradle... 1.7s Resolving dependencies...

    • Error running Gradle: ProcessException: Process "/Users/sagardesai/Documents/Personal/Repos/HistoryOfEverything/app/android/gradlew" exited abnormally:

    FAILURE: Build failed with an exception.

    • Where: Build file '/Users/sagardesai/Documents/Personal/Repos/HistoryOfEverything/app/android/app/build.gradle' line: 53

    • What went wrong: A problem occurred evaluating project ':app'.

    path may not be null or empty string. path='null'

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org

    BUILD FAILED in 1s Command: /Users/sagardesai/Documents/Personal/Repos/HistoryOfEverything/app/android/gradlew app:properties

    Please review your Gradle project setup in the android/ folder.

    Any idea what could be going on?

    opened by sagardesai90 2
  • How to open file extension .flr for translate articles?

    How to open file extension .flr for translate articles?

    Hi, friends!

    I want translate this app for portuguese brazil (pt-br). But, I can't open the .flr extension files :/

    How can I open these files? Which program should I use? In notepad, it is unconfigured.

    opened by lucas-cella 0
  • Upgrade to Android embedding v2, add support for Android 12 and web platform.

    Upgrade to Android embedding v2, add support for Android 12 and web platform.

    :green_heart: feat:

    • Add web platform.

    :hammer: fix:

    • Upgrades to Android embedding v2.
    • Upgrades SDK to 31(Android 12).
    • Upgrades flutter packages to their latest version.

    :star2: style:

    • Reformat code with dart format.
    opened by dirname 0
  • Bug in Menu Page: wrong state of plus icon when tapped fast

    Bug in Menu Page: wrong state of plus icon when tapped fast

    Problem: If someone clicks any section in the Menu Page fast twice, the state of the plus icon isn't right.

    Location of code responsible: file: /main_menu/main_menu_section.dart method: _toggleExpand() line no: 85

    Possible solution: shift the setState part after switch and call return in empty switch case.

    Bug Image:

    Screenshot_2021-06-25-16-46-17-679_com.twodimensions.timeline.jpg

    opened by vkbaloda 0
  • Your project is not running except it is showing following errors

    Your project is not running except it is showing following errors

    lib/bloc_provider.dart:51:18: Error: The method 'inheritFromWidgetOfExactType' isn't defined for 
    the class 'BuildContext'.
     - 'BuildContext' is from 'package:flutter/src/widgets/framework.dart' ('/C:/src/flutter/packages/flutter/lib/src/widgets/framework.dart').
    Try correcting the name to the name of an existing method, or defining a method named 'inheritFromWidgetOfExactType'.
            (context.inheritFromWidgetOfExactType(BlocProvider) as BlocProvider);
                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    lib/bloc_provider.dart:60:18: Error: The method 'inheritFromWidgetOfExactType' isn't defined for 
    the class 'BuildContext'.
     - 'BuildContext' is from 'package:flutter/src/widgets/framework.dart' ('/C:/src/flutter/packages/flutter/lib/src/widgets/framework.dart').
    Try correcting the name to the name of an existing method, or defining a method named 'inheritFromWidgetOfExactType'.
            (context.inheritFromWidgetOfExactType(BlocProvider) as BlocProvider);
                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_markdown-0.2.0/lib/src/builder.dart:326:49: Error: The getter 'children' isn't defined for the class 'InlineSpan'.
     - 'InlineSpan' is from 'package:flutter/src/painting/inline_span.dart' ('/C:/src/flutter/packages/flutter/lib/src/painting/inline_span.dart').
    Try correcting the name to the name of an existing getter, or defining a getter or field named 'children'.
            List<TextSpan> children = previous.text.children != null
                                                    ^^^^^^^^
    /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_markdown-0.2.0/lib/src/builder.dart:327:41: Error: The getter 'children' isn't defined for the class 'InlineSpan'.
     - 'InlineSpan' is from 'package:flutter/src/painting/inline_span.dart' ('/C:/src/flutter/packages/flutter/lib/src/painting/inline_span.dart').
    Try correcting the name to the name of an existing getter, or defining a getter or field named 'children'.
              ? new List.from(previous.text.children)
                                            ^^^^^^^^
    
                                                                            
    FAILURE: Build failed with an exception.
    
    * Where:
    Script 'C:\src\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 991
    
    * What went wrong:
    Execution failed for task ':app:compileFlutterBuildDebug'.
    > Process 'command 'C:\src\flutter\bin\flutter.bat'' finished with non-zero exit value 1
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
    
    * Get more help at https://help.gradle.org
    
    BUILD FAILED in 40s
    Running Gradle task 'assembleDebug'...
    Running Gradle task 'assembleDebug'... Done                        44.6s
    Exception: Gradle task assembleDebug failed with exit code 1
    PS D:\Workspace\Testing\HistoryOfEverything\app>
    
    
    opened by arslankaleem7229 1
Generate a timeline for a list

Timeline A flutter package that allows you to create basic timelines on your flutter application. This is customizable and easy to plugin to your appl

Rejish Radhakrishnan 65 Nov 10, 2022
Women Apparel flutter Application UI demo

Women Apparel Application An user interface sample application of women apparel in flutter. Project Created & Maintained By MultiQoS Pvt. Ltd. Demo Ap

null 8 Oct 31, 2022
Flutter ripple animation demo

flutter_ripple_animation_demo Demo Screen Getting Started This project is a starting point for a Flutter application. A few resources to get you start

FlutterDevs 24 Jun 6, 2022
A demo pos app

pos_demo A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Samuel Abada 9 Mar 1, 2022
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

Subir Chakraborty 132 Nov 13, 2022
This is a Flutter URL preview plugin for Flutter that previews the content of a URL

flutter_link_preview This is a URL preview plugin that previews the content of a URL Language: English | 中文简体 Special feature Use multi-processing to

yung 67 Nov 2, 2022
Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter Liquid Swipe liquid Swipe animation is amazing and its Created for iOS P

Jahongir Anvarov 6 Dec 1, 2022
A candy sorter game made with Flutter for the march flutter challenge.

A candy sorter game made with Flutter for the march flutter challenge.

Debjeet Das 1 Apr 9, 2022
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

Jeremiah Ogbomo 2.7k Dec 30, 2022
A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

null 442 Dec 27, 2022
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 879 Dec 31, 2022
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

null 472 Jan 9, 2023
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 6 Apr 26, 2022
Flutter UI Challenges

Introduction ?? Zoo is a small, simple and beautiful app that lists 3d model of animals. Before we start, you can take a look at the app: Usage ?? To

Sanjeev Madhav 58 Dec 22, 2022
A Flutter app with flip animation to view profiles of friends. 🌟

Flip View Made with ?? in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Shubham Soni 68 Sep 23, 2022
Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Roi Peker 49 Nov 14, 2022
Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Ali Riza Reisoglu 11 Jan 4, 2023
💙 Google Classroom Clone using Flutter, GCP

Introduction ?? Classroom is a Google Classroom clone built using ?? Flutter. Before we start, you can take a look at the app: Screenshots ?? Key Feat

Sanjeev Madhav 20 Dec 14, 2022