{"id":13551412,"url":"https://github.com/2d-inc/HistoryOfEverything","last_synced_at":"2025-04-03T01:32:49.916Z","repository":{"id":39619985,"uuid":"150902883","full_name":"2d-inc/HistoryOfEverything","owner":"2d-inc","description":"Flutter Launch Timeline Demo","archived":false,"fork":false,"pushed_at":"2021-09-22T19:36:20.000Z","size":10469,"stargazers_count":6496,"open_issues_count":54,"forks_count":983,"subscribers_count":142,"default_branch":"master","last_synced_at":"2024-10-29T15:35:26.252Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://medium.com/2dimensions/the-history-of-everything-981d989e1b45","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/2d-inc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-29T21:03:02.000Z","updated_at":"2024-10-29T02:25:38.000Z","dependencies_parsed_at":"2022-07-13T09:10:30.347Z","dependency_job_id":null,"html_url":"https://github.com/2d-inc/HistoryOfEverything","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2d-inc%2FHistoryOfEverything","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2d-inc%2FHistoryOfEverything/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2d-inc%2FHistoryOfEverything/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2d-inc%2FHistoryOfEverything/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/2d-inc","download_url":"https://codeload.github.com/2d-inc/HistoryOfEverything/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222905908,"owners_count":17055819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:01:47.808Z","updated_at":"2024-11-03T21:32:21.893Z","avatar_url":"https://github.com/2d-inc.png","language":"Dart","funding_links":[],"categories":["开源App","开源应用","Open Source Apps with Rive Animations","Dart","参考","Premium [🔝](#readme)","Open Source Apps"],"sub_categories":["高级","高品质的","Flutter","Premium"],"readme":"# The History of Everything\n\n\u003cimg align=\"right\" src=\"https://cdn.2dimensions.com/1_Start.gif\" height=\"400\"\u003e\n\nThe 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.\n\nThe concept for this app was inspired by the Kurzgesagt video, [Time: The History \u0026 Future of Everything](https://www.youtube.com/watch?v=5TbUxGZtwGI).\n\nThe app was built with [Flutter](https://flutter.io/) by [2Dimensions](https://www.2dimensions.com) and it's available on [Android](https://play.google.com/store/apps/details?id=com.twodimensions.timeline) and [iOS](https://itunes.apple.com/us/app/the-history-of-everything/id1441257460).\n\n## Usage\n\nMake sure you have Flutter installed on your local machine. For more instructions on how to install flutter, look [here](https://flutter.io/docs/get-started/install).\n```\ngit clone https://github.com/2d-inc/HistoryOfEverything.git\ncd HistoryOfEverything/app\ngit submodule init\ngit submodule update\nflutter run\n```\n\n## Overview\n\u003cimg align=\"right\" src=\"https://cdn.2dimensions.com/2_Scroll.gif\" height=\"400\"\u003e\n\nThe app consists of three main views:\n\n1. **Main Menu** - /app/lib/main_menu\u003cbr /\u003e\nThis 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.\u003cbr /\u003e\n\n2. **Timeline** - /app/lib/timeline\u003cbr /\u003e\nThis 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. \u003cbr/\u003e\nWhen 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.\n\n3. **ArticlePage** - /app/lib/article\u003cbr /\u003e\nThe ArticlePage displays the event animation, together with a full description of the event.\u003cbr/\u003e\n\n## Animated Widgets\n\n\u003cimg align=\"right\" src=\"https://cdn.2dimensions.com/3_Amelia.gif\" height=\"400\"\u003e\n\nThis relies heavily on the animations built on [2dimensions](https://www.2dimensions.com) and they are seamlessly integrated with Flutter by using the [Flare](https://pub.dartlang.org/packages/flare_flutter) and [Nima](https://pub.dartlang.org/packages/nima) libraries.\n\nOne 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. \n\nAn example can be found in /app/lib/article/timeline_entry_widget.dart \u003cbr/\u003e\nThis file contains two classes:\u003cbr/\u003e\n- `TimelineEntryWidget` that extends `LeafRenderObjectWidget`\n- VignetteRenderObject that extends `RenderBox`\n\n## LeafRenderObjectWidget\n\nThis class ([docs](https://docs.flutter.io/flutter/widgets/LeafRenderObjectWidget-class.html)) is a `Widget`: it can be inserted in any widget tree without any other default component: \n\n```\nContainer(\n  child: TimelineEntryWidget(\n        isActive: true,\n        timelineEntry: widget.article,\n        interactOffset: _interactOffset\n    )\n)\n```\n\nThis snippet is used in /app/lib/article/article_widget.dart\n\nThe `LeafRenderObjectWidget` is responsible for having a constructor and encapsulating the values that the `RenderObject` needs.\n\nThe following two overrides are also fundamental:\n- `createRenderObject()` \u003cbr /\u003e\nInstantiates the actual `RenderObject` in the Widget Tree;\n- `updateRenderObject()` \u003cbr /\u003e\nAny 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.\n\n## RenderObject\n\nAs specified in the [docs](https://docs.flutter.io/flutter/rendering/RenderObject-class.html), this is an object in the render tree, and it defines what and how its creator Widget will paint on the screen.\n\nThe key override here is `paint()`:\u003cbr /\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;the current `PaintingContext` exposes the `canvas`, and this class can draw, taking full advantage of the exposed API. \u003cbr /\u003e\nThe [Flare library](https://pub.dartlang.org/packages/flare_flutter), granted access to the `canvas`, draws the animation.\u003cbr/\u003e\nTo 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.\u003cbr/\u003e\nThis is all made possible by relying on Flutter's `SchedulerBinding.scheduleFrameCallback()`.\n\nThis is just a brief overview of how the Flare widgets can be customized for every experience.\n\n## License\nAll the animations in the `/assets` folder are distributed under the **CC-BY** license.\n\nAll the articles in `assets/articles` are from [Wikipedia](https://www.wikipedia.org/), and are thus distributed under the **GNU Free Documentation License**.\n\nThe rest of the repository's code and contents are distributed under the **MIT** license as specified in [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2d-inc%2FHistoryOfEverything","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F2d-inc%2FHistoryOfEverything","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2d-inc%2FHistoryOfEverything/lists"}