⌚️ A general flutter timeline widget based on real-world application references

Last update: Dec 21, 2022

Overview

framework	platform	tags	title
flutter	Android, iOS, Web, macOS, Linux, Windows	flutter, timeline, flutter timeline, timeline tile	flutter timeline

flutter_timeline

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

events; Widget _buildTimeline() { return TimelineTheme( data: TimelineThemeData(lineColor: Colors.blueAccent), child: Timeline( indicatorSize: 56, events: events, )); } void _addEvent() { setState(() { events.add(plainEventDisplay); }); } ">

  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!)

Also check out...

flutter_layouts

references

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

Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Dec 16, 2022

A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

Dec 13, 2022

A credit card widget for Flutter application.

Dec 27, 2022

The color of the widget is different with the counter application

GoldenTestのお試しをしてみた https://pub.dev/packages/golden_toolkit このライブラリを使って、検証するちなみにマスターのスクリーンショットをGoldenというらしい。カウンターアプリでWidgetのカラーが違う場合をテストしてみた OK想定 NG

Oct 18, 2021

Code generation for Flutter Padding widgets based on your constants

Oct 20, 2022

A Flutter sticky headers & index ListView. Based on scrollable_positioned_list.

Language: English | 中文简体 azlistview A Flutter sticky headers & index ListView. Based on scrollable_positioned_list. AzListView, SuspensionView, IndexB

Jan 7, 2023

Flutter Carousel Pro - A Flutter Carousel widget

Carousel Extended A Flutter Carousel widget. Usage As simple as using any flutter Widget. Based on Carousel Pro but extended to be able to navigate be

Dec 7, 2020

🟥 A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

Oct 8, 2022

React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | Português Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Dec 29, 2022

Comments

Automatic spacing based on time of entries

I'm curious if there is a way to make the timeline adjust where items appear based on the gap in time between events. For example items that are five minutes apart might be spaced 5 px. Whereas items an hour apart would have more spacing say 20 px.

If this isn't something that can be done automatically in the library, I'd be any thoughts you had on how to manually do this in the app using the library.

opened by bbrosius 6
Possible to save events ?

Hello and thank you for this package that I searched. I work great for me but I don't found how to use sharedpreference to save event and load when I init the app. Thank you
help wanted

opened by nitneuq33000 1

itemGap bigger than 24 wont work.

      return TimelineTheme(
          data: TimelineThemeData(lineColor: ThemeColors.grey400, itemGap: 24),
          child: Timeline(
            events: rows,
          ));

above code will create empty space between events

bug

opened by softmarshmallow 0

Can your package work with a video_player to create the timeline?

Hi :) Thanks you for such great package, and sorry if I have chosen the wrong topic (it is not a bug or a feature request. It is just a lame question) So I would like to create the timeline (or something like archive) for my videostream. The issue is quite non-trivial and hard, because videostream dosen't have the end. I could say, it is infinite videostream if we would scroll it back. Also the timeline should be under the videostream and I would like to have acess to it by double tap. So my question is could I customize it like I described above? And could I make the post-request to put two timestapms? Can these package work with API-request

opened by ingvilow 0

Releases(0.1.1+12)

0.1.1+12(Sep 3, 2020)

Source code(tar.gz)
Source code(zip)
0.0.4+7(Aug 31, 2020)

Source code(tar.gz)
Source code(zip)
0.0.4+6(Aug 31, 2020)

Source code(tar.gz)
Source code(zip)
0.0.4+5(Aug 27, 2020)

0.0.4+5
Source code(tar.gz)
Source code(zip)
0.0.4+4(Aug 26, 2020)

Source code(tar.gz)
Source code(zip)
0.0.1-test(Aug 25, 2020)

this is a test release
Source code(tar.gz)
Source code(zip)

Owner

Universe

Automating front end development. [email protected]

GitHub https://softmarshmallow.github.io/flutter-timeline/

Flutter widget form select a date in horizontal timeline with customizable styles.

Flutter widget form select a date in horizontal timeline with customizable styles. Getting Started You can use this package when you need to add a dat

158 Dec 2, 2022

Displays a scrollable timeline with custom child widgets and custom icons.

Flutter Timeline Widget Displays a scrollable timeline with custom child widgets and custom icons. Installation In your pubspec.yaml file within your

375 Nov 20, 2022

Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

48 Dec 1, 2022

A flutter package to control rebuilds of a widget based on updates of a Listenable

A flutter package to control rebuilds of a widget based on updates of a Listenable. What is Grab? Grab is similar to ValueListenablebuiler or Animated

5 Dec 3, 2022

A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

127 Dec 22, 2022

A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

1 Nov 25, 2021

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

1.7k Jan 7, 2023

A widget lib that the widget in this lib can react to flutter ScrollController's offset

Language: English | 中文简体 linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

8 Oct 16, 2022

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

8 Apr 15, 2022

A Flutter widget that will give a Glitch Animation Effect to it's child widget.

GlitchEffect A Flutter widget that will give a Glitch Animation Effect to it's child widget. Installation Add the latest version of package to your pu

6 Nov 25, 2022