Merge pull request #3 from softmarshmallow/beta

Beta

Author: softmarshmallow

README.md

@@ -57,7 +57,7 @@ dependencies:
 https://www.pinterest.com/official_softmarshmallow/flutter-timeline/
 
 
-## simple example
+## simple example [(run it now!)](https://softmarshmallow.github.io/flutter-timeline/)
 ![demo app](./docs/images/mac-ss.png)
 ![demo app](./docs/images/mac-ss-2.png)
 ![demo app](./docs/images/mac-ss-3.png)

example/lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:example/screen/cms_comments_demo.dart';
+import 'package:example/screen/github_activity_demo.dart';
 import 'package:example/screen/plain_timeline_demo.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_timeline/flutter_timeline.dart';
@@ -19,7 +20,8 @@ class TimelineDemoApp extends StatelessWidget {
       ),
       routes: {
         PlainTimelineDemoScreen.routeName: (c) => PlainTimelineDemoScreen(),
-        CmsCommentsDemoScreen.routeName: (c) => CmsCommentsDemoScreen(),
+        DeskTimelineDemoScreen.routeName: (c) => DeskTimelineDemoScreen(),
+        GithubActivityDemo.routeName: (c) => GithubActivityDemo(),
       },
       home: DemoHomePage(title: 'Flutter Timeline Demo'),
     );
@@ -33,13 +35,18 @@ List<DemoScreen> demos = [
       cover: null,
       route: PlainTimelineDemoScreen.routeName),
   DemoScreen(
-      name: "cms / e-commerce with comments",
-      description: "demo for creating timeline such like shopify",
+      name: "github activity",
+      description: "github's activity timeline demo",
       cover: null,
-      route: CmsCommentsDemoScreen.routeName),
+      route: GithubActivityDemo.routeName),
   DemoScreen(
-      name: "plain timeline",
-      description: "simplest timeline demo",
+      name: "genoplan desk",
+      description: "genoplan's desk crm app timeline demo",
+      cover: null,
+      route: DeskTimelineDemoScreen.routeName),
+  DemoScreen(
+      name: "shopify",
+      description: "timeline demo from shopify admin",
       cover: null,
       route: PlainTimelineDemoScreen.routeName),
 ];

example/lib/screen/cms_comments_demo.dart

@@ -2,14 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:flutter_timeline/flutter_timeline.dart';
 import 'package:flutter_timeline/timeline.dart';
 
-class CmsCommentsDemoScreen extends StatefulWidget {
+class DeskTimelineDemoScreen extends StatefulWidget {
   static const routeName = "/demo/cms-comments";
 
   @override
-  State<StatefulWidget> createState() => _CmsCommentsDemoScreenState();
+  State<StatefulWidget> createState() => _DeskTimelineDemoScreenState();
 }
 
-class _CmsCommentsDemoScreenState extends State<CmsCommentsDemoScreen> {
+class _DeskTimelineDemoScreenState extends State<DeskTimelineDemoScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(

example/lib/screen/github_activity_demo.dart

@@ -0,0 +1,97 @@
+import 'package:example/themes/github_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_timeline/flutter_timeline.dart';
+
+class GithubActivityDemo extends StatefulWidget {
+  static const routeName = "/demo/github-activity";
+
+  @override
+  State<StatefulWidget> createState() => _GithubActivityDemoState();
+}
+
+class _GithubActivityDemoState extends State<GithubActivityDemo> {
+  @override
+  Widget build(BuildContext context) {
+    return Theme(data: makeGithubTheme(), child: buildScreen());
+  }
+
+  Widget buildScreen() {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("github"),
+      ),
+      body: buildBody(),
+    );
+  }
+
+  Widget buildBody() {
+    return SingleChildScrollView(
+      child: Column(
+        children: [buildTimeline()],
+      ),
+    );
+  }
+
+  Widget buildTimeline() {
+    return Timeline(events: [TimelineEventDisplay(child: Text("wow"))]);
+  }
+}
+
+/// github's timeline card (the embedded type of card, not event itself)
+///  <div class="profile-timeline-card bg-white border border-gray-dark rounded-1 p-3">
+///      <svg class="octicon octicon-issue-closed closed d-inline-block mt-1 float-left" title="Closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 0110.65-5.003.75.75 0 00.959-1.153 8 8 0 102.592 8.33.75.75 0 10-1.444-.407A6.5 6.5 0 011.5 8zM8 12a1 1 0 100-2 1 1 0 000 2zm0-8a.75.75 0 01.75.75v3.5a.75.75 0 11-1.5 0v-3.5A.75.75 0 018 4zm4.78 4.28l3-3a.75.75 0 00-1.06-1.06l-2.47 2.47-.97-.97a.749.749 0 10-1.06 1.06l1.5 1.5a.75.75 0 001.06 0z"></path></svg>
+///   <div class="ml-4">
+///      <h3 class="lh-condensed my-0">
+///        <a class="text-gray-dark" data-hovercard-type="issue" data-hovercard-url="/nuxt/content/issues/339/hovercard" href="/nuxt/content/issues/339">use content theme on existing nuxt project</a>
+///      </h3>
+///
+///        <div class="text-gray mb-0 mt-2 ">
+///          <p><a href="https://github.com/nuxt/content/edit/dev/docs/content/en/themes-docs.md">https://github.com/nuxt/content/edit/dev/docs/content/en/themes-docs.md</a>
+///this example is outdated and wont work.
+///<span class="pl-k">import</span> <span class="pl-s1">theme</span> <span class="pl-k">from</span> <span class="pl-s">'@nuxt/content-th…</span></p>
+///        </div>
+///
+///      <div class="f6 text-gray mt-2">
+///        10
+///        comments
+///      </div>
+///    </div>
+///  </div>
+class TimelineCard extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(),
+    );
+  }
+}
+
+/// a indicator used at github activity timeline
+/// <span class="discussion-item-icon">
+///     <svg class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
+///  </span>
+class DiscussionItemIcon extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(32)),
+          color: Colors.grey),
+      child: Icon(Icons.fiber_manual_record),
+    );
+  }
+}
+
+/// timeline date indicator by github
+/// <h3 class="profile-timeline-month-heading bg-white d-inline-block h6 pr-2 py-1">
+///     August <span class="text-gray">2020</span>
+///    </h3>
+class TimelineMonthHeading extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      "data",
+      style: Theme.of(context).textTheme.headline3,
+    );
+  }
+}

example/lib/screen/plain_timeline_demo.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_timeline/flutter_timeline.dart';
 import 'package:flutter_timeline/timeline_theme.dart';
@@ -15,6 +17,7 @@ class _PlainTimelineDemoScreenState extends State<PlainTimelineDemoScreen> {
   void initState() {
     super.initState();
     events = [
+      smallEventDisplay,
       plainEventDisplay,
       TimelineEventDisplay(
           child: Card(
@@ -41,13 +44,46 @@ class _PlainTimelineDemoScreenState extends State<PlainTimelineDemoScreen> {
     );
   }
 
+  TimelineEventDisplay get smallEventDisplay {
+    return TimelineEventDisplay(
+        child: Card(
+          child: TimelineEventCard(
+            title: Text("click the + button"),
+            content: Text("to add a new event item"),
+          ),
+        ),
+        indicatorSize: 12,
+        indicator: Container(
+          width: 12,
+          height: 12,
+          decoration: BoxDecoration(color: Colors.blueAccent),
+        ));
+  }
+
+  Widget get randomIndicator {
+    var candidates = [
+      TimelineDots.of(context).circleIcon,
+      Container(
+        width: 16,
+        height: 16,
+        decoration: BoxDecoration(
+          color: Colors.blueAccent,
+          borderRadius: BorderRadius.all(Radius.circular(4)),
+        ),
+      ),
+    ];
+    final _random = new Random();
+    var element = candidates[_random.nextInt(candidates.length)];
+    return element;
+  }
+
   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);
+        indicator: randomIndicator);
   }
 
   List<TimelineEventDisplay> events;

example/lib/themes/github_theme.dart

@@ -0,0 +1,4 @@
+import 'package:flutter/material.dart';
+
+ThemeData makeGithubTheme() =>
+    new ThemeData(appBarTheme: AppBarTheme(color: Colors.black));

example/pubspec.lock

@@ -7,14 +7,21 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.4.1"
+    version: "2.4.2"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.0"
+  characters:
+    dependency: transitive
+    description:
+      name: characters
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.0"
   charcode:
     dependency: transitive
     description:
@@ -35,7 +42,14 @@ packages:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.12"
+    version: "1.14.13"
+  expandable:
+    dependency: "direct main"
+    description:
+      name: expandable
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.1.4"
   fake_async:
     dependency: transitive
     description:
@@ -59,14 +73,14 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.4"
+    version: "0.0.4+4"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.6"
+    version: "0.12.8"
   meta:
     dependency: transitive
     description:
@@ -99,7 +113,7 @@ packages:
       name: stack_trace
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.9.3"
+    version: "1.9.5"
   stream_channel:
     dependency: transitive
     description:
@@ -127,14 +141,14 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.16"
+    version: "0.2.17"
   typed_data:
     dependency: transitive
     description:
       name: typed_data
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.6"
+    version: "1.2.0"
   vector_math:
     dependency: transitive
     description:
@@ -143,4 +157,5 @@ packages:
     source: hosted
     version: "2.0.8"
 sdks:
-  dart: ">=2.7.0 <3.0.0"
+  dart: ">=2.9.0-14.0.dev <3.0.0"
+  flutter: ">=1.12.0 <2.0.0"

example/pubspec.yaml

@@ -27,6 +27,8 @@ dependencies:
   flutter_timeline:
     path: "../"
 
+  expandable: ^4.1.4
+
 dev_dependencies:
   flutter_test:
     sdk: flutter

lib/event_item.dart

@@ -4,9 +4,13 @@ class TimelineEventDisplay {
   TimelineEventDisplay(
       {@required @required this.child,
       this.indicator,
+      this.indicatorSize,
       this.forceLineDrawing = false});
 
   final Widget child;
+
+  /// if not provided, use the default indicator size
+  final double indicatorSize;
   final Widget indicator;
 
   /// enables indicator line drawing even no indicator is passed.
@@ -15,6 +19,11 @@ class TimelineEventDisplay {
   bool get hasIndicator {
     return indicator != null;
   }
+
+  @override
+  String toString() {
+    return "Instance of TimelineEventDisplay:: indicator size = $indicatorSize";
+  }
 }
 
 class TimelineEventCard extends StatelessWidget {

lib/indicator_position.dart

@@ -0,0 +1,5 @@
+enum IndicatorPosition{
+  top,
+  center,
+  bottom
+}