[flutter] RaisedButton을 사용한 예제 앱 제작
이 포스트에서는 Flutter에서 RaisedButton 위젯을 사용하여 간단한 예제 앱을 제작해보겠습니다. RaisedButton은 사용자의 터치에 반응하여 동작하는 버튼을 생성하는데 사용됩니다.
1. 프로젝트 설정
먼저 Flutter 프로젝트를 생성하고 필요한 패키지를 추가해야 합니다. 다음 명령어를 이용하여 패키지를 추가할 수 있습니다.
flutter create raised_button_example
cd raised_button_example
2. 메인 앱 코드 수정
lib/main.dart 파일을 열고 다음과 같이 코드를 수정합니다.
import 'package:flutter/material.dart';
void main() {
runApp(RaisedButtonApp());
}
class RaisedButtonApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RaisedButton Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('RaisedButton Example'),
),
body: Center(
child: RaisedButton(
onPressed: () {
// 버튼 눌렀을 때 동작할 내용 추가
print('Button Pressed!');
},
child: Text('Click Me'),
),
),
);
}
}
3. 앱 실행
터미널에서 다음 명령어를 입력하여 앱을 실행할 수 있습니다.
flutter run
앱이 성공적으로 실행되면 화면에 “Click Me”라는 텍스트가 있는 버튼이 나타날 것입니다. 버튼을 클릭하면 “Button Pressed!”가 콘솔에 출력됩니다.
결론
이 예제에서는 RaisedButton을 사용하여 간단한 Flutter 앱을 만들어보았습니다. RaisedButton은 터치 동작에 반응하여 사용자와 상호작용할 수 있는 버튼을 구성하는데 사용됩니다. Flutter에서 버튼을 사용할 때는 RaisedButton을 고려해보세요.