Adding background color to dot

example/.metadata

@@ -1,10 +1,36 @@
 # This file tracks properties of this Flutter project.
 # Used by Flutter tool to assess capabilities and perform upgrades etc.
 #
-# This file should be version controlled and should not be manually edited.
+# This file should be version controlled.
 
 version:
-  revision: 198df796aa80073ef22bdf249e614e2ff33c6895
-  channel: beta
+  revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
+  channel: stable
 
 project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
+      base_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
+    - platform: linux
+      create_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
+      base_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
+    - platform: macos
+      create_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
+      base_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
+    - platform: windows
+      create_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
+      base_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'

example/analysis_options.yaml

@@ -0,0 +1,29 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  # The lint rules applied to this project can be customized in the
+  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
+  # included above or to enable additional rules. A list of all available lints
+  # and their documentation is published at
+  # https://dart-lang.github.io/linter/lints/index.html.
+  #
+  # Instead of disabling a lint rule for the entire project in the
+  # section below, it can also be suppressed for a single line of code
+  # or a specific dart file by using the `// ignore: name_of_lint` and
+  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
+  # producing the lint.
+  rules:
+    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options

example/lib/component_page.dart

@@ -4,16 +4,18 @@ import 'package:timelines/timelines.dart';
 import 'widget.dart';
 
 class ComponentPage extends StatelessWidget {
+  const ComponentPage({Key? key}) : super(key: key);
+
   @override
   Widget build(BuildContext context) {
     final children = [
       _ComponentRow(
         name: 'Dot\nIndicator',
-        item: DotIndicator(),
+        item: const DotIndicator(),
       ),
       _ComponentRow(
         name: 'Outlined dot\nIndicator',
-        item: OutlinedDotIndicator(),
+        item: const OutlinedDotIndicator(),
       ),
       _ComponentRow(
         name: 'Container\nIndicator',
@@ -27,14 +29,14 @@ class ComponentPage extends StatelessWidget {
       ),
       _ComponentRow(
         name: 'Solid line\nConnector',
-        item: SizedBox(
+        item: const SizedBox(
           height: 20.0,
           child: SolidLineConnector(),
         ),
       ),
       _ComponentRow(
         name: 'Dashed line\nConnector',
-        item: SizedBox(
+        item: const SizedBox(
           height: 20.0,
           child: DashedLineConnector(),
         ),
@@ -63,7 +65,7 @@ class ComponentPage extends StatelessWidget {
       ),
       _ComponentRow(
         name: 'Complex TimelineNode',
-        item: SizedBox(
+        item: const SizedBox(
           height: 80.0,
           child: TimelineNode(
             indicator: Card(
@@ -81,17 +83,17 @@ class ComponentPage extends StatelessWidget {
       _ComponentRow(
         name: 'TimelineTile',
         item: TimelineTile(
-          oppositeContents: Padding(
-            padding: const EdgeInsets.all(8.0),
+          oppositeContents: const Padding(
+            padding: EdgeInsets.all(8.0),
             child: Text('opposite\ncontents'),
           ),
           contents: Card(
             child: Container(
-              padding: EdgeInsets.all(8.0),
-              child: Text('contents'),
+              padding: const EdgeInsets.all(8.0),
+              child: const Text('contents'),
             ),
           ),
-          node: TimelineNode(
+          node: const TimelineNode(
             indicator: DotIndicator(),
             startConnector: SolidLineConnector(),
             endConnector: SolidLineConnector(),
@@ -143,13 +145,13 @@ class ComponentPage extends StatelessWidget {
           child: FixedTimeline.tileBuilder(
             builder: TimelineTileBuilder.connectedFromStyle(
               contentsAlign: ContentsAlign.basic,
-              oppositeContentsBuilder: (context, index) => Padding(
-                padding: const EdgeInsets.all(8.0),
+              oppositeContentsBuilder: (context, index) => const Padding(
+                padding: EdgeInsets.all(8.0),
                 child: Text('opposite\ncontents'),
               ),
-              contentsBuilder: (context, index) => Card(
+              contentsBuilder: (context, index) => const Card(
                 child: Padding(
-                  padding: const EdgeInsets.all(8.0),
+                  padding: EdgeInsets.all(8.0),
                   child: Text('Contents'),
                 ),
               ),
@@ -168,13 +170,13 @@ class ComponentPage extends StatelessWidget {
           child: FixedTimeline.tileBuilder(
             builder: TimelineTileBuilder.connectedFromStyle(
               contentsAlign: ContentsAlign.reverse,
-              oppositeContentsBuilder: (context, index) => Padding(
-                padding: const EdgeInsets.all(8.0),
+              oppositeContentsBuilder: (context, index) => const Padding(
+                padding: EdgeInsets.all(8.0),
                 child: Text('opposite\ncontents'),
               ),
-              contentsBuilder: (context, index) => Card(
+              contentsBuilder: (context, index) => const Card(
                 child: Padding(
-                  padding: const EdgeInsets.all(8.0),
+                  padding: EdgeInsets.all(8.0),
                   child: Text('Contents'),
                 ),
               ),
@@ -191,13 +193,13 @@ class ComponentPage extends StatelessWidget {
         item: FixedTimeline.tileBuilder(
           builder: TimelineTileBuilder.connectedFromStyle(
             contentsAlign: ContentsAlign.alternating,
-            oppositeContentsBuilder: (context, index) => Padding(
-              padding: const EdgeInsets.all(8.0),
+            oppositeContentsBuilder: (context, index) => const Padding(
+              padding: EdgeInsets.all(8.0),
               child: Text('opposite\ncontents'),
             ),
-            contentsBuilder: (context, index) => Card(
+            contentsBuilder: (context, index) => const Card(
               child: Padding(
-                padding: const EdgeInsets.all(8.0),
+                padding: EdgeInsets.all(8.0),
                 child: Text('Contents'),
               ),
             ),
@@ -215,14 +217,14 @@ class ComponentPage extends StatelessWidget {
             // shrinkWrap: true,
             scrollDirection: Axis.horizontal,
             builder: TimelineTileBuilder.fromStyle(
-              contentsBuilder: (context, index) => Card(
+              contentsBuilder: (context, index) => const Card(
                 child: Padding(
-                  padding: const EdgeInsets.all(8.0),
+                  padding: EdgeInsets.all(8.0),
                   child: Text('Contents'),
                 ),
               ),
-              oppositeContentsBuilder: (context, index) => Padding(
-                padding: const EdgeInsets.all(8.0),
+              oppositeContentsBuilder: (context, index) => const Padding(
+                padding: EdgeInsets.all(8.0),
                 child: Text('opposite\ncontents'),
               ),
               itemCount: 20,
@@ -238,14 +240,14 @@ class ComponentPage extends StatelessWidget {
             // shrinkWrap: true,
             scrollDirection: Axis.horizontal,
             builder: TimelineTileBuilder.fromStyle(
-              contentsBuilder: (context, index) => Card(
+              contentsBuilder: (context, index) => const Card(
                 child: Padding(
-                  padding: const EdgeInsets.all(8.0),
+                  padding: EdgeInsets.all(8.0),
                   child: Text('Contents'),
                 ),
               ),
-              oppositeContentsBuilder: (context, index) => Padding(
-                padding: const EdgeInsets.all(8.0),
+              oppositeContentsBuilder: (context, index) => const Padding(
+                padding: EdgeInsets.all(8.0),
                 child: Text('opposite\ncontents'),
               ),
               indicatorStyle: IndicatorStyle.outlined,
@@ -263,14 +265,14 @@ class ComponentPage extends StatelessWidget {
             // shrinkWrap: true,
             scrollDirection: Axis.horizontal,
             builder: TimelineTileBuilder.fromStyle(
-              contentsBuilder: (context, index) => Card(
+              contentsBuilder: (context, index) => const Card(
                 child: Padding(
-                  padding: const EdgeInsets.all(8.0),
+                  padding: EdgeInsets.all(8.0),
                   child: Text('Contents'),
                 ),
               ),
-              oppositeContentsBuilder: (context, index) => Padding(
-                padding: const EdgeInsets.all(8.0),
+              oppositeContentsBuilder: (context, index) => const Padding(
+                padding: EdgeInsets.all(8.0),
                 child: Text('opposite\ncontents'),
               ),
               contentsAlign: ContentsAlign.reverse,
@@ -287,14 +289,14 @@ class ComponentPage extends StatelessWidget {
             // shrinkWrap: true,
             scrollDirection: Axis.horizontal,
             builder: TimelineTileBuilder.fromStyle(
-              contentsBuilder: (context, index) => Card(
+              contentsBuilder: (context, index) => const Card(
                 child: Padding(
-                  padding: const EdgeInsets.all(8.0),
+                  padding: EdgeInsets.all(8.0),
                   child: Text('Contents'),
                 ),
               ),
-              oppositeContentsBuilder: (context, index) => Padding(
-                padding: const EdgeInsets.all(8.0),
+              oppositeContentsBuilder: (context, index) => const Padding(
+                padding: EdgeInsets.all(8.0),
                 child: Text('opposite\ncontents'),
               ),
               contentsAlign: ContentsAlign.alternating,
@@ -309,14 +311,14 @@ class ComponentPage extends StatelessWidget {
           height: 500,
           child: Timeline.tileBuilder(
             builder: TimelineTileBuilder.fromStyle(
-              contentsBuilder: (context, index) => Card(
+              contentsBuilder: (context, index) => const Card(
                 child: Padding(
-                  padding: const EdgeInsets.all(8.0),
+                  padding: EdgeInsets.all(8.0),
                   child: Text('Contents'),
                 ),
               ),
-              oppositeContentsBuilder: (context, index) => Padding(
-                padding: const EdgeInsets.all(8.0),
+              oppositeContentsBuilder: (context, index) => const Padding(
+                padding: EdgeInsets.all(8.0),
                 child: Text('opposite\ncontents'),
               ),
               contentsAlign: ContentsAlign.alternating,
@@ -327,6 +329,61 @@ class ComponentPage extends StatelessWidget {
           ),
         ),
       ),
+      _ComponentRow(
+        name: 'Custom indicator widget',
+        item: Padding(
+          padding: const EdgeInsets.only(bottom: 8.0),
+          child: FixedTimeline.tileBuilder(
+            theme: TimelineThemeData(
+              nodePosition: 0,
+              color: Colors.blue,
+              direction: Axis.vertical,
+              connectorTheme: const ConnectorThemeData(
+                color: Colors.black,
+                space: 65,
+                indent: 0,
+                thickness: 2,
+              ),
+              indicatorTheme: IndicatorThemeData(
+                color: Theme.of(context).colorScheme.secondary,
+                size: 20,
+              ),
+            ),
+            builder: TimelineTileBuilder.connectedFromStyle(
+              indicatorWidget: const SizedBox(
+                width: 10,
+                height: 10,
+                child: CircularProgressIndicator(),
+              ),
+              connectionDirection: ConnectionDirection.before,
+              firstConnectorStyle: ConnectorStyle.transparent,
+              lastConnectorStyle: ConnectorStyle.transparent,
+              connectorStyleBuilder: (context, index) {
+                return ConnectorStyle.dashedLine;
+              },
+              indicatorStyleBuilder: (context, index) {
+                return IndicatorStyle.container;
+              },
+              itemExtent: null,
+              nodePositionBuilder: (BuildContext context, int index) {
+                return 0;
+              },
+              indicatorPositionBuilder: (BuildContext context, int index) {
+                return 0.5;
+              },
+              contentsBuilder: (context, index) {
+                return SizedBox(
+                    height: 100,
+                    width: 30,
+                    child: Container(
+                        alignment: Alignment.centerLeft,
+                        child: const Text('asd')));
+              },
+              itemCount: 3,
+            ),
+          ),
+        ),
+      ),
     ];
 
     return Scaffold(
@@ -335,7 +392,7 @@ class ComponentPage extends StatelessWidget {
         scrollDirection: Axis.vertical,
         child: Table(
           children: children,
-          columnWidths: {
+          columnWidths: const {
             0: FlexColumnWidth(1),
             1: FlexColumnWidth(2),
             2: FlexColumnWidth(0.3),
@@ -369,7 +426,7 @@ class _ComponentItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      constraints: BoxConstraints(
+      constraints: const BoxConstraints(
         minHeight: 65.0,
       ),
       child: Center(