Initial zoom issue

[morvagergely]

Describe the bug
Whenever a chart is built with an initial zoom, the not-zoomed chart is built in the first frame, and the zoom is only applied after that.

To Reproduce

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _controller = TransformationController(Matrix4.identity()..scale(1.1));

  bool _show = false;

  void _toggle() {
    setState(() {
      _show = !_show;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _show
          ? LineChart(
              LineChartData(lineBarsData: [
                LineChartBarData(
                  spots: [
                    FlSpot(0, 1),
                    FlSpot(1, 2),
                    FlSpot(2, 3),
                    FlSpot(3, 2),
                    FlSpot(4, 1),
                  ],
                )
              ]),
              transformationConfig: FlTransformationConfig(
                transformationController: _controller,
                scaleAxis: FlScaleAxis.free,
              ),
            )
          : SizedBox(),
      floatingActionButton: FloatingActionButton(onPressed: _toggle),
    );
  }
}

Video

Screencast.From.2025-02-13.16-30-47.webm

Versions

• Flutter: 3.27.3
• FlChart: 0.70.2

I am planning to open a PR.

[enrique-lozano]

I fix this issue manually by moving the controller to the desired zoom directly in the build method:

  late TransformationController _transformationController;

  @override
  void initState() {
    _transformationController = TransformationController();

    super.initState();
  }

  @override
  void dispose() {
    _transformationController.dispose();
    super.dispose();
  }

Widget build(){
   _transformationController.value =
                      Matrix4.diagonal3Values(zoomValue, zoomValue, 1);

    return MyChartWidget();
}

[mluttmann]

We have this issue too. Setting the matrix in the build function does not work for us.

[istigal]

We have encountered the same issue. I see there is an open PR, any chance we can get it merged @imaNNeo?