timeline_carousel_pakage 1.0.0

A beautiful and customizable timeline carousel widget for Flutter. Display events, milestones, or any data in an elegant timeline format with smooth carousel navigation.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:timeline_carousel_pakage/timeline_carousel_pakage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Timeline Carousel Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TimelineExample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class TimelineExample extends StatefulWidget {
  @override
  _TimelineExampleState createState() => _TimelineExampleState();
}

class _TimelineExampleState extends State<TimelineExample> {
  final TimelineCarouselController _controller = TimelineCarouselController();
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timeline Carousel Demo'),
        backgroundColor: Colors.deepPurple,
        foregroundColor: Colors.white,
        elevation: 0,
      ),
      backgroundColor: Colors.grey[50],
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(height: 20),

            // Main Timeline Carousel
            Card(
              margin: EdgeInsets.symmetric(horizontal: 16),
              elevation: 8,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              child: TimelineCarousel(
                controller: _controller,
                height: 400,
                autoPlay: false,
                timelineColor: Colors.deepPurple,
                activeDotColor: Colors.deepPurple,
                inactiveDotColor: Colors.grey[400]!,
                cardBorderRadius: 16,
                showArrows: true,
                backgroundColor: Colors.white,
                padding: EdgeInsets.all(20),
                items: _buildProjectTimeline(),
                onItemChanged: (index) {
                  setState(() {
                    _currentIndex = index;
                  });
                },
              ),
            ),

            SizedBox(height: 20),

            // Control Buttons
            Card(
              margin: EdgeInsets.symmetric(horizontal: 16),
              child: Padding(
                padding: EdgeInsets.all(16),
                child: Column(
                  children: [
                    Text(
                      'Current Item: ${_currentIndex + 1} of ${_buildProjectTimeline().length}',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    SizedBox(height: 16),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        ElevatedButton.icon(
                          onPressed: () => _controller.previous(),
                          icon: Icon(Icons.arrow_back_ios),
                          label: Text("Previous"),
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.deepPurple,
                            foregroundColor: Colors.white,
                          ),
                        ),
                        ElevatedButton.icon(
                          onPressed: () => _controller.animateToIndex(0),
                          icon: Icon(Icons.first_page),
                          label: Text("First"),
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.orange,
                            foregroundColor: Colors.white,
                          ),
                        ),
                        ElevatedButton.icon(
                          onPressed: () => _controller.next(),
                          icon: Icon(Icons.arrow_forward_ios),
                          label: Text("Next"),
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.deepPurple,
                            foregroundColor: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),

            SizedBox(height: 20),

            // Second Example - Auto-play Timeline
            Card(
              margin: EdgeInsets.symmetric(horizontal: 16),
              elevation: 8,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              child: Column(
                children: [
                  Padding(
                    padding: EdgeInsets.all(16),
                    child: Text(
                      'Auto-Play Timeline (Image Gallery)',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.green[700],
                      ),
                    ),
                  ),
                  TimelineCarousel(
                    height: 350,
                    autoPlay: true,
                    autoPlayInterval: Duration(seconds: 4),
                    timelineColor: Colors.green,
                    activeDotColor: Colors.green,
                    inactiveDotColor: Colors.grey[400]!,
                    cardBorderRadius: 16,
                    showArrows: false,
                    timelineOnRight: true,
                    backgroundColor: Colors.white,
                    items: _buildImageTimeline(),
                  ),
                ],
              ),
            ),

            SizedBox(height: 20),

            // Third Example - Minimal Timeline
            Card(
              margin: EdgeInsets.symmetric(horizontal: 16),
              elevation: 8,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              child: Column(
                children: [
                  Padding(
                    padding: EdgeInsets.all(16),
                    child: Text(
                      'Minimal Timeline',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.teal[700],
                      ),
                    ),
                  ),
                  TimelineCarousel(
                    height: 280,
                    timelineColor: Colors.teal,
                    activeDotColor: Colors.teal,
                    cardBorderRadius: 12,
                    dotSize: 10,
                    lineThickness: 1.5,
                    showArrows: false,
                    backgroundColor: Colors.white,
                    items: _buildMinimalTimeline(),
                  ),
                ],
              ),
            ),

            SizedBox(height: 40),
          ],
        ),
      ),
    );
  }

  List<TimelineItem> _buildProjectTimeline() {
    return [
      TimelineItem(
        title: "Project Inception",
        subtitle: "Initial planning and research",
        dateTime: DateTime(2024, 1, 15),
        icon: Icons.lightbulb,
        dotColor: Colors.amber,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "The project began with extensive market research and feasibility studies.",
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 12),
            Container(
              padding: EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.amber[50],
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Colors.amber[200]!),
              ),
              child: Row(
                children: [
                  Icon(Icons.info, color: Colors.amber[700], size: 20),
                  SizedBox(width: 8),
                  Expanded(
                    child: Text(
                      "Key stakeholders identified and requirements gathered",
                      style: TextStyle(color: Colors.amber[800]),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

      TimelineItem(
        title: "Design Phase",
        subtitle: "UI/UX design and prototyping",
        dateTime: DateTime(2024, 2, 28),
        icon: Icons.design_services,
        dotColor: Colors.purple,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Created wireframes, mockups, and interactive prototypes.",
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 12),
            Row(
              children: [
                Expanded(
                  child: Container(
                    height: 60,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [Colors.purple[100]!, Colors.purple[300]!],
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Center(
                      child: Text(
                        "Wireframes",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ),
                SizedBox(width: 8),
                Expanded(
                  child: Container(
                    height: 60,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [Colors.purple[200]!, Colors.purple[400]!],
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Center(
                      child: Text(
                        "Prototypes",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),

      TimelineItem(
        title: "Development Sprint 1",
        subtitle: "Core functionality implementation",
        dateTime: DateTime(2024, 3, 20),
        icon: Icons.code,
        dotColor: Colors.blue,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Implemented core features and established the foundation.",
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 12),
            LinearProgressIndicator(
              value: 0.6,
              backgroundColor: Colors.grey[300],
              valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
            ),
            SizedBox(height: 8),
            Text("60% Complete", style: TextStyle(fontWeight: FontWeight.w600)),
          ],
        ),
      ),

      TimelineItem(
        title: "Testing & QA",
        subtitle: "Quality assurance and bug fixes",
        dateTime: DateTime(2024, 4, 25),
        icon: Icons.bug_report,
        dotColor: Colors.orange,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Comprehensive testing across all platforms and devices.",
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 12),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _buildTestingBadge("Unit Tests", Colors.green),
                _buildTestingBadge("Integration", Colors.blue),
              ],
            ),
          ],
        ),
      ),

      TimelineItem(
        title: "Launch",
        subtitle: "Product release and deployment",
        dateTime: DateTime(2024, 5, 30),
        icon: Icons.rocket_launch,
        dotColor: Colors.green,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Successfully launched to production with full monitoring.",
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 12),
            Container(
              padding: EdgeInsets.all(12),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.green[100]!, Colors.green[200]!],
                ),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                children: [
                  Icon(Icons.celebration, color: Colors.green[700]),
                  SizedBox(width: 8),
                  Expanded(
                    child: Text(
                      "🎉 Project successfully delivered on time!",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.green[800],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ];
  }

  Widget _buildTestingBadge(String label, Color color) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: color.withOpacity(0.3)),
      ),
      child: Text(
        label,
        style: TextStyle(
          color: color,
          fontWeight: FontWeight.w600,
          fontSize: 12,
        ),
      ),
    );
  }

  List<TimelineItem> _buildImageTimeline() {
    return [
      TimelineItem(
        title: "Mountain Peak",
        subtitle: "Adventure Photography",
        dateTime: DateTime(2024, 3, 15),
        icon: Icons.landscape,
        child: Container(
          height: 200,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Colors.blue[300]!, Colors.purple[300]!],
            ),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.landscape, size: 60, color: Colors.white),
                SizedBox(height: 8),
                Text(
                  "Beautiful mountain landscape captured during sunrise",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ],
            ),
          ),
        ),
      ),

      TimelineItem(
        title: "Ocean Waves",
        subtitle: "Seascape Collection",
        dateTime: DateTime(2024, 4, 22),
        icon: Icons.waves,
        child: Container(
          height: 200,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.cyan[300]!, Colors.blue[500]!],
            ),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.waves, size: 60, color: Colors.white),
                SizedBox(height: 8),
                Text(
                  "Dramatic ocean waves during golden hour",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ],
            ),
          ),
        ),
      ),

      TimelineItem(
        title: "Forest Trail",
        subtitle: "Nature Walk Series",
        dateTime: DateTime(2024, 5, 10),
        icon: Icons.forest,
        child: Container(
          height: 200,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Colors.green[400]!, Colors.teal[400]!],
            ),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.forest, size: 60, color: Colors.white),
                SizedBox(height: 8),
                Text(
                  "Peaceful forest trail with morning sunlight",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ],
            ),
          ),
        ),
      ),
    ];
  }

  List<TimelineItem> _buildMinimalTimeline() {
    return [
      TimelineItem.text(
        text:
            "Started learning Flutter development with basic widgets and layouts.",
        title: "Flutter Basics",
        dateTime: DateTime(2024, 1, 1),
        icon: Icons.school,
      ),

      TimelineItem.text(
        text: "Built first complete app with state management and navigation.",
        title: "First App",
        dateTime: DateTime(2024, 2, 15),
        icon: Icons.apps,
      ),

      TimelineItem.text(
        text: "Published package to pub.dev and contributed to open source.",
        title: "Package Published",
        dateTime: DateTime(2024, 4, 1),
        icon: Icons.publish,
      ),

      TimelineItem.text(
        text: "Advanced to complex animations and custom widget development.",
        title: "Advanced Flutter",
        dateTime: DateTime(2024, 6, 1),
        icon: Icons.star,
      ),
    ];
  }
}