feat: indicators panel resize and toolbar

example/lib/main.dart

@@ -118,12 +118,22 @@ class _FullscreenChartState extends State<FullscreenChart> {
   final InteractiveLayerController _interactiveLayerController =
       InteractiveLayerController();
 
+  // Exposed explicitly (instead of relying on DerivChart's own default
+  // repo) so the "Add sample indicators" button below can seed a few
+  // non-overlay indicators with one tap, to quickly try out the resizable
+  // indicator panel dividers. Not persisted across app restarts.
+  final AddOnsRepository<IndicatorConfig> _indicatorsRepo =
+      AddOnsRepository<IndicatorConfig>(
+    createAddOn: (Map<String, dynamic> map) => IndicatorConfig.fromJson(map),
+    sharedPrefKey: 'example',
+  );
+
   late PrefServiceCache _prefService;
 
   TradeType _currentTradeType = TradeType.riseFall;
 
   // Dynamic marker duration in milliseconds
-  int _markerDurationMs = 1000 * 5 * 1 * 1;
+  int _markerDurationMs = 1000 * 20 * 1 * 1;
   // PnL label lifetime after marker end in milliseconds
   static const int _pnlLabelLifetimeMs = 4000;
 
@@ -462,6 +472,7 @@ class _FullscreenChartState extends State<FullscreenChart> {
                     is connection_bloc.ConnectionConnectedState,
                 connectionStatus: _buildConnectionStatus(),
                 interactiveLayerController: _interactiveLayerController,
+                indicatorsRepo: _indicatorsRepo,
               ),
             ),
             _ActionButtonsRow(
@@ -471,6 +482,7 @@ class _FullscreenChartState extends State<FullscreenChart> {
               onUp: () => _addMarker(MarkerDirection.up),
               onDown: () => _addMarker(MarkerDirection.down),
               onClearMarkers: () => setState(_clearMarkers),
+              onAddSampleIndicators: _addSampleBottomIndicators,
             ),
             _BarriersControlsRow(
               onAddVerticalBarrier: () => setState(
@@ -618,6 +630,25 @@ class _FullscreenChartState extends State<FullscreenChart> {
     _tp = false;
   }
 
+  /// Adds a few sample bottom (non-overlay) indicators, so at least two
+  /// resizable dividers appear between the main chart and the indicator
+  /// panels without having to add indicators one-by-one via the dialog.
+  void _addSampleBottomIndicators() {
+    final Set<String> existingTitles = _indicatorsRepo.items
+        .map((IndicatorConfig config) => config.title)
+        .toSet();
+
+    for (final IndicatorConfig config in const <IndicatorConfig>[
+      RSIIndicatorConfig(),
+      MACDIndicatorConfig(),
+      StochasticOscillatorIndicatorConfig(),
+    ]) {
+      if (!existingTitles.contains(config.title)) {
+        _indicatorsRepo.add(config);
+      }
+    }
+  }
+
   Widget _buildConnectionStatus() => ConnectionStatusLabel(
         text: _connectionBloc.state is connection_bloc.ConnectionErrorState
             // ignore: lines_longer_than_80_chars
@@ -885,19 +916,6 @@ class _FullscreenChartState extends State<FullscreenChart> {
             direction: marker.direction,
             markerType: MarkerType.entrySpot,
           ),
-          ChartMarker(
-            epoch: (endEpoch - marker.epoch) ~/ 2 + marker.epoch,
-            quote: marker.quote,
-            direction: marker.direction,
-            text: '1',
-            markerType: MarkerType.checkpointLine,
-          ),
-          ChartMarker(
-            epoch: (endEpoch - marker.epoch) ~/ 2 + marker.epoch,
-            quote: marker.quote,
-            direction: marker.direction,
-            markerType: MarkerType.checkpointLineCollapsed,
-          ),
           ChartMarker(
             epoch: endEpoch,
             quote: marker.quote,
@@ -1044,6 +1062,7 @@ class _ChartSection extends StatelessWidget {
     required this.isConnected,
     required this.connectionStatus,
     required this.interactiveLayerController,
+    required this.indicatorsRepo,
   });
 
   final InteractiveLayerBehaviour interactiveLayerBehaviour;
@@ -1060,6 +1079,7 @@ class _ChartSection extends StatelessWidget {
   final bool isConnected;
   final Widget connectionStatus;
   final InteractiveLayerController interactiveLayerController;
+  final Repository<IndicatorConfig> indicatorsRepo;
 
   @override
   Widget build(BuildContext context) {
@@ -1079,6 +1099,7 @@ class _ChartSection extends StatelessWidget {
             isLive: isLive,
             opacity: opacity,
             onVisibleAreaChanged: onVisibleAreaChanged,
+            indicatorsRepo: indicatorsRepo,
           ),
         ),
         if (!isConnected)
@@ -1121,6 +1142,7 @@ class _ActionButtonsRow extends StatelessWidget {
     required this.onUp,
     required this.onDown,
     required this.onClearMarkers,
+    required this.onAddSampleIndicators,
   });
 
   final VoidCallback onSettingsPressed;
@@ -1129,6 +1151,7 @@ class _ActionButtonsRow extends StatelessWidget {
   final VoidCallback onUp;
   final VoidCallback onDown;
   final VoidCallback onClearMarkers;
+  final VoidCallback onAddSampleIndicators;
 
   @override
   Widget build(BuildContext context) {
@@ -1169,6 +1192,11 @@ class _ActionButtonsRow extends StatelessWidget {
             icon: const Icon(Icons.delete),
             onPressed: onClearMarkers,
           ),
+          IconButton(
+            tooltip: 'Add sample indicators (to test resizable panels)',
+            icon: const Icon(Icons.stacked_line_chart),
+            onPressed: onAddSampleIndicators,
+          ),
         ],
       ),
     );

lib/deriv_chart.dart

@@ -43,6 +43,7 @@ export 'src/add_ons/indicators_ui/zigzag_indicator/zigzag_indicator_config.dart'
 export 'src/add_ons/repository.dart';
 export 'src/deriv_chart/interactive_layer/interactive_layer_export.dart';
 export 'src/deriv_chart/chart/chart.dart';
+export 'src/deriv_chart/chart/panel_size/panel_size_repository.dart';
 export 'src/deriv_chart/chart/data_visualization/annotations/barriers/accumulators_barriers/accumulators_active_contract.dart';
 export 'src/deriv_chart/chart/data_visualization/annotations/barriers/accumulators_barriers/accumulators_closed_indicator.dart';
 export 'src/deriv_chart/chart/data_visualization/annotations/barriers/accumulators_barriers/accumulators_entry_spot_barrier.dart';

lib/src/add_ons/indicators_ui/adx/adx_indicator_config.dart

@@ -33,6 +33,7 @@ class ADXIndicatorConfig extends IndicatorConfig {
     bool showLastIndicator = false,
     String? title,
     super.number,
+    super.configId,
   }) : super(
           isOverlay: false,
           showLastIndicator: showLastIndicator,
@@ -82,6 +83,9 @@ class ADXIndicatorConfig extends IndicatorConfig {
   /// Histogram bar style
   final BarStyle barStyle;
 
+  @override
+  String get configSummary => '$period, $smoothingPeriod';
+
   @override
   Series getSeries(IndicatorInput indicatorInput) => ADXSeries(
         indicatorInput,
@@ -119,6 +123,7 @@ class ADXIndicatorConfig extends IndicatorConfig {
     bool? showLastIndicator,
     String? title,
     int? number,
+    String? configId,
   }) =>
       ADXIndicatorConfig(
         period: period ?? this.period,
@@ -135,5 +140,6 @@ class ADXIndicatorConfig extends IndicatorConfig {
         showLastIndicator: showLastIndicator ?? this.showLastIndicator,
         title: title ?? this.title,
         number: number ?? this.number,
+        configId: configId ?? this.configId,
       );
 }

lib/src/add_ons/indicators_ui/alligator/alligator_indicator_config.dart

@@ -32,6 +32,7 @@ class AlligatorIndicatorConfig extends IndicatorConfig {
     bool showLastIndicator = false,
     String? title,
     super.number,
+    super.configId,
     super.pipSize,
   }) : super(
           showLastIndicator: showLastIndicator,
@@ -82,6 +83,9 @@ class AlligatorIndicatorConfig extends IndicatorConfig {
   /// Lips line style.
   final LineStyle lipsLineStyle;
 
+  @override
+  String get configSummary => '$jawPeriod, $teethPeriod, $lipsPeriod';
+
   @override
   Series getSeries(IndicatorInput indicatorInput) => AlligatorSeries(
         indicatorInput,
@@ -129,6 +133,7 @@ class AlligatorIndicatorConfig extends IndicatorConfig {
     String? title,
     int? pipSize,
     int? number,
+    String? configId,
   }) =>
       AlligatorIndicatorConfig(
         jawPeriod: jawPeriod ?? this.jawPeriod,
@@ -145,6 +150,7 @@ class AlligatorIndicatorConfig extends IndicatorConfig {
         showLastIndicator: showLastIndicator ?? this.showLastIndicator,
         title: title ?? this.title,
         number: number ?? this.number,
+        configId: configId ?? this.configId,
         pipSize: pipSize ?? this.pipSize,
       );
 }

lib/src/add_ons/indicators_ui/aroon/aroon_indicator_config.dart

@@ -25,6 +25,7 @@ class AroonIndicatorConfig extends IndicatorConfig {
     bool showLastIndicator = false,
     String? title,
     super.number,
+    super.configId,
   }) : super(
           isOverlay: false,
           pipSize: pipSize,
@@ -52,6 +53,9 @@ class AroonIndicatorConfig extends IndicatorConfig {
   /// Down line style.
   final LineStyle downLineStyle;
 
+  @override
+  String get configSummary => '$period';
+
   @override
   Series getSeries(IndicatorInput indicatorInput) => AroonSeries(
         indicatorInput,
@@ -79,6 +83,7 @@ class AroonIndicatorConfig extends IndicatorConfig {
     bool? showLastIndicator,
     String? title,
     int? number,
+    String? configId,
   }) =>
       AroonIndicatorConfig(
         period: period ?? this.period,
@@ -88,5 +93,6 @@ class AroonIndicatorConfig extends IndicatorConfig {
         showLastIndicator: showLastIndicator ?? this.showLastIndicator,
         title: title ?? this.title,
         number: number ?? this.number,
+        configId: configId ?? this.configId,
       );
 }

lib/src/add_ons/indicators_ui/awesome_oscillator/awesome_oscillator_indicator_config.dart

@@ -21,6 +21,7 @@ class AwesomeOscillatorIndicatorConfig extends IndicatorConfig {
     int pipSize = 4,
     String? title,
     super.number,
+    super.configId,
     super.showLastIndicator,
   }) : super(
           isOverlay: false,
@@ -68,12 +69,14 @@ class AwesomeOscillatorIndicatorConfig extends IndicatorConfig {
     bool? showLastIndicator,
     int? pipSize,
     int? number,
+    String? configId,
   }) =>
       AwesomeOscillatorIndicatorConfig(
         barStyle: barStyle ?? this.barStyle,
         title: title ?? this.title,
         showLastIndicator: showLastIndicator ?? this.showLastIndicator,
         pipSize: pipSize ?? this.pipSize,
         number: number ?? this.number,
+        configId: configId ?? this.configId,
       );
 }

lib/src/add_ons/indicators_ui/bollinger_bands/bollinger_bands_indicator_config.dart

@@ -33,6 +33,7 @@ class BollingerBandsIndicatorConfig extends MAIndicatorConfig {
     this.showChannelFill = true,
     bool showLastIndicator = false,
     super.number,
+    super.configId,
   }) : super(
           period: period,
           movingAverageType: movingAverageType,
@@ -122,6 +123,7 @@ class BollingerBandsIndicatorConfig extends MAIndicatorConfig {
     bool? showChannelFill,
     bool? showLastIndicator,
     int? number,
+    String? configId,
     int? pipSize,
     bool? isOverlay,
     LineStyle? lineStyle,
@@ -140,5 +142,6 @@ class BollingerBandsIndicatorConfig extends MAIndicatorConfig {
         showChannelFill: showChannelFill ?? this.showChannelFill,
         showLastIndicator: showLastIndicator ?? this.showLastIndicator,
         number: number ?? this.number,
+        configId: configId ?? this.configId,
       );
 }