Flutter 앱 개발 6 : Contents 뷰 - Scaffold, AppBar 추가 포스팅에 이어 Contents 뷰에 Drawer를 추가해 보자.
1. Drawer 추가
Drawer는 좌에서 우로 슬라이딩 되며 나오는 메뉴인데, '앱 평가하기' 메뉴를 drawer 에 추가해 보자.
지난 포스트에 작성해둔 Contents 클래스에 drawer를 추가해 보자. 뷰의 기본 틀을 만들어주는 Scaffold 위젯의 drawer 속성을 구현해 주면 된다.
참고로 구현 방법은 Drawer 위젯의 child 로 원하는 UI를 구성해 주면 된다. 일반적으로 Column 에 제목인 DrawerHeader 를 넣고 필요한 메뉴를 ListTile로 추가한다. 자세한 내용은 아래 코드의 주석을 참고하길 바란다.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('오늘 우주는'),
),
// Drawer 추가
drawer: Drawer(
// Container 를 이용해서 배경을 짙은 회색으로 설정
child: Container(
color: Colors.grey[900],
// Column 추가
child: Column(
children: [
// Drawer 헤더 추가
DrawerHeader(
// 헤더 영역의 중앙에 '오늘 우주는' 이라는 텍스트 추가
child: Center(
child: Text(
'오늘 우주는',
style: TextStyle(color: Colors.white, fontSize: 30),
),
),
// 헤더 영역 배경을 검정색 박스로 꾸밈
decoration: BoxDecoration(color: Colors.black),
),
// ListTile 을 추가 한다
ListTile(
// 가장 앞에 (leading) 별 모양의 아이콘을 추가한다.
leading: Icon(Icons.star, color: Colors.white),
// 아이콘 뒤에 '앱 평가하기' 라는 텍스트를 추가한다.
title: Text(
'앱 평가하기',
style: TextStyle(color: Colors.white, fontSize: 20),
),
// 클릭시 플레이스토어 실행 필요. (추후 추가 예정)
onTap: () {},
),
],
),
),
),
);
}
2. 플레이 스토어 앱 링크 실행 (feat. url_launcher 패키지)
'앱 평가하기' 메뉴 클릭시 플레이 스토어 앱 링크가 열리도록 구현해보자.
2.1. url_launcher 패키지 의존성 추가
플러터에서 url_launcher 패키지를 활용하면 쉽게 URL 에 따라 관련 앱을 실행해 줄 수 있다. 프로젝트의 pubspec.yaml 의 dependencies 속성에 url_launcher를 아래와 같이 추가해 준다.
dependencies:
flutter:
sdk: flutter
url_launcher: ^5.7.10 # url launcher 패키지 추가
추가 후, command line 에서 아래를 수행하거나,
flutter pub get혹은 VS Code 의 커멘드 팔레트 (ctrl + shift + p) 상에서 'Pub: Get Packages' 를 실행하여 추가된 의존 패키지를 프로젝트로 다운로드해 온다.
2.2. '앱 평가하기' ListTile 의 onTap 구현
Drawer 의 '앱 평가하기' 메뉴는 ListTile로 구현했다. ListTile은 기본적으로 onTap 구현을 통해 터치 이벤트 처리가 가능하다.
일단, url launcher 를 활용하는 함수를 아래와 같이 만들자. url_launcher 의 launch() 함수를 onTap()에서 바로 호출해도 되지만, 심심하니 약간의 에러 처리를 해보자. async, await 키워드는 혹시 모르면 일단 넘어가도 무방하다. 추후 비동기 관련 포스팅을 작성할 계획이므로 그 때 자세히 알아보자.
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart'; // url launcher 헤더 추가
class Contents extends StatelessWidget {
...
...
void _launchURL(String url) async {
// 넘겨 받은 url 이 실행 가능한지 체크 후 실행, 불가능하면 에러 출력
if (await canLaunch(url)) {
await launch(url);
} else {
print('Could not launch $url');
}
}
}마지막으로 ListTile의 onTap 에서 플레이 스토어 링크를 실행하자.
onTap: () {
// 플레이 스토어 링크를 실행한다.
_launchURL(
"https://play.google.com/store/apps/details?id=com.contextract.apod");
},
view/contents.dart 의 최종 코드는 아래와 같다.
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class Contents extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('오늘 우주는'),
),
// Drawer 추가
drawer: Drawer(
// Container 를 이용해서 배경을 짙은 회색으로 설정
child: Container(
color: Colors.grey[900],
// Column 추가
child: Column(
children: [
// Drawer 헤더 추가
DrawerHeader(
// 헤더 영역의 중앙에 '오늘 우주는' 이라는 텍스트 추가
child: Center(
child: Text(
'오늘 우주는',
style: TextStyle(color: Colors.white, fontSize: 30),
),
),
// 헤더 영역 배경을 검정색 박스로 꾸밈
decoration: BoxDecoration(color: Colors.black),
),
// ListTile 을 추가 한다
ListTile(
// 가장 앞에 (leading) 별 모양의 아이콘을 추가한다.
leading: Icon(Icons.star, color: Colors.white),
// 아이콘 뒤에 '앱 평가하기' 라는 텍스트를 추가한다.
title: Text(
'앱 평가하기',
style: TextStyle(color: Colors.white, fontSize: 20),
),
// 클릭시 플레이스토어 실행 필요. (추후 추가 예정)
onTap: () {
// 플레이 스토어 링크를 실행한다.
_launchURL(
"https://play.google.com/store/apps/details?id=com.contextract.apod");
},
),
],
),
),
),
);
}
void _launchURL(String url) async {
if (await canLaunch(url)) {
await launch(url);
} else {
print('Could not launch $url');
}
}
}
3. 결과
댓글