chatGPT 를 활용하여 Flutter 에서 Animated Button 작성하는 방법

chatGPT 에서 아래와 같이 질문을 해보았다.

예제 코드가 위와 같이 나오면서 한글로 설명도 나옵니다.

코드의 품질도 우수합니다.

class AnimatedButton extends StatefulWidget {

  final String buttonText;

  AnimatedButton({this.buttonText});

  @override

  _AnimatedButtonState createState() => _AnimatedButtonState();

}

class _AnimatedButtonState extends State<AnimatedButton> {

  double _buttonSize = 150.0;

  @override

  Widget build(BuildContext context) {

    return GestureDetector(

      onTap: () {

        setState(() {

          _buttonSize = 200.0;

        });

      },

      child: AnimatedContainer(

        duration: Duration(milliseconds: 300),

        width: _buttonSize,

        height: _buttonSize,

        decoration: BoxDecoration(

          color: Colors.blue,

          borderRadius: BorderRadius.circular(20.0),

        ),

        child: Center(

          child: Text(

            widget.buttonText,

            style: TextStyle(color: Colors.white),

          ),

        ),

      ),

    );

  }

}

구글 검색에서 찾은 코드와 비교해도 손색이 없을 정도입니다.

점점 더 좋아지면 깃헙의 코파일럿보다 나아질거 같습니다.

아마도 이전에는 이런 방식으로 코드 샘플을 구했을껍니다.

일단 구글에서 검색을 한다.

이중에 나의 경우는 Bouncing Button Animation 글이 괜찮아서 이부분을 참고해서 작성하였다.

참고하실 분들은 여기를 클릭하여 참고하시기 바랍니다.

링크 참고 : https://medium.flutterdevs.com/bouncing-button-animation-in-flutter-d0296442f3c5

내용을 읽어보면 변수 하나를 설정하고 

그 변수를 변경할 때 화면 렌더링 시 

표시될 내용의 크기를 변경하는 것이다.

대부분의 애니메이션이 이와 같이 작동하는 메커니즘을 갖고 있다.