[flutter] FlatButton을 사용하여 애니메이션 효과를 추가하는 방법은?

26 Dec 2023

flutter

다음은 FlatButton 위젯을 사용하여 애니메이션 효과를 추가하는 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyButton(),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation Button'),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            // 애니메이션 효과 추가
            print('Button Pressed');
          },
          child: Container(
            width: 200,
            height: 50,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Center(
              child: Text(
                'Press Me',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

이 예제에서는 FlatButton 대신 InkWell을 사용하여 애니메이션 효과를 추가했습니다. onPressed 이벤트 핸들러 대신 onTap 이벤트 핸들러를 사용하여 터치에 대한 애니메이션을 설정했습니다.TouchableOpacity나 GestureDetector도 사용할 수 있지만 InkWell은 Material Design의 터치 효과를 제공하여 사용자에게 버튼이 눌린 것임을 시각적으로 알려줍니다.

애니메이션 효과를 추가한 버튼을 빌드하고 실행하여 버튼을 누르면 터치에 대한 반응을 볼 수 있습니다.

더 자세한 내용은 다음 문서를 참고하세요. Flutter 공식 문서 - InkWell