A stunning showcase of FL Chart capabilities with beautiful animations, interactive features, and modern UI design

This is a beautiful, interactive showcase of the FL Chart package for Flutter. It demonstrates how to create stunning, animated charts that will make your users go "Wow! 🤩"

Perfect for:

• 🎯 Portfolio projects to showcase your skills
• 📊 Learning FL Chart with real examples
• 🚀 Production apps that need beautiful data visualization

• Gradient backgrounds with smooth color transitions
• Glassmorphism effects and modern card designs
• Beautiful typography using Google Fonts (Poppins)
• Responsive layouts that work on all screen sizes

• Staggered entrance animations for chart cards
• Interactive hover effects with scale transformations
• Chart data animations that bring data to life
• Page transitions with custom slide animations

• Sales Growth Trends with smooth curves
• Temperature Variations over time
• Stock Price Movements with real-time feel
• Interactive tooltips and touch responses

• Revenue Analysis by product category
• App Downloads across platforms
• Team Performance metrics
• Animated bars with hover effects

• Market Share Analysis with interactive segments
• Expense Breakdown by category
• Traffic Sources visualization
• Touch-responsive sections with badges

• Skills Assessment for team members
• Product Comparison across features
• Multi-dimensional data visualization
• Custom axis labels and styling

• Sales vs Marketing correlation analysis
• User Behavior patterns
• Performance Metrics comparison
• Interactive data point exploration

• Flutter 3.32 or higher
• Dart 3.0 or higher
• A device or emulator to run the app

1. Clone the repository

   git clone https://github.com/amirbayat0/fl_chart_showcase.git
   cd fl_chart_showcase

2. Install dependencies

   flutter pub get

3. Run the app

   flutter run

flutter run -d chrome --web-port 8080

lib/
├── main.dart              # App entry point with theme configuration
├── pages/                 # Chart showcase pages
│   ├── home_page.dart     # Beautiful home with chart cards
│   ├── line_chart_page.dart    # Line chart examples
│   ├── bar_chart_page.dart     # Bar chart examples
│   ├── pie_chart_page.dart     # Pie chart examples
│   ├── radar_chart_page.dart   # Radar chart examples
│   └── scatter_chart_page.dart # Scatter chart examples
└── widgets/               # Reusable UI components
    └── chart_card.dart    # Animated chart selection cards

• Material 3 design principles
• Smooth animations that feel natural
• Interactive elements that respond to user input
• Beautiful gradients and shadows

• Intuitive navigation between chart types
• Touch-friendly interactions
• Responsive design for all screen sizes
• Accessibility considerations

• Efficient animations using Flutter's animation system
• Lazy loading of chart data
• Smooth 60fps animations
• Memory efficient chart rendering

1. Create a new page in lib/pages/
2. Add it to the home page navigation
3. Follow the existing pattern for consistency

• Update the color schemes in main.dart
• Modify chart-specific colors in each page
• Use the theme system for consistency

• Adjust animation durations in initState()
• Modify animation curves for different feels
• Add new animation types as needed

LineChart(
  LineChartData(
    lineBarsData: [
      LineChartBarData(
        spots: salesData,
        isCurved: true,
        gradient: LinearGradient(
          colors: [Colors.blue.shade400, Colors.blue.shade600],
        ),
        belowBarData: BarAreaData(
          show: true,
          gradient: LinearGradient(
            colors: [
              Colors.blue.shade400.withOpacity(0.3),
              Colors.blue.shade400.withOpacity(0.1),
            ],
          ),
        ),
      ),
    ],
  ),
)

BarChart(
  BarChartData(
    barGroups: revenueData.map((data) {
      return BarChartGroupData(
        x: data.index,
        barRods: [
          BarChartRodData(
            toY: data.value,
            color: data.color,
            borderRadius: BorderRadius.circular(10),
          ),
        ],
      );
    }).toList(),
  ),
)

• Touch responses on all chart types
• Tooltips with custom styling
• Hover effects and animations
• Selection states for data points

• Color schemes and gradients
• Typography and labels
• Grid lines and borders
• Axis configurations

• Data animations on load
• Interactive animations on touch
• Smooth transitions between states
• Performance optimized rendering

We love contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-chart)
3. Commit your changes (git commit -m 'Add amazing new chart type')
4. Push to the branch (git push origin feature/amazing-chart)
5. Open a Pull Request

• 🆕 New chart types (Area charts, Candlestick charts)
• 🎨 Additional themes (Dark mode, custom color schemes)
• 📱 Mobile optimizations (Touch gestures, haptic feedback)
• 🌍 Internationalization (Multi-language support)
• 🧪 Unit tests and widget tests

This project is licensed under the MIT License - see the LICENSE file for details.

• FL Chart Team for the amazing chart library
• Flutter Team for the incredible framework
• Material Design Team for the beautiful design system
• Google Fonts for the typography

• GitHub Issues: Report bugs or request features
• FL Chart: Official documentation