Flutter - Scale example with GestureDetector

GuestureDetector를 이용하여 스케일 변경을 할 때 몇가지 주의해야될 점이 있습니다

 

예를 들어 위젯 사이즈가 화면 사이즈보다 크면 overflow가 발생할 수 있고

 

너무 작으면 위젯들의 글씨가 안좋아서 가독성이 떨어질 수 있습니다

 

해결방안으로 여러가지가 있겠지만, 해당 글에서는 clamp를 사용할 것입니다

 

class ScaleExample extends StatefulWidget {
  @override
  _ScaleExampleState createState() => _ScaleExampleState();
}

class _ScaleExampleState extends State<ScaleExample> {
  double size = 100;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Size Example')),
      body: Center(
        child: GestureDetector(
          onScaleUpdate: (value){
            if(value.scale == 1.0){
              return;
            }
            setState(() {
              size = 100 * value.scale.clamp(0.8, 1.8);
              print(value.scale);
            });
          },
            child: Container(height: size, width: size, color: Colors.blue)),
      ),
    );
  }
}

 

scale이 1.0이면 변경이 일어나지 않으니 return을 통해 setState가 일어나지 않도록 하고

 

변경이 있을때에는 변경된 value값의 scale에 clamp로 최대값과 최소값을 정의해줍니다

 

여기서 100이라는 고정값 대신 size를 사용하면, 가변되는 size값 때문에 최대, 최소 크기가 변경되어

 

원하는 결과를 얻지 못하게 될 수 있습니다