플러터(Flutter) 프레임워크를 이용하여 앱의 버튼 디자인을 손쉽게 만들 수 있습니다. 이번 예제에서는 클리퍼(Clipper)를 이용하여 다양한 모양의 버튼을 만드는 방법을 살펴보겠습니다.
준비물
- Flutter SDK 설치
- 텍스트 편집기 (예: Visual Studio Code)
버튼 모양 만들기
먼저 Flutter 앱을 생성하고, 버튼을 만들어보겠습니다. 다음과 같이 코드를 작성해보세요.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Button Example',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
appBar: AppBar(
title: Text('Button Example'),
),
body: Center(
child: Container(
width: 200,
height: 50,
child: RaisedButton(
onPressed: () {},
child: Text('Click Me'),
),
),
),
),
);
}
}
위 코드는 간단한 앱을 생성하고, RaisedButton 위젯을 이용하여 버튼을 만들어줍니다. 버튼의 onPressed 속성을 빈 함수로 설정했으니, 버튼을 클릭해도 아무 동작이 일어나지 않을 것입니다.
클리퍼로 버튼 디자인 변경하기
이제 버튼의 모양을 좀 더 특별하게 만들기 위해 클리퍼(Clipper)를 이용해보겠습니다. 클리퍼는 뷰의 모양을 변경하는 역할을 하는데, 이번 예제에서는 원형 버튼을 만들기 위해 CircleClipper를 사용하겠습니다. 다음과 같이 코드를 작성해보세요.
class CircleClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.addOval(Rect.fromCircle(center: Offset(size.width/2, size.height/2), radius: size.width/2));
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ClipPath(
clipper: CircleClipper(),
child: RaisedButton(
onPressed: () {},
child: Text('Click Me'),
),
);
}
}
위 코드에서는 CircleClipper 클래스를 정의하고, CustomClipper를 상속받아 원형 클리퍼를 만듭니다. 그리고 MyButton 위젯에서 ClipPath를 이용하여 버튼에 클리퍼를 적용합니다.
새로운 버튼 사용하기
이제 원형 버튼을 사용하기 위해 main.dart 파일의 코드를 변경해보겠습니다. 다음과 같이 수정해보세요.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Button Example',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
appBar: AppBar(
title: Text('Button Example'),
),
body: Center(
child: Container(
width: 200,
height: 50,
child: MyButton(),
),
),
),
);
}
}
class CircleClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.addOval(Rect.fromCircle(center: Offset(size.width/2, size.height/2), radius: size.width/2));
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ClipPath(
clipper: CircleClipper(),
child: RaisedButton(
onPressed: () {},
child: Text('Click Me'),
),
);
}
}
위 코드에서 MyButton 위젯을 사용하도록 수정하였습니다.
실행 결과 확인하기
업데이트된 코드를 실행하고 앱의 버튼을 확인해보세요. 이제는 원형 모양으로 디자인된 버튼을 볼 수 있을 것입니다.
마무리
이번 예제에서는 클리퍼를 이용하여 플러터 앱의 버튼 디자인을 변경하는 방법에 대해 알아보았습니다. 클리퍼를 사용하면 더 다양한 모양의 버튼을 만들 수 있으니, 앱을 개발할 때 참고해보세요!