AboutDialog class
정보 상자입니다. 애플리케이션 아이콘, 이름, 버전 번호, 저작권 정보가 표시되는 대화 상자이며, 애플리케이션에서 사용하는 소프트웨어의 라이선스를 표시하는 버튼도 있습니다.
AboutDialog를 표시하려면 showAboutDialog를 사용합니다.
공식 문서 코드
앱을 출시하기 이전, 버전 번호, 허가증과 같은 법률 정보와 용어들을 표시할 공간이 필요할 것이다. 심지어 앱 스토어에서는 이러한 모든 형식의 절차를 따르지 않으면 앱을 출시 허가를 내려주지 않기 때문에 이러한 저작권, 라이센스등을 반드시 명시해놔야 한다.
이처럼 아주 중요한 절차이기 때문에 반드시 필요한 사항인데 이것을 손쉽게 만들어 줄 수 있는 위젯이 있으니 바로 AboutDialog이다.
이 AboutDialog 위젯은 앱의 정보를 보여주기 위한 표준 다이얼로그이다. 일반적으로 앱의 버전 정보, 라이선스, 개발자 이름 등을 사용자에게 알릴 때 사용하고 보통은 showAboutDialog 함수를 통해 호출되게 된다. 바로 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| applicationName | String? | null | 앱 이름 텍스트를 표시하며, 생략 시 Title 위젯에서 자동 추출됨 |
| applicationVersion | String? | 빈 문자열 | 앱 버전 정보를 표시 |
| applicationIcon | Widget? | null | 앱 이름 옆에 표시될 아이콘 |
| applicationLegalese | String? | 빈 문자열 | 저작권 등 작은 글씨로 표시되는 법적 고지 문구 |
| children | List<Widget>? | null | 추가로 표시할 위젯들 (링크, 텍스트, 크레딧 등) |
이 위젯은 독특한게 사용하는 방법이 두 가지가 있다. 정확히는 호출 방법이 두 가지이다. 하나는 AboutDialog를 사용해서 표시하는 방법이고 두 번째는 showAboutDialog 함수를 사용하는 방법이다. 보통은 앞서 말했듯이 showAboutDialog 함수를 사용하는 편인데 그 이유는 아래의 코드를 보면 알 것이다.
사용하는 방법은 간단하다. showAboutDialog 바로 호출해 주고 파라미터인 context에 그냥 context 넣어주면 끝이다.
ElevatedButton(
onPressed: () {
showAboutDialog(context: context);
},
child: Text('About'),
)그냥 가볍게 ElevatedButton의 onPressed안에서 호출하였다.
저렇게 호출하면 이제 화면에는 아래와 같이 나타나게 되는데..
보시다시피 뭐가 텅텅 비어있다. 이제 이건 주어진 파라미터로 채울 수 있는데 일단 잠시 넘어가고 보이는 것처럼 기본적으로 View licenses 버튼과 Close 버튼이 자리 잡고 있는 것을 볼 수 있다. 뭐 Close는 말 그대로 닫는 거다. 근데 이제 View licenses 버튼을 눌러보면 깜짝 놀랄 텐데 엄청나게 긴 라이센스들이 다 명시가 되어 있는 화면으로 넘어가지게 된다;;
이제 여기에서 또 들어가서 보면 아래와 같이 완벽하게 정리가 되어 있는 모습을 볼 수 있다.
자 이제 암튼 showAboutDialog의 파라미터를 살펴보기 전에 AboutDialog으로 사용하는 방법도 봐보자.
당연한 거지만 showAboutDialog 함수를 더 많이 쓴다는 것이지 AboutDialog을 안 쓴다는 게 아니다. 상황에 따라서 다 다를 것이다.
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AboutDialog();
},
);
},
child: Text('About'),
)이것도 몹지 않게 간단한데 호출하는 곳은 showDialog 안이 되시겠다. 이제 builder 안에서 AboutDialog으로 리턴하면 사용 끝인데 위에 있는 showAboutDialog 사용 코드랑 동작이 100% 일치하니 아무거나 사용해 주면 된다. 다만 파라미터가 둘이 서로 다른데 AboutDialog는 아까 본 것처럼 다이얼로그 안에 콘텐츠를 채우는 파라미터 밖에 없는 반면에 showAboutDialog는 다이얼로그의 색상 같은 세부 항목을 조절할 수 있다. 근데 애초에 AboutDialog는 showDialog에서 호출되기 때문에 그냥 세부 조절은 똑같이 할 수 있어서 굳이 문제없겠다.
return AboutDialog(
applicationName: '앱 이름',
);먼저 applicationName 파라미터이다. 말 그대로 앱의 이름을 적을 수 있게 해 주는 데 사용해 보면 알다시피 그냥 타이틀이다.
근데 이름만 이제 "어 여기에 앱 이름 넣어줘~"라는 느낌으로 지었달까... 암튼 바라는 것처럼 앱의 이름을 넣어서 사용해 주자.
그다음 파라미터는 applicationVersion과 applicationIcon가 되시겠다.
applicationVersion 텍스트가 위치되는 곳은 이름이 들어가는 곳의 바로 아래이고 applicationIcon이 표시되는 곳은 이름의 앞쪽 부분이다. 다만 '앱 아이콘' 하니까 앱의 아이콘을 넣어야 하는 것 같지만 그냥 Icon(Icons.Info)같은 정보 아이콘 넣는 게 훨씬 잘 어울리는 것 같다.
return AboutDialog(
applicationName: '앱 이름',
applicationVersion: '1.0.0',
applicationIcon: Icon(Icons.info),
);
이제 바로 밑에 상세 정보도 넣어줄 수 있다. applicationLegalese 파라미터를 통해 저작권 등 작은 글씨로 표시되는 법적 고지 문구를 넣어줄 수 있고 List<Widget>타입을 가진 children을 통하여 자잘 구리 한 추가로 표시할 위젯들 링크, 개발자 이름, 크레딧 등등을 넣어줄 수 있다. 근데 다만 주의해야 할 점은 children이 applicationLegalese랑 뭐 바로 코앞에 붙어 있어서 내 코드처럼 패딩을 먹여줘야 그나마 볼만 해질 것이다.
return AboutDialog(
applicationName: '앱 이름',
applicationVersion: '1.0.0',
applicationIcon: Icon(Icons.info),
applicationLegalese: '© 2025 Flutter Inc.',
children: [
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text('개발자: 나'),
),
Text('https://ch5c.tistory.com')
],
);
이렇게 AboutDialog 위젯을 사용하여 법률 정보와 여러 정보들을 쉽게 표시하는 방법을 알아보았다. 이 위젯은 실제로 앱스토어에 앱을 출시할 때 꼭 필요할 것 같으니 기억해 두고 나중에 사용하도록 하자. 그럼 도움이 되었길 바라며 마치겠다.
