main.dart

import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_app/cubits/app/app_cubit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider<AppCubit>(create: (BuildContext context) => AppCubit()),
      ],
      child: const MaterialApp(home: HomePage()),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double activeAmount = 0.5;

  @override
  Widget build(BuildContext context) {
    const data = [
      FlSpot(0, 1),
      FlSpot(1, 2),
      FlSpot(2, 1.5),
      FlSpot(3, 3),
      FlSpot(4, 3.5),
      FlSpot(5, 5),
      FlSpot(6, 8),
      FlSpot(7, 5),
      FlSpot(8, 7),
      FlSpot(9, 9),
      FlSpot(10, 8),
    ];
    const color = Colors.blue;
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            AspectRatio(
              aspectRatio: 2.0,
              child: LineChart(
                LineChartData(
                  minX: 0,
                  maxX: 10,
                  minY: 0,
                  maxY: 10,
                  lineBarsData: [
                    LineChartBarData(
                      spots: data,
                      dotData: const FlDotData(show: false),
                      barWidth: 4,
                      isCurved: true,
                      color: color.withOpacity(0.2),
                    ),
                    LineChartBarData(
                      spots: data,
                      dotData: FlDotData(
                        show: true,
                        checkToShowDot: (spot, barData) => spot.x == activeAmount,
                        getDotPainter: (spot, percent, barData, index) {
                          return FlDotCirclePainter(
                            radius: 4,
                            color: Colors.white,
                            strokeWidth: 3,
                            strokeColor: color,
                          );
                        },
                      ),
                      barWidth: 4,
                      isCurved: true,
                      color: color,
                      gradient: LinearGradient(
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                        colors: [
                          color,
                          color.withOpacity(0.0),
                        ],
                        stops: [
                          activeAmount / 10,
                          activeAmount / 10 + 0.001,
                        ],
                      ),
                    ),
                  ],
                ),
                duration: const Duration(milliseconds: 0),
              ),
            ),
            Slider(
              value: activeAmount,
              onChanged: (newVal) {
                setState(() {
                  activeAmount = newVal;
                });
              },
              divisions: 10,
              min: 0,
              max: 10,
            ),
          ],
        ),
      ),
    );
  }
}

activeline2.mov