[Flutter] side project (2)

저번 포스팅 주소입니다 !!

https://drexpp.tistory.com/entry/Flutter-side-project-1

[Flutter] side project (1)

 

저번 포스팅 마지막에 작성한대로 이번에는 프로젝트를 진행하는데 있어서 필요한 패키지 설정과 자잘한 설정들에 대해서 다뤄보겠습니다 !!

 

일단 플러터에서 필요한 패키지들을 모두 볼 수 있는 사이트를 알아보겠습니다.

https://pub.dev/

Dart packages

위 사이트에 들어가면 플러터 프로젝트를 만드는 부분에 있어서 쉽고 빠르게 패키지들을 찾아보고 다운로드 할 수 있습니다.

 

다운로드된 패키지들에 대한 관리는 만들어진 pubspec.yaml 파일에서 관리할 수 있습니다.

flutter create시 생성되는 pubspec.yaml

기본적으로 설정되는 pubspec.yaml 파일입니다.

 

# dependencies
flutter pub add [package name]

# dev_dependencies
flutter pub add --dev [package name]

두 가지의 명령어를 통해서 패키지들을 다운로드 할 수 있는데 둘의 차이는 dependencies에 추가하느냐 dev_dependencies에 추가하느냐의 차이입니다.

 

dependencies

개발 완료 후 앱을 배포하는 동안 포함해야 하는 플러그인 목록입니다.

 

dev_dependencies

개발 단계에서 앱을 테스트하기 위해 개발 단계에서 시도하고 싶은 플러그인 목록입니다.

 

간단하게 dev_dependencies에 포함된 내용은 배포시에 추가가 되지 않는다는 내용입니다.

 

이제 본격적으로 필요한 패키지들을 추가해보겠습니다.

 

1. google_maps_flutter

google map api에 대한 설정은 저번 포스팅에 작성을 해두었습니다 !

https://drexpp.tistory.com/entry/Flutter-%ED%94%8C%EB%9F%AC%ED%84%B0-googlemapsflutter

[Flutter] 플러터 google_maps_flutter

저 포스팅에서 바꾸어야할 내용이 있는데 바로 key를 적용하는 부분입니다 !

AndroidManifest.xml와 AppDelegate.swift에 그대로 key를 작성하게 된다면 코드를 github에 업로드할 경우 key가 노출되기 때문에 잘 숨겨두어야 합니다.

 

API KEY 숨기는 방법

1. ios

일단 ios를 위한 api key를 숨기기 위해서는 xcode로 ios/Runner폴더를 열어줘야합니다.

그런뒤에 원하는파일명.swift 파일을 하나 생성해준 뒤에 struct를 하나 생성해줍니다.

 

import Foundation

struct APIEnv {
    let googleMapApiKey = [API key]
}

저는 이런식으로 작성을 해주었습니다.

이렇게 작성해준 뒤 ios/Runner/AppDelegate.swift 파일을 열어준 뒤에

 

import UIKit
import Flutter
import GoogleMaps // 추가

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey(APIEnv().googleMapApiKey) // 추가
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

GoogleMaps를 import 해주고 GMSServices.provideAPIKey부분에 대입해줍니다.

 

2. android

android에서는 android/local.properties파일에 api key를 추가해주면 됩니다.

sdk.dir=xxxxx
flutter.sdk=xxxxx
google.map.api.key=[API key]

저는 이런식으로 google.map.api.key라는 이름으로 등록을 해주었습니다.

 

그 후에 android/app/build.gradle를 수정해줍니다.

def googleMapApiKey = localProperties.getProperty('google.map.key')

해당 부분을 추가해주면 됩니다.

 

android의 build.gradle의 최상단에는 local.properties파일을 불러와서 변수를 초기화 해주기 때문에 이런 방식으로 불러올 수 있습니다.

 

그런 뒤에 defaultConfig부분에 해당 내용을 추가해주고

manifestPlaceholders["googleMapApiKey"] = googleMapApiKey

그런 뒤에 android/app/src/main/AndroidManifest.xml 파일을 열어서 해당 내용을 추가합니다.

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${googleMapApiKey}"/>

 

ios와 android설정을 모두 완료 했다면 .gitignore에 해당 부분을 추가해줍니다.

**/ios/**/apienv.swift

 

이렇게 해야 git에 올라가지 않고 안전하게 apikey를 보관할 수 있습니다 !

 

dotenv 등 다른 방법도 있지만 저는 이 방법으로 하였습니다.

 

2. auto_route 

go_router를 사용하려했었지만 popUntil등 아직 지원하지 않는 기능이 많기 때문에 대체로 auto_route를 선택하였습니다 !

(아직 지원하지 않는 API https://github.com/flutter/flutter/issues/99112)

 

일단 아래 명령어를 통해 auto_route와 auto_route_generator, build_runner를 설치해 줍니다 !

flutter pub add auto_route
flutter pub add --dev auto_route_generator
flutter pub add --dev build_runner

 

설정법을 알아 보겠습니다.

 

일단 pubspec.yaml파일에 정상적으로 다 들어가 있는지 확인을 해봅니다.

 

확인이 되었다면 파일을 하나 생성해줍니다

 

router.dart 파일을 생성해준 뒤에 아래와 같이 입력해줍니다.

import 'package:auto_route/annotations.dart';
import './views/home_page.dart';

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true),
  ],
)
class $AppRouter {}

생성하였다면 아래 코드를 터미널에 입력해서 build를 해줍니다.

flutter packages pub run build_runner build

만약 에러가 발생하거나 기존 내용을 지우고 다시 만들고 싶다면 아래 명령어를 입력해줍니다.

flutter packages pub run build_runner build --delete-conflicting-outputs

그런 뒤에 main.dart파일로 이동해서 아래와 같이 수정을 해주면 됩니다 !

import './routers/router.gr.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Project',
      routerDelegate: _appRouter.delegate(),
      routeInformationParser: _appRouter.defaultRouteParser(),
    );
  }
}

 

 

3. flutter_native_splash

앱 실행시 하얀 화면이 나오는 부분이 마음에 들지 않아서 앱 실행시 로고를 보여주기 위해 splash화면을 구현하기 위해 추가했습니다 !

 

아래 명령어를 통해 native_splash 패키지를 설치해줍니다 !

flutter pub add flutter_native_splash

 

설치 한 뒤에 프로젝트 디렉토리의 root에 flutter_native_splash.yaml파일을 생성한 뒤에 내용을 채워줍니다 !

flutter_native_splash:
  color: "#ffffff"
  image: assets/images/image.png
  color_dark: "#121212"
  image_dark: assets/images/image.png

  android_12:
    image: assets/images/image.png
    icon_background_color: "#ffffff"
    image_dark: assets/images/image.png
    icon_background_color_dark: "#121212"

  web: false

각각의 key에 대한 설명은 하단 링크에 자세히 나와있습니다 !

https://pub.dev/packages/flutter_native_splash

flutter_native_splash | Flutter Package

 

추가를 해준 뒤에 main.dart파일을 열어 아래와 같이 수정해줍니다 !

import 'package:flutter_native_splash/flutter_native_splash.dart';

import './routers/router.gr.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    FlutterNativeSplash.remove();
    return MaterialApp.router(
      title: 'Project',
      routerDelegate: _appRouter.delegate(),
      routeInformationParser: _appRouter.defaultRouteParser(),
    );
  }
}

 

이렇게하면 google_maps_api, auto_route, flutter_native_splash의 설정이 완료 되었습니다 !

 

이렇게 기본적으로 필요하다고 생각된 패키지 설치와 설정이 완료 되었습니다.

 

개발을 진행하면서 트러블슈팅이 필요한 부분이나 필요한 패키지들에 대해서 추가적으로 포스팅을 작성해보겠습니다 ~