How can I make flutter 2 finger zoom?

Question

There is a datatable in a page in Flutter, I want to zoom in and out of this table or page with two fingers. Can anyone offer a solution ? My main goal here is just to zoom in and out. Is there a widget for this? I couldn't find a way, what can I do? Can you help me ?

There is a video in the link

I have specified all my table codes below. You can review and have details here are my codes

ListView(children: <Widget>[
              SizedBox(
                width: double.infinity,
                child: Padding(
                  padding: EdgeInsets.fromLTRB(size.width * 0.03,
                      size.width * 0.1, size.width * 0.03, size.width * 0.00),
                  child: TextField(
                    cursorColor: BaseData.vadenHomeSiyah,
                    controller: txtPaletNo,
                    // focusNode: unitCodeCtrlFocusNode,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                        focusedBorder: OutlineInputBorder(
                          borderSide: const BorderSide(
                              color: Color.fromARGB(255, 0, 0, 0), width: 2.0),
                          borderRadius: BorderRadius.circular(25.0),
                        ),
                        border: UnderlineInputBorder(),
                        labelText: 'Palet No',
                        labelStyle: TextStyle(
                            color: Colors.black, fontSize: size.width * 0.05),
                        filled: true,
                        isDense: true,
                        fillColor: Colors.white.withOpacity(0.2)),

                    //işlemler
                    onSubmitted: (value) {
                      setState(() {
                        paletRaporYuklendimi = true;
                      });
                      seciliPaletRaporGetir();
                    },
                    onChanged: (text) {},
                  ),
                  // TextField(
                  //   controller: searchController,
                  //   decoration: const InputDecoration(
                  //     hintText: 'Ara...',
                  //     border: OutlineInputBorder(),
                  //   ),
                  //   onChanged: _onSearchTextChanged,
                  // ),
                ),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(size.width * 0.00,
                    size.width * 0.08, size.width * 0.00, size.width * 0.00),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width,
                  child: FittedBox(
                    child: paletRaporYuklendimi
                        ? Center(
                            child: Padding(
                              padding: EdgeInsets.all(size.width * 0.2),
                              child: const CircularProgressIndicator(
                                color: Colors.black,
                              ),
                            ),
                          )
                        : DataTable(
                            dataRowHeight: size.width * 0.4,
                            columns: const <DataColumn>[
                              DataColumn(
                                label: Text(
                                  'Palet No',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w900,
                                      fontSize: 30),
                                ),
                              ),
                              DataColumn(
                                label: Text(
                                  'Paket No',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w900,
                                      fontSize: 30),
                                ),
                              ),
                              DataColumn(
                                label: Text(
                                  'Tarih',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w900,
                                      fontSize: 30),
                                ),
                              ),
                              DataColumn(
                                label: Text(
                                  'Hareket Tip',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w900,
                                      fontSize: 30),
                                ),
                              ),
                              DataColumn(
                                label: Text(
                                  'Hücre Kodu',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w900,
                                      fontSize: 30),
                                ),
                              ),
                              DataColumn(
                                label: Text(
                                  'Hareket Turu',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w900,
                                      fontSize: 30),
                                ),
                              ),
                              DataColumn(
                                label: Text(
                                  'Cari Isim',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w900,
                                      fontSize: 30),
                                ),
                              ),
                            ],
                            rows: List.generate(filterList.length, (index) {
                              final item = filterList[index];
                              return DataRow(
                                cells: [
                                  DataCell(Text(
                                    item.PALETNO ?? "",
                                    style: const TextStyle(
                                        fontWeight: FontWeight.w900,
                                        fontSize: 30),
                                  )),
                                  DataCell(Text(
                                    item.PAKETNO.toString(),
                                    style: const TextStyle(
                                        fontWeight: FontWeight.w900,
                                        fontSize: 30),
                                  )),
                                  DataCell(Text(
                                    item.TARIH ?? "",
                                    style: const TextStyle(
                                        fontWeight: FontWeight.w900,
                                        fontSize: 30),
                                  )),
                                  DataCell(item.HAREKETTIPI == "G"
                                      ? Text(
                                          item.HAREKETTIPI ?? "",
                                          style: const TextStyle(
                                              fontWeight: FontWeight.w900,
                                              fontSize: 30,
                                              color: Colors.green),
                                        )
                                      : Text(
                                          item.HAREKETTIPI ?? "",
                                          style: const TextStyle(
                                              fontWeight: FontWeight.w900,
                                              fontSize: 30,
                                              color: Colors.red),
                                        )),
                                  DataCell(Text(
                                    item.HUCREKODU ?? "",
                                    style: const TextStyle(
                                        fontWeight: FontWeight.w900,
                                        fontSize: 30),
                                  )),
                                  DataCell(Text(
                                    item.HAREKETTURU ?? "",
                                    style: const TextStyle(
                                        fontWeight: FontWeight.w900,
                                        fontSize: 30),
                                  )),
                                  DataCell(Text(
                                    item.CARIISIM ?? "",
                                    style: const TextStyle(
                                        fontWeight: FontWeight.w900,`your text`
                                        fontSize: 30),
                                  )),
                                ],
                              );
                            }),
                          ),
                  ),
                ),
              ),
               if (filterList.length > 0)
                  Padding(
                    padding:  EdgeInsets.all(size.width * 0.03),
                    child:  Text(
                     "Listelenen Kayıt Sayısı: " +
                          filterList.length.toString(),
                      textAlign: TextAlign.right,style: TextStyle(color: Colors.green,fontWeight: FontWeight.bold),
                    ),
                  )
                else
                  Text("")
            ]),

https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html — Nagual, Jun 02 '23 at 08:28

score 1 · Answer 1 · answered Jun 02 '23 at 09:12

PRETTY WORKING SOLUTION ✅

To achieve two fingers zoom in flutter, you can use the InteractiveViewer built-in widget provided by flutter.

Here is how you can use it:

InteractiveViewer(
  boundaryMargin: EdgeInsets.all(double.infinity),
  minScale: 0.1,
  maxScale: 2.0,
  child: YourContentWidget(),
)

score 0 · Accepted Answer · answered Jun 02 '23 at 09:22

Use InteractiveViewer and wrap the widget you want to zoom in or out, you can specify the max and min zoom with fields minScale and maxScale, and, what is also very nice, you can use a TransformationController, like this one below, for example, and apply it to your InteractiveViewer Widget and enable also zooming in and out by controls:

final zoomTransformationController = TransformationController();

 void _zoomIn(){
   zoomTransformationController.value.scale(2);
 }
 void _zoomOut(){
   zoomTransformationController.value.scale(0.9);
 }


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

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

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: InteractiveViewer(
        boundaryMargin: const EdgeInsets.all(20.0),
        minScale: 0.1,
        maxScale: 2,
 transformationController: zoomTransformationController,
        child: Container(
          ...
        ),
      ),
    );
  }
}

it worked for me but having a listview makes it difficult to use :( — B.Taha TIĞLIOĞLU, Jun 02 '23 at 10:36
you can check this answer for double tap, if you meant about double tap on the zooming container: https://stackoverflow.com/questions/65408346/flutter-enable-image-zoom-in-out-on-double-tap-using-interactiveviewer I didn't implement it so far but there seems to be a widely accepted answer. — androidEnthusiast, Jun 02 '23 at 11:43

How can I make flutter 2 finger zoom?

2 Answers2

PRETTY WORKING SOLUTION ✅

To achieve two fingers zoom in flutter, you can use the InteractiveViewer built-in widget provided by flutter.