[플러터] ShowAboutDialog, ShowSnackBar 에 대해서

AboutDialog에 대해서 구글은 법률용어, 버전 번호, 라이센스 등의 정보를 간단하게 만들어주는 위젯이라고 설명하고 있다. 실제로 사용해보니 아주 간편하기는 하나 이런것들까지 위젯으로 만들어놓게 된다면 알아야할 위젯이 더욱 많아야 될 것이라고 생각이 드는 수준의 위젯이었다.

SnackBar  는  나중에 추가적으로 설명을 더 하겠지만 간단히 설명하자면 하단에 붙어 나오는 직사각형의 막대형 위젯이라 생각하면 된다. 안드로이드의 스낵바와 거의 비슷하지만 구현은 훨씬 간단하게 되어있으면 확장성도 많다.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  LicenseRegistry.addLicense(() async* {
    yield LicenseEntryWithLineBreaks(
      ['my_package'],
      'Blah blah.',
    );
  });
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AboutDialog App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    AboutDialog();

    return Scaffold(
      appBar: AppBar(
        title: Text('AboutDialog, MaterialButton'),
      ),
      body: Center(
        child: MyMenu(),
      ),
    );
  }
}

class MyMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        MaterialButton(
          onPressed: () => Scaffold.of(context).showSnackBar(SnackBar(
            content: Text('Sorry, not implemented.'),
          )),
          color: Colors.pink,
          textColor: Colors.white,
          child: Text('MaterialButton'),
        ),
        MaterialButton(
          onPressed: () {
            showAboutDialog(
              context: context,
              applicationVersion: 'App version : 1.0.0',
              applicationIcon: MyAppIcon(),
              applicationName: 'App name : Example',
              applicationLegalese:
              'This application is example code for everyone',
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 20),
                  child: Text('This is where I\'d put more information about '
                      'this app, if there was anything interesting to say.'),
                ),
              ],
            );
          },
          child: Text('showAboutDialog'),
        ),
      ],
    );
  }
}

class MyAppIcon extends StatelessWidget {
  static const double size = 32;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: SizedBox(
          width: size,
          height: size,
          child: FlutterLogo(),
        ),
      ),
    );
  }
}

전체적인 구조는 아래와 같다. MaterialButton을 클릭하는 것으로 화면이 분기된다.
MyApp -> MyHomePage -> body --> MaterialButton
                                                              ㄴ--> MaterialButton   

 

첫번째 MaterialButton 이다.  버튼을 클릭(onPressed) 하게 되면 하단의 SnackBar가 올라오며 텍스트를 띄워주는 것이다.

        MaterialButton(
          onPressed: () => Scaffold.of(context).showSnackBar(SnackBar(
            content: Text('Sorry, not implemented.'),
          )),
          color: Colors.pink,
          textColor: Colors.white,
          child: Text('MaterialButton'),
        ),

snackBar는 안드로이드의 스낵바와 거의 유사하지만 플러터에서 구현인 아주 간단해서 좋았다. SnackBar 위젯 안에 Text뿐만 아니라 다양한 위젯을 더 넣을 수 있기 때문에 확장하기에도 편하도록 되어있다.

 

두번째 MaterialButton 은 ShowAboutDialog 에 대해 테스트 하는 부분이다.

        MaterialButton(
          onPressed: () {
            showAboutDialog(
              context: context,
              applicationVersion: 'App version : 1.0.0',
              applicationIcon: MyAppIcon(),
              applicationName: 'App name : Example',
              applicationLegalese:
              'This application is example code for everyone',
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 20),
                  child: Text('This is where I\'d put more information about '
                      'this app, if there was anything interesting to say.'),
                ),
              ],
            );
          },
          child: Text('showAboutDialog'),
        ),

코드를 보면 직관적을 보게 되듯히 application의 정보가 일목요연하게 입력하고 나열되어 있다. 또한 AboutDialog의 이름답게 application 의 정보뿐만 아니라 Children에 추가적인 정보를 입력할 수 있도록 되어있다.

MaterialButton 클릭시 나타나는 AboutDialog(왼),  VIEW LICENSES 클릭시 나타나는 Detail창(오)

class MyAppIcon extends StatelessWidget {
  static const double size = 32;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: SizedBox(
          width: size,
          height: size,
          child: FlutterLogo(),
        ),
      ),
    );
  }
}

이 부분의 경우 showaboutdialog에 들어갈 앱 로고, 브랜드 로고에 대해 지정할 수 있는 위젯이다. 단순히 Icon 위젯을 통해 사용해도 되겠지만 사이즈 조절등을 위해 외부로 빼내어 구현해놓은듯하다.