[Flutter] 09. 앱의 상태관리 및 여러 패키지 사용법

목차

1. AppLifecycleState 관리
2. velocity_x 패키지 기초 사용법
3. flutter_native_splash 패키지

---

1. AppLifecycleState 관리

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  int _counter = 0;
  late ShakeDetector detector;

  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);

    detector = ShakeDetector.autoStart(
      onPhoneShake: () {
        setState(() => _counter++);
      },
      shakeThresholdGravity: 1.5,
    );
    super.initState();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

 
  }

• 앱의 상태 4가지 경우
  • resumed : 일반적으로 앱이 실행된 상태 → 입력 및 화면 출력 가능
  • detached : 일반적으로 앱이 종료된 상태 → 아무런 action 불가능
  • inactive : 앱 위에 다른 것이 올라간 상태 (EX. 메시지 수신 시, 전화 수신 시, 재난 문자 수신 시 등...) →  화면은 보이지만 입력이 불가능 
  • paused : 홈 화면으로 나갔을 때 →  입력 및 화면 출력 모두 불가능하지만, 종료된 상태는 아님
• 앱의 life cycle 관리하려면 WidgetsBinding 활용
  
  • 먼저 '_MyHomePageState'에 'WidgetsBindingObserver' 추가해 믹싱 형태로 구현
    • 이를 통해 '_MyHomePageState' 자체가 'WidgetsBindingObserver' 로 인식된다 
    • with 대신 implements 도 가능하지만 이럴 경우 모든 메서드를 override되기 때문에 전부 다 구현해야되는 번거로움 발생
  • 항상 'dispose()' 를 override 해서 WidgetsBinding을 remove 해줘야함
    • 그래야 앱이 종료되도 리소스가 낭비되는 상황을 예방 가능

---

@override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.resumed:
        detector.startListening();
        break;
      case AppLifecycleState.inactive:
        break;
      case AppLifecycleState.detached:
        break;
      case AppLifecycleState.paused:
        detector.stopListening();
        break;
    }

• 'didChangeAppLifecycleState' 메서드 
  • 기존에 앱 상태관리를 하지 않았을 때는, 이 '흔들기 카운트 앱'을 나가도 휴대폰을 흔들면 카운트되었음
  • 하지만 paused case일 때 stopListening()을 통해 앱이 백그라운드로 나가면 더 이상 ShakeDetector를 감지하지 못함
  • 하지만 전화가 와서 상단에 알림 바가 나올 때에도, 해당 앱에 입력 가능함
  • 이럴 때도 감지못하게 하려면 inactive case를 컨트롤하면 된다

---

2. velocity_x의 기초적인 사용법

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Container().box.color(Colors.red).size(20, 20).make(),
    Column(
      children: [
        const RedBox()
            .box
            .padding(EdgeInsets.all(30))
            .color(Colors.blue)
            .make(),
        '흔들어서 카운트를 올려보세요.'
            .text
            .size(20)
            .color(Colors.red)
            .bold
            .white
            .black
            .isIntrinsic
            .makeCentered() 
            .box 
            .withRounded(value: 50) 
            .color(Colors.green)
            .height(150)
            .make()
            .pSymmetric(h: 20, v: 50),
        const RedBox(),
      ],
    ),
    const RedBox(),
  ],
),

• velocity_x는 flutter 코딩을 더 쉽고 가시적으로 바꿔준다
• Padding을 간편하게
  • 원래는 padding을 넣고 싶으면 Padding Widget으로 wrap 해야함
  • 이 패키지 사용하면 간단하게 표현 가능
    • .p(x) : 크기 x만큼 상하좌우로 padding 넣음
    • .pOnly( left: ,right: ,up: ,bottom: ,) : 상하좌우 각각에 padding 넣음
    • .pSymmetric(h:, v: ,) : 수직, 수평으로 padding 넣음

---

Container(
    color: Colors.red,
    width: 20,
    height: 20,
),

• Container를 간편하게
  • 위의 Container Widget을 한 줄로 변환 가능
  • Container( ).box.color(Colors.red).size(20,20).make( ) 로 변환 가능
• Text 를 간편하게
  • Text ('hello') →  'hello'.text.make( ) 로 변환 가능
  • 주의할  점 1
    • .make() 시 엄밀히 Text( ) 위젯을 반환하는 것이 아닌 AutoSizeText( ) 를 반환한다
    • 정확히 Text( ) 위젯을 반환시키고 싶다면 _isIntrinsic을 호출하면 된다
    • →  'hello'.text.isIntrinsic.make()
  • 주의할 점 2
    • color을 여러 개 호출할 수 있지만, 맨 마지막 색만 적용된다
    • 즉, 'hello'.text.white.red.black 이라고 입력하면 'black' 색상만 적용됨
• 여러 메서드 호출들
  • .makeCentered() : 해당 위젯이 중앙에 오게
  • .box : 이후부터 .make() 전까지는 box 관련 호출들임
    • .withRounded : 박스를 둥글게 만듦

---

3. flutter_native_splash 패키지

 

• 앱이 실행될 때, 잠깐 뜨는 화면을 'splash' 화면이라고 함 →  배포까지 하려면 거의 필수라고 봐야함

1. pub.dev에서 'flutter_native_splash' 검색
2. 프로젝트에 해당 패키지 추가하는 2가지 방법
   1. terminal에 'flutter pub add flutter_native_splash' 입력
   2. pubspec.yaml에 dependencies에 입력
   3. terminal에 입력시 알아서 호한되는 버전으로 패키지를 받는다
3. 'pubspec.yaml' 파일과 같은 위치에 'flutter_native_splash.yaml' 파일을 만들어 아래 내용을 copy & paste
4. 해당 파일에서 color, background_image의 주석을 풀고 원하는 이미지의 경로와 색의 hex 코드를 넣어주면 된다
   1. 이전에 따로 icon들을 변경했더라면 따로 더 할 거 없이 패키지만 추가하면 끝난다
   2. icon 삽입하는 방법은 해당 링크를 참고 https://andantej99.tistory.com/entry/Flutter-08-%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%A7%80%EC%9B%90-%EB%B0%8F-%EC%95%84%EC%9D%B4%EC%BD%98-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0

 

[Flutter] 08. 다국어 지원 및 아이콘 변경하기

flutter_native_splash:
  # This package generates native code to customize Flutter's default white native splash screen
  # with background color and splash image.
  # Customize the parameters below, and run the following command in the terminal:
  # dart run flutter_native_splash:create
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # dart run flutter_native_splash:remove

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#42a5f5"
  #background_image: "assets/background.png"

  # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing
  # the leading # character.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a
  # png file and should be sized for 4x pixel density.
  #image: assets/splash.png

  # The branding property allows you to specify an image used as branding in the splash screen.
  # It must be a png file. It is supported for Android, iOS and the Web.  For Android 12,
  # see the Android 12 section below.
  #branding: assets/dart.png

  # To position the branding image at the bottom of the screen you can use bottom, bottomRight,
  # and bottomLeft. The default values is bottom if not specified or specified something else.
  #branding_mode: bottom

  # The color_dark, background_image_dark, image_dark, branding_dark are parameters that set the background
  # and image when the device is in dark mode. If they are not specified, the app will use the
  # parameters from above. If the image_dark parameter is specified, color_dark or
  # background_image_dark must be specified.  color_dark and background_image_dark cannot both be
  # set.
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png
  #branding_dark: assets/dart_dark.png

  # Android 12 handles the splash screen differently than previous versions.  Please visit
  # https://developer.android.com/guide/topics/ui/splash-screen
  # Following are Android 12 specific parameter.
  android_12:
    # The image parameter sets the splash screen icon image.  If this parameter is not specified,
    # the app's launcher icon will be used instead.
    # Please note that the splash screen will be clipped to a circle on the center of the screen.
    # App icon with an icon background: This should be 960×960 pixels, and fit within a circle
    # 640 pixels in diameter.
    # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
    # 768 pixels in diameter.
    #image: assets/android12splash.png

    # Splash screen background color.
    #color: "#42a5f5"

    # App icon background color.
    #icon_background_color: "#111111"

    # The branding property allows you to specify an image used as branding in the splash screen.
    #branding: assets/dart.png

    # The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
    # apply when the device is in dark mode. If they are not specified, the app will use the
    # parameters from above.
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"

  # The android, ios and web parameters can be used to disable generating a splash screen on a given
  # platform.
  #android: false
  #ios: false
  #web: false

  # Platform specific images can be specified with the following parameters, which will override
  # the respective parameter.  You may specify all, selected, or none of these parameters:
  #color_android: "#42a5f5"
  #color_dark_android: "#042a49"
  #color_ios: "#42a5f5"
  #color_dark_ios: "#042a49"
  #color_web: "#42a5f5"
  #color_dark_web: "#042a49"
  #image_android: assets/splash-android.png
  #image_dark_android: assets/splash-invert-android.png
  #image_ios: assets/splash-ios.png
  #image_dark_ios: assets/splash-invert-ios.png
  #image_web: assets/splash-web.gif
  #image_dark_web: assets/splash-invert-web.gif
  #background_image_android: "assets/background-android.png"
  #background_image_dark_android: "assets/dark-background-android.png"
  #background_image_ios: "assets/background-ios.png"
  #background_image_dark_ios: "assets/dark-background-ios.png"
  #background_image_web: "assets/background-web.png"
  #background_image_dark_web: "assets/dark-background-web.png"
  #branding_android: assets/brand-android.png
  #branding_dark_android: assets/dart_dark-android.png
  #branding_ios: assets/brand-ios.gif
  #branding_dark_ios: assets/dart_dark-ios.gif

  # The position of the splash image can be set with android_gravity, ios_content_mode, and
  # web_image_mode parameters.  All default to center.
  #
  # android_gravity can be one of the following Android Gravity (see
  # https://developer.android.com/reference/android/view/Gravity): bottom, center,
  # center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
  # fill_vertical, left, right, start, or top.
  #android_gravity: center
  #
  # ios_content_mode can be one of the following iOS UIView.ContentMode (see
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill,
  # scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight,
  # bottomLeft, or bottomRight.
  #ios_content_mode: center
  #
  # web_image_mode can be one of the following modes: center, contain, stretch, and cover.
  #web_image_mode: center

  # The screen orientation can be set in Android with the android_screen_orientation parameter.
  # Valid parameters can be found here:
  # https://developer.android.com/guide/topics/manifest/activity-element#screen
  #android_screen_orientation: sensorLandscape

  # To hide the notification bar, use the fullscreen parameter.  Has no effect in web since web
  # has no notification bar.  Defaults to false.
  # NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
  #       To show the notification bar, add the following code to your Flutter app:
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top], );
  #fullscreen: true

  # If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
  # with the info_plist_files parameter.  Remove only the # characters in the three lines below,
  # do not remove any spaces:
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

※ 더 자세한 내용은 pub.dev의 'flutter_native_splash' 페이지에 가서 Readme 를 참고하세요