shake_gesture搖一搖功能快速導入，手機回報問題更即時

然後，你要敲進去這串指令： csharp

flutter pub add shake_gesture

接著就會看到你的 pubspec.yaml 文件裡多了一行新的依賴，看起來大致會是這樣： yaml

dependencies: 

  flutter: 

    sdk: flutter 

  # ...其他相依套件

  shake_gesture: ^1.2.0 



其實每次改 dependencies 總覺得有點不安，萬一漏掉什麼就麻煩了。話說回來，如果你的 IDE 沒自動跑，那就自己手動執行 flutter pub get，一切才算妥當。不過，有時候它就是不聽話，誰懂？對了，再下去就是設定的部分啦！

<manifest ...> 

    <application ...> 

        <meta-data 

            android:name="dev.fluttercommunity.shake_gesture_android.SHAKE_FORCE" 

            android:value="5" /> 

        <meta-data 

            android:name="dev.fluttercommunity.shake_gesture_android.MIN_NUM_SHAKES" 

            android:value="6" /> 

    </application> 

</manifest>

dart

class ShakeToReport extends StatefulWidget { 

  const ShakeToReport({required this.child, super.key});

 createState() => _ShakeToReportState(); 

}



<pre><code class="language-python">python

class _ShakeToReportState extends State<ShakeToReport> { 

  bool _isModalShown = false;




void _showModal() { 

    if (_isModalShown) { 

      return; 

    }



setState(() { 

      _isModalShown = true; 

    });



css

showModalBottomSheet( 

      context: context, 

      builder: (_) => const ShakeToReportModal(), 

    ).then((result) { 

      setState(() { 

        _isModalShown = false;  

      });  

    });  

  }




@override  

  Widget build(BuildContext context) {  

    // 欸，我剛剛是不是忘了喝水？啊沒事…繼續。這邊就是回傳一個 ShakeGesture，把 onShake 指向上面的 _showModal，然後把原本的小孩 widget 包進去。

    return ShakeGesture(onShake: _showModal, child: widget.child);   

  }    

}




### 下方彈出視窗（ShakeToReportModal）



使用者可以依照自己的品味設計對話框，不過我懶得搞太複雜，就直接給你一個超陽春範例好了。有時候覺得功能越多越亂，但現在流行極簡嘛。



dart

class ShakeToReportModal extends StatelessWidget {   

  const ShakeToReportModal({super.key});




@override   

  Widget build(BuildContext context) {

    final colors = Theme.of(context).colorScheme;

return SingleChildScrollView(   

      padding: const EdgeInsets.only(top: 16, left: 16, right: 16, bottom: 96),    

      child: Column(    

        mainAxisSize: MainAxisSize.min,    

        children: [    

          const Text(    

            '報告障礙',    

            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),     

          ),     

          const Padding(     

            padding: EdgeInsets.symmetric(vertical: 8),      

            child: Text(       

              '有什麼功能未如預期運作嗎？'        

              '歡迎提供回饋，以協助我們讓'        

              '這個應用程式對所有人更加完善！',         

            ),          

          ),         

          TextButton(        

            onPressed: () {         

              // TODO：待實作         

            },         

            style: ButtonStyle(         

              backgroundColor: WidgetStateColor.resolveWith(        

                (_) => colors.primary,       

              ),       

              foregroundColor: WidgetStateColor.resolveWith(      

                (_) => colors.onPrimary,      

              ),       

            ),          

            child: const Text('回報障礙'),          

          ),           

        ],             

      ),              

    );                

  }                 

}




### 將包裝元件加入應用程式



最後啦，你還是得乖乖把這包裝元件塞到適合的位置才行。大部分情境下，其實直接丟在 widget 樹的最外面、可是在 `MaterialApp` 的下一層——嗯，大概就是讓整支 app 都能聽得到搖動訊號吧。不曉得你會不會跟我一樣老是不小心搖到手機，有時候真想問設計師到底哪根筋想加這種互動。不過話說回來，只要照著放位置，整體流程就通了。

嗯，這功能你大概隨手就能塞進自己的 App 裡，沒什麼特別困難的。  

class MyApp extends StatelessWidget {

  const MyApp({super.key});</code></pre>

唉，我怎麼每次都在想晚餐吃什麼？好啦、拉回來。  

@override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),

      ),

      home: const ShakeToReport(child: ShakeToReportHome()),

    );

  }

}