[flutter] 플러터 get과 다이얼로그
이번 포스트에서는 플러터(Flutter) 앱 개발 시 get 패키지와 다이얼로그(Dialog)를 사용하는 방법에 대해 알아보겠습니다.
1. get 패키지
get 패키지는 플러터 앱의 상태 관리와 라우팅을 단순하게 만들어주는 패키지입니다. get을 사용하면 앱의 상태 변화나 화면 이동을 간단한 코드로 처리할 수 있습니다.
설치
먼저 get 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.
dependencies:
get: ^4.3.8
그런 다음 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.
사용
get 패키지를 이용하여 화면 이동을 구현하려면 아래와 같이 코드를 작성합니다.
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Get.to(AnotherScreen());
},
child: Text('Go to another screen'),
),
),
);
}
}
class AnotherScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Another Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Get.back();
},
child: Text('Go back'),
),
),
);
}
}
2. 다이얼로그
플러터 앱에서 다이얼로그(Dialog)를 표시하려면 showDialog 함수를 사용합니다. 다이얼로그는 사용자에게 정보를 제공하거나 확인/취소와 같은 선택을 유도할 때 유용하게 사용됩니다.
예제
아래는 간단한 정보를 포함하는 다이얼로그를 표시하는 예제 코드입니다.
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Dialog Title'),
content: Text('This is the dialog content.'),
actions: <Widget>[
TextButton(
child: Text('Close'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
},
child: Text('Show Dialog'),
)
마치며
이번 포스트에서는 get 패키지를 사용하여 플러터 앱의 화면 전환을 어떻게 처리하는지 그리고 다이얼로그를 어떻게 표시하는지에 대해 살펴보았습니다. get을 사용하면 간단한 코드로 화면 전환을 처리할 수 있고, showDialog를 사용하여 다얼로그를 표시할 수 있습니다. 다음 포스트에서는 더 다양한 플러터 패키지와 기능에 대해 다루어보겠습니다.
참고: flutter.dev