Question 180711 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I make flutter 2 finger zoom?

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("")
            ]),
Tags:

2

Answers


  1. 0

    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(),
)
    Login or Signup to reply.
  2. 0

    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(
          ...
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search