• Stars
    star
    387
  • Rank 110,971 (Top 3 %)
  • Language
    Dart
  • License
    MIT License
  • Created over 4 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

⌚️ Flutter timelines
framework platform tags title
flutter
Android, iOS, Web, macOS, Linux, Windows
flutter, timeline, flutter timeline, timeline tile
flutter timeline

flutter_timeline

logo

a fully customizable & general timeline widget, based on real-world application references

  • fully customizable indicator dot
  • support spacing between indicator dot and lines
  • ✅ support spacing between event (items) but leaving the line connected
  • uses custom paint, but yet, indicator and body are fully customizable.
  • 2 real-world demos
  • ✅ L2R support
  • anchor support
  • global offset support
  • item offset support
  • ✅ supported & used by enterprise, constantly updated, used on production application.

Installation

dependencies:
  flutter_timeline: latest

usage

simple

  TimelineEventDisplay get plainEventDisplay {
    return TimelineEventDisplay(
        child: TimelineEventCard(
          title: Text("just now"),
          content: Text("someone commented on your timeline ${DateTime.now()}"),
        ),
        indicator: TimelineDots.of(context).circleIcon);
  }

  List<TimelineEventDisplay> events;

  Widget _buildTimeline() {
    return TimelineTheme(
        data: TimelineThemeData(lineColor: Colors.blueAccent),
        child: Timeline(
          indicatorSize: 56,
          events: events,
        ));
  }

  void _addEvent() {
    setState(() {
      events.add(plainEventDisplay);
    });
  }

using offset

Widget _buildTimeline() {
  return Timeline(
      indicatorSize: 56,
      events: events,
      altOffset: Offset(0, -24) // set offset
  );
}

using anchor & offset

  TimelineEventDisplay get plainEventDisplay {
    return TimelineEventDisplay(
        anchor: IndicatorPosition.top,
        indicatorOffset: Offset(0, 24),
        child: TimelineEventCard(
          title: Text("multi\nline\ntitle\nawesome!"),
          content: Text("someone commented on your timeline ${DateTime.now()}"),
        ),
        indicator: randomIndicator);
  }

complex example

simple example (run it now!)

more documentation available at github

Sponsors

Also check out...

flutter_layouts

references

https://www.pinterest.com/official_softmarshmallow/flutter-timeline/

More Repositories

1

grida

Free and Open Canvas for Humans and Machines
TypeScript
1,819
star
2

assistant

🤖 Bring your Figma design & development pipeline to the next level - with design to code, in-design-content-management, component management, tools for faster design
TypeScript
573
star
3

code

Design to Code Engine
TypeScript
226
star
4

cors.sh

Sick of CORS Errors?
TypeScript
192
star
5

legacy

Archived
TypeScript
142
star
6

base

☁️ BASE - Grida's open cloud platform
TypeScript
94
star
7

dynamix

📱 dynamix - The missing bridge for web / webview for hybrid apps
TypeScript
73
star
8

flutter

Grida Flutter Support - Behind techs & packages
TypeScript
57
star
9

ui-dataset

A pre labelled dataset for ui element / layout detection
47
star
10

grida.co

🌉 A Grida main website & documentations
TypeScript
30
star
11

figma-sdk

🎨 Design SDK, Supercharged Figma API & Plugin Development
TypeScript
28
star
12

nothing

Next generation Graphics engine built with WebGPU and Rust
TypeScript
20
star
13

ui-labeller

label your image dataset on figma for realtime collaboration and data centralization
JavaScript
18
star
14

figma-archives

Figma Files Scraper for Research & Studies
Python
18
star
15

CoLI

Computer Language Interface. A Code builder (json, jsx, js, ts, dart, css, xml, html, python) AST Builder / Parser
TypeScript
17
star
16

boring

😶 A very boring text editor engine like notion. yet free and open to use
TypeScript
15
star
17

console

[Under development] Grida console for managing your designs, asset, translations with collaboration.
TypeScript
13
star
18

figma-view

React figma renderer component
TypeScript
12
star
19

inapp-bridge

🌉 web view & native app inter communication protocol for smarter hybrid apps
TypeScript
12
star
20

context

📖 UI/UX context detection engine
11
star
21

design-lint

🖍 reflect design linting specifications
TypeScript
11
star
22

vscode

vscode extension for Grida apps
TypeScript
11
star
23

code-like-ui

ui controls seamlessly embedded in code style block
TypeScript
11
star
24

roadmap

🚴‍♂️ Roadmap, Feature requests, and Discussions repository
10
star
25

base-sdk

Grida Cloud BASE SDK for nodejs / browser
TypeScript
10
star
26

editor-ui

Editor UI Framework for React - used by enterprise level applications - such as Grida, nothing.app, designto.codes, surf.codes and boring.so
TypeScript
9
star
27

engines

🛰️ AI Powered Grida Engines
Jupyter Notebook
9
star
28

examples

Dart
8
star
29

design-file-converter

➡️🎨➡️🎨 Convert your design from sketch figma xd bridged - to - sketch figma xd bridged.
8
star
30

reflect-core-ts

reflect core definitions on typescript
TypeScript
7
star
31

ui-crawler

ui crawler - Not following site's robots.txt policy. (use it with your own obligation)
Python
7
star
32

schema

Visual data IDE & Modules
Dart
6
star
33

ddd

open 3D resources, free to use, use for ML data set
5
star
34

pyast-ts

python typescript (ts / js / jsx / tsx) ast parser using standard typescript package
Python
5
star
35

design-server

Structure & SDK for building realtime collaboration backend service
5
star
36

scenes

Grida Scenes - npm `@scenes`
TypeScript
4
star
37

dns

Open Domain Registarar - We take no extra fees for registering domain
TypeScript
4
star
38

cli

`grida` command line interface
TypeScript
4
star
39

H2I

Html2Img as a service
TypeScript
4
star
40

figma-api

Faster Figma proxy api with caching
4
star
41

G11n

🏳️‍🌈 G11n - A Visual translation platform for Apps, Webs and Games.
TypeScript
4
star
42

brand.grida.co

Grida branding resources, opened.
JavaScript
4
star
43

schema-studio

👩‍🎨 bridged schema studio built on flutter
Dart
4
star
44

virtual-keyboard

A virtual keyboard for testing mobile devices environment on desktop web (non emulated) environment
4
star
45

plugin-sdk

develop plugin for your own needs on bridged platform
4
star
46

throw.new

https://throw.new - An Error website
TypeScript
4
star
47

The-Bundle

The Bundle - Open Source Graphics Asset Repository
Python
3
star
48

.grida

.bridged configuration specs for Bridged App and Code extensions
TypeScript
3
star
49

stickers

Stickers for the humanity
3
star
50

grida.studio

Grida Studios - Creatives Agency
TypeScript
3
star
51

.github

.github configuration & contributing guideline for all bridged projects
3
star
52

packages.grida.co

Bridged design pack, extensions and plugins community repository
JavaScript
3
star
53

functions

🧮 useful set of functions used for developing real-world applications
TypeScript
3
star
54

framework

Untitled. A Visual design & development framework, like Unity, but for Apps.
3
star
55

blogs

Bridged blogs - anyone can publish on bridged blog
TypeScript
3
star
56

edu.grida.co

Free & Open Edu framework
3
star
57

coli-web-builder

jsx syntax tree builder for web applications. react, vue, svelte, etc..
TypeScript
3
star
58

appbox

Drag & Drop editor for production level ui generation
JavaScript
2
star
59

contents-crawler

a fully customizable web contents crawler for collecting ml dataset
Python
2
star
60

awesome-designs

2
star
61

contributing-and-license

contribution guideline and license documentations
2
star
62

grida-preview

A Grida Preview Mobile app to preview & share apps that are instantly converted from design.
2
star
63

flutter-preview

Flutter Instant preview extension For VSCode
2
star
64

code.grida.co

Design to code as a web editor
2
star
65

ant-design-builder

Ant design react syntax builder
TypeScript
2
star
66

chrome-extension

chrome extension for bridged platform - realtime translation editing and more
TypeScript
2
star
67

west

🏇 The Wild West of quests and rewards
TypeScript
2
star
68

jetpack-compose-builder

A CoLI Based Android Jetpack Compose UI Builder for TS
2
star
69

policies

grida's policies as code
TypeScript
2
star
70

grida-links

Grida system services url constants & builders
TypeScript
2
star
71

analytics

Bridged internal analytics components
TypeScript
1
star
72

clickclick.design

ui/ux design patterns website & data source
JavaScript
1
star
73

echo

Echo is a telemetry service for your CLI Applications
1
star
74

tiny-mini-micro

A list of tiny, mini and micro tools for development
JavaScript
1
star
75

fe-examples

frontend examples built with bridged
Dart
1
star
76

hereis.design

Share your designs
JavaScript
1
star
77

emails

Visual email service for building services. npm `@mails`
1
star
78

grida-mobile-app

bridged mobile app built uppon flutter
Dart
1
star
79

docs

A Grida documentation repository (ARCHIVED)
1
star
80

github-archives

PL Datasource from public github repositories
Python
1
star
81

screen-sizes

device list & screen size list updated on monthly basis. used for reflect.bridged.xyz
TypeScript
1
star
82

chatgpt-board

A Visual board to organize your ideas, conversations with chatGPT
1
star
83

dsdoc

Design system document website builder built upon docusaurus for storybook.js users
1
star
84

serverless-prisma-webpack-nest-server-template

NestJS + Serverless + Prisma + Webpack Template
TypeScript
1
star
85

rebel

Rebel is an annual developer conference by grida
1
star
86

stile

Stiling engine for reflect design
1
star
87

admin.grida.co

Admin console for bridged users & also used by internal bridged teams
1
star