Merge pull request #23 from furkantektas/v0.1.0

V0.1.0

.github/workflows/publish-web-demo.yml

@@ -0,0 +1,24 @@
+name: Publish Web Demo
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Set up Flutter
+      uses: subosito/flutter-action@v2
+      with:
+        channel: stable
+        cache: true
+    - name: Deploy to GitHub Pages
+      uses: bluefireteam/flutter-gh-pages@v7
+      with:
+        workingDir: example
+        baseHref: /timeline_list/
+        webRenderer: html

.github/workflows/publish.yml

@@ -0,0 +1,11 @@
+name: Publish to pub.dev
+
+on:
+  push:
+    tags:
+    - 'v[0-9]+.[0-9]+.[0-9]+' # tag-pattern on pub.dev: 'v{{version}}'
+jobs:
+  publish:
+    permissions:
+      id-token: write # Required for authentication using OIDC
+    uses: dart-lang/setup-dart/.github/workflows/publish.yml@v1

.pubignore

@@ -0,0 +1,2 @@
+example/*
+doc/*

.vscode/launch.json

@@ -0,0 +1,51 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "timeline_list",
+            "request": "launch",
+            "type": "dart"
+        },
+        {
+            "name": "timeline_list (profile mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile"
+        },
+        {
+            "name": "timeline_list (release mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release"
+        },
+        {
+            "name": "example (html mode)",
+            "cwd": "example",
+            "request": "launch",
+            "type": "dart",
+            "deviceId": "chrome",
+            "flutterMode": "debug",
+            "args": [
+                "--web-renderer",
+                "html"
+            ]
+        },
+        {
+            "name": "example (profile mode)",
+            "cwd": "example",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile"
+        },
+        {
+            "name": "example (release mode)",
+            "cwd": "example",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release"
+        }
+    ]
+}

CHANGELOG.md

@@ -1,12 +1,36 @@
-## [0.0.1] - Initial release
+## [0.1.0] - 2024-11-19
 
-## [0.0.2] - Changing README
-    - Fix: Dart pub's markdown rendering issue
+### Breaking Changes
+- Upgraded to Flutter 3 and Dart 3.5
+- Simplified import system - now just import `timeline_list.dart`
+- Removed iOS/Android from example app, focusing on web support
+- Refactored marker system for better customization
 
-## [0.0.3] - Reverse option added
+### New Features
+- Added support for custom widget icons (#3, #12)
+- Introduced marker icon alignment options (top, center, bottom) (#14)
+- Added builder pattern for efficient timeline rendering
+- Improved support for different timeline positions (start, center, end)
 
-## [0.0.4] - ScrollPhysics added for custom scroll behaviors (thanks @JJCLane)
+### Improvements
+- Transparent timeline background for better theme integration (#21)
+- Enhanced icon alignment with different sized items (#19)
+- Better documentation and examples
+- New onboarding example showcasing timeline features
 
-## [0.0.5] - `primary` option added. (Thanks @mjhansen3)
+### Bug Fixes
+- Fixed icon alignment issues with custom-sized items
+- Resolved background color conflicts
 
 ## [0.0.6] - Support for Null Safety is now available.
+
+## [0.0.5] - `primary` option added. (Thanks @mjhansen3)
+
+## [0.0.4] - ScrollPhysics added for custom scroll behaviors (thanks @JJCLane)
+
+## [0.0.3] - Reverse option added
+
+## [0.0.2] - Changing README
+    - Fix: Dart pub's markdown rendering issue
+
+## [0.0.1] - Initial release

README.md

@@ -1,49 +1,129 @@
 # Flutter Timeline Widget
-[![pub package](https://img.shields.io/pub/v/timeline_list.svg)](https://pub.dartlang.org/packages/timeline_list)
-[![Build Status](https://travis-ci.org/furkantektas/timeline_list.svg?branch=master)](https://travis-ci.org/furkantektas/timeline_list)  [![codecov](https://codecov.io/gh/furkantektas/timeline_list/branch/master/graph/badge.svg?token=jDCYhfSuea)](https://codecov.io/gh/furkantektas/timeline_list)
+[![pub package](https://img.shields.io/pub/v/timeline_list.svg)](https://pub.dartlang.org/packages/timeline_list) [![Flutter Timeline List Web Demo](https://img.shields.io/badge/Web_demo-blue?logo=googlechrome&logoColor=white&link=https%3A%2F%2Ffurkantektas.github.io%2Ftimeline_list%2F)](https://furkantektas.github.io/timeline_list/)
 
-Displays a scrollable timeline with custom child widgets and custom icons.
+A highly customizable Flutter widget for displaying vertical timelines with custom markers, icons, and flexible positioning options.
 
-![Flutter Timeline List Screenshot](https://github.com/furkantektas/timeline_list/raw/master/doc/timeline_list.png?raw=true)
+![Flutter Timeline List Screenshot](./doc/timeline-grid.png)
 
+> [!WARNING]
+> 🦚 The documentation was created using LLMs. If you notice any errors or typos, please submit a Pull Request or create an issue.
+
+## Features
+
+- 🎯 Three timeline positions: `start` (left), `center`, or `end` (right)
+- 🎨 Fully customizable markers with any widget as content or icon
+- 📍 Flexible icon alignment: `top`, `center`, or `bottom` of markers
+- 🎯 Individual marker positioning for centered timelines
+- 🔄 Support for reversed timeline order
+- 📱 Custom scroll physics and controller support
 
 ## Installation
 
-In your `pubspec.yaml` file within your Flutter Project:
+Add this to your package's `pubspec.yaml` file:
 
 ```yaml
 dependencies:
-  timeline_list: ^0.0.3
+  timeline_list: ^0.1.0
 ```
 
-## Features
+## Usage
 
-- 3 different timeline alignments. `Left, Center, Right`.
-- On demand child building with `Timeline.builder`.
-- Custom icon and icon size support (icon sizes supported only on centered timeline).
+### Simple Timeline
 
-## Usage
+![Flutter Simple Timeline List Screenshot](doc/timeline-simple.png)
+
+```dart
+import 'package:timeline_list/timeline_list.dart';
+
+Timeline(
+  children: [
+    Marker(child: Text("Step 1")),
+    Marker(child: Text("Step 2")),
+    Marker(child: Text("Step 3"))
+  ],
+)
+```
+
+### Onboarding Example
+
+Here's a more advanced example showing an onboarding timeline with custom icons:
+
+![Flutter Onboarding Timeline List Screenshot](doc/timeline-onboarding.png)
 
 ```dart
-import 'package:timeline_list/timeline.dart';
-import 'package:timeline_list/timeline_model.dart';
-
-List<TimelineModel> items = [
-      TimelineModel(Placeholder(),
-          position: TimelineItemPosition.random,
-          iconBackground: Colors.redAccent,
-          icon: Icon(Icons.blur_circular)),
-      TimelineModel(Placeholder(),
-          position: TimelineItemPosition.random,
-          iconBackground: Colors.redAccent,
-          icon: Icon(Icons.blur_circular)),
-    ];
-    return Timeline(children: items, position: TimelinePosition.Center);
+var checkIcon = Container(
+    width: 16,
+    height: 16,
+    decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.green),
+    child: Icon(Icons.check, color: Colors.white, size: 12));
+var emptyIcon = Container(
+    width: 16,
+    height: 16,
+    decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.grey));
+return Scaffold(
+    appBar: AppBar(title: const Text("Onboarding example")),
+    body: Column(children: [
+      Timeline.builder(
+        context: context,
+        markerCount: 10,
+        properties: TimelineProperties(
+            iconAlignment: MarkerIconAlignment.center,
+            iconSize: 16,
+            timelinePosition: TimelinePosition.start),
+        markerBuilder: (context, index) => Marker(
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Text("Step ${index + 1}"),
+          ),
+          icon: index >= 8 ? emptyIcon : checkIcon,
+          position: MarkerPosition.left,
+        ),
+      ),
+    ]));
 ```
 
-## Example
+## Customization
+
+### Timeline Properties
+
+- `timelinePosition`: Controls the overall timeline position (`start`, `center`, `end`)
+- `iconAlignment`: Sets icon alignment relative to marker content
+- `iconSize`: Defines the size of marker icons
+- `lineWidth`: Sets the width of connecting lines
+- `lineColor`: Customizes the color of connecting lines
+- `itemGap`: Controls spacing between markers
+- `iconGap`: Sets gap between icon and marker content
+
+### Marker Properties
+
+- `child`: The main content widget of the marker
+- `icon`: Optional custom icon widget
+- `position`: Marker position for centered timelines (`left`, `right`)
+- `onTap`: Optional callback for marker tap events
+- `maxWidth`: Maximum width constraint for marker content
+
+## Examples
+
+Check out the [`example/`](https://github.com/furkantektas/timeline_list/tree/master/example) folder for complete sample applications, including:
+- Fully featured timeline with custom icons and widgets
+- Simple onboarding flow
+
+## Contributing
+
+This repo is looking for maintainers. Contributions are welcome! Please feel free to submit a Pull Request.
+
+[Thank you for all the contributors!](https://github.com/furkantektas/timeline_list/graphs/contributors)
 
-A sample timeline app can be found in the [`example/`](https://github.com/furkantektas/timeline_list/tree/master/example) folder.
+- [@samramez](https://github.com/samramez)
+- [@stijn1989](https://github.com/stijn1989)
+- [@JJCLane](https://github.com/JJCLane)
+- [@mjhansen3](https://github.com/mjhansen3)
 
+---
 
-![ehlibyte games](http://ehlibyte.com/images/ehlibyte-logo-small.png?raw=true)
+Sponsored by:
+<div style="text-align: center; background-color: #fff; padding: 20px">
+<a href="https://ehlibyte.com" target="_blank">
+    <img src="https://ehlibyte.com/images/ehlibyte-logo.svg?raw=true" alt="ehlibyte games" width="80" height="80" style="margin: 0 auto; display: block;">
+</a>
+</div>

example/.metadata

@@ -4,7 +4,27 @@
 # This file should be version controlled and should not be manually edited.
 
 version:
-  revision: 5391447fae6209bb21a89e6a5a6583cac1af9b4b
-  channel: beta
+  revision: "2663184aa79047d0a33a14a3b607954f8fdd8730"
+  channel: "stable"
 
 project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
+      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
+    - platform: web
+      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
+      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
+
+  # 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'