Series in SfCartesianChart Redraws During Keyboard Appearance/Disappearance

Question

I use a SfCartesianChart to display a large number of data points. Users can add new values via a bottom sheet that contains a TextField set with autoFocus. I've encountered an issue where the animation for opening/closing the bottom sheet becomes noticeably choppy. Through further investigation, I determined that the underlying cause is the redrawing of the chart series whenever the keyboard appears or disappears.

I am running the latest versions of everything. Thank you in advance :)

Here is a very basic demo:

(The dPrint 'MAPPER CALLED') is called multiple times when focusing/un-focusing the textfield inside the bottom sheet.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main(List<String> args) {
  runApp(_App());
}

class _App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: SfCartesianChart(
          series: [
            FastLineSeries<int, int>(
              dataSource: [0],
              xValueMapper: (_, __) => 0,
              yValueMapper: (_, __) {
                debugPrint('MAPPER CALLED');
                return 0;
              },
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (context) {
                return const Padding(
                  padding: EdgeInsets.all(50),
                  child: TextField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.red,
                    ),
                  ),
                );
              },
            );
          },
          label: const Text('Show bottom sheet'),
        ),
      ),
    );
  }
}

Hariharasudhan Kanagaraj · Answer

Hi 0921dma,We attempted to replicate the mentioned behavior using the
provided code snippet on the Windows platform, but we were unable to do so.
However, we were able to replicate the mentioned behavior on the Android
platform using the provided code snippet. To prevent multiple calls to the Mappers when focusing or
unfocusing the text field, you can set the resizeToAvoidBottomInset to true and
wrap the SfCartesianChart
inside the Column widget. When the resizeToAvoidBottomInset property is set to
true, the scaffold's floating widgets will adjust their size to avoid the
onscreen keyboard, and this will prevent multiple calls to the mapper.Kindly refer the code snippet below:

class _App extends StatelessWidget {
    @override
    Widget
  build(BuildContext context) {
      return MaterialApp(
        theme:
  ThemeData(primarySwatch: Colors.blue),
        home: Scaffold(
          resizeToAvoidBottomInset:
  true,
          body: SafeArea(
            child: Column(
              children: [
               
  SfCartesianChart(
                  series: [
                   
  FastLineSeries<int, int>(
                     
  dataSource: [0],
                      xValueMapper: (_, __) => 0,
                     
  yValueMapper: (_, __) {
                       
  debugPrint('MAPPER CALLED');
                       
  return 0;
                      },
                    ),
                  ],
                ),
              ],
            ),
          ),
         
  floatingActionButton: FloatingActionButton.extended(
            onPressed: () {
             
  showModalBottomSheet(
                context:
  context,
                builder:
  (context) {
                  return
  const Padding(
                    padding:
  EdgeInsets.all(50),
                    child:
  TextField(
                     
  decoration: InputDecoration(
                       
  filled: true,
                       
  fillColor: Colors.red,
                      ),
                    ),
                  );
                },
              );
            },
            label: const
  Text('Show bottom sheet'),
          ),
        ),
      );
    }
  }

Also attached the sample below for your reference and you can check
and modify the sample according to your needs. If you have further queries,
please get back to us.Regards,
Hari Hara Sudhan. K.Attachment: _184177_6c7a67c7.zip