Add web feature and fix example bug (chulwoo-park#13)

Author: chulwoo-park

.github/workflows/deploy_github_pages.yml

@@ -0,0 +1,32 @@
+name: Deploy github pages
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build:
+    name: Build Web
+    env:
+      my_secret: ${{secrets.commit_secret}}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: subosito/flutter-action@v1
+        with:
+          channel: 'beta'
+      - run: flutter config --enable-web
+      - run: flutter pub get
+      - run: |
+          cd example
+          flutter build web --release
+      - run: |
+          cd example/build/web
+          git init
+          git config --global user.email [email protected]
+          git config --global user.name chulwoo.park
+          git status
+          git remote add origin https://${{secrets.commit_secret}}@github.com/chulwoo-park/timelines.git
+          git checkout -b gh-pages
+          git add --all
+          git commit -m "Update gh-pages"
+          git push origin gh-pages -f

.gitignore

@@ -117,4 +117,6 @@ app.*.symbols
 !**/ios/**/default.pbxuser
 !**/ios/**/default.perspectivev3
 !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
-!/dev/ci/**/Gemfile.lock
+!/dev/ci/**/Gemfile.lock
+
+.fvm

example/lib/showcase/process_timeline.dart

@@ -102,12 +102,6 @@ class _ProcessTimelinePageState extends State<ProcessTimelinePage> {
             if (index <= _processIndex) {
               return Stack(
                 children: [
-                  // if (index < _processIndex)
-                  DotIndicator(
-                    size: 30.0,
-                    color: color,
-                    child: child,
-                  ),
                   CustomPaint(
                     size: Size(30.0, 30.0),
                     painter: _BezierPainter(
@@ -116,23 +110,27 @@ class _ProcessTimelinePageState extends State<ProcessTimelinePage> {
                       drawEnd: index < _processIndex,
                     ),
                   ),
+                  DotIndicator(
+                    size: 30.0,
+                    color: color,
+                    child: child,
+                  ),
                 ],
               );
             } else {
               return Stack(
                 children: [
-                  // if (index < _processIndex)
-                  OutlinedDotIndicator(
-                    borderWidth: 4.0,
-                    color: color,
-                  ),
                   CustomPaint(
                     size: Size(15.0, 15.0),
                     painter: _BezierPainter(
                       color: color,
                       drawEnd: index < processes.length - 1,
                     ),
                   ),
+                  OutlinedDotIndicator(
+                    borderWidth: 4.0,
+                    color: color,
+                  ),
                 ],
               );
             }
@@ -218,8 +216,8 @@ class _BezierPainter extends CustomPainter {
   @override
   void paint(Canvas canvas, Size size) {
     final paint = Paint()
-      ..color = color
-      ..style = PaintingStyle.fill;
+      ..style = PaintingStyle.fill
+      ..color = color;
 
     final radius = size.width / 2;
 
@@ -229,28 +227,27 @@ class _BezierPainter extends CustomPainter {
 
     var path;
 
-    if (drawEnd) {
-      angle = -pi / 4;
+    if (drawStart) {
+      angle = 3 * pi / 4;
       offset1 = _offset(radius, angle);
       offset2 = _offset(radius, -angle);
-
       path = Path()
         ..moveTo(offset1.dx, offset1.dy)
-        ..quadraticBezierTo(size.width, size.height / 2, radius + size.width, radius)
-        ..quadraticBezierTo(size.width, size.height / 2, offset2.dx, offset2.dy)
+        ..quadraticBezierTo(0.0, size.height / 2, -radius, radius) // TODO connector start & gradient
+        ..quadraticBezierTo(0.0, size.height / 2, offset2.dx, offset2.dy)
         ..close();
 
       canvas.drawPath(path, paint);
     }
-
-    if (drawStart) {
-      angle = 3 * pi / 4;
+    if (drawEnd) {
+      angle = -pi / 4;
       offset1 = _offset(radius, angle);
       offset2 = _offset(radius, -angle);
+
       path = Path()
         ..moveTo(offset1.dx, offset1.dy)
-        ..quadraticBezierTo(0.0, size.height / 2, -size.width, radius)
-        ..quadraticBezierTo(0.0, size.height / 2, offset2.dx, offset2.dy)
+        ..quadraticBezierTo(size.width, size.height / 2, size.width + radius, radius) // TODO connector end & gradient
+        ..quadraticBezierTo(size.width, size.height / 2, offset2.dx, offset2.dy)
         ..close();
 
       canvas.drawPath(path, paint);

example/pubspec.yaml

@@ -10,8 +10,11 @@ dependencies:
   flutter:
     sdk: flutter
 
+  # TODO use pub.dev version
   timelines:
-    path: ../
+    git:
+      url: https://github.com/chulwoo-park/timelines.git
+      ref: develop
 
   font_awesome_flutter: ^8.10.0
   url_launcher: ^5.7.10

example/web/index.html

@@ -11,7 +11,7 @@
     Fore more details:
     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
   -->
-  <base href="/">
+  <base href="/timelines/">
 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">