안드로이드 앱 만들기(2) - 필요한 Plug-in 찾고 받기

앱을 처음부터 끝까지 모두 만들 수 없다.

기본적인 도구나 구조들은 인터넷을 찾아보면 공개된 내용도 많다.

 

특히 flutter 는 pub.dev에 공개된 플러그인들이 매우 많다. 여기서 잘 검색하고 like 가 많고 score가 높은 패키지를 쓰면 버그가 상대적으로 적고 만족도가 높을 것이다.

pub.dev

Dart packages

 

이번에 우리가 필요로 하는 패키지를 정리하면 아래와 같다.

• pub.dev/packages/device_info/ - device 이름이나 기타 정보를 가져오는 패키지
• pub.dev/packages/advertising_id - advertising용 id를 가져오는 패키지
• pub.dev/packages/share - 공유 창을 띄우는 패키지
• pub.dev/packages/admob_flutter - Admob 을 띄워주는 flutter 패키지

필요한 패키지(플러그인)들은 pubspec.yaml 파일을 열어서 dependencies 추가해준 후 Pub get 버튼으로 모두 사용 가능하게 해주자. 나중에 플러그인이 너무 많이 업데이트 되서 사용 못할 수 있으니 버전을 같이 써주자.

dependencies:
  flutter:
    sdk: flutter
  share: ^0.6.5+4
  device_info: ^0.4.2+9
  admob_flutter: ^1.0.1
  advertising_id: ^1.0.0 

요렇게 만들어서 사용할 예정이다.

 

 

그리고 device_info 예제를 그대로 긁어다가 main.dart 에 붙여넣고 실행해보자.

첫 실행은 매우 오래걸리니(1~10분) 안된다고 너무 걱정하지 말자.

잠시 다른 생각을 하다보면 뜬다.

// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// ignore_for_file: public_member_api_docs

import 'dart:async';

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:device_info/device_info.dart';

void main() {
  runZoned(() {
    runApp(MyApp());
  }, onError: (dynamic error, dynamic stack) {
    print(error);
    print(stack);
  });
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static final DeviceInfoPlugin deviceInfoPlugin = DeviceInfoPlugin();
  Map<String, dynamic> _deviceData = <String, dynamic>{};

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    Map<String, dynamic> deviceData;

    try {
      if (Platform.isAndroid) {
        deviceData = _readAndroidBuildData(await deviceInfoPlugin.androidInfo);
      } else if (Platform.isIOS) {
        deviceData = _readIosDeviceInfo(await deviceInfoPlugin.iosInfo);
      }
    } on PlatformException {
      deviceData = <String, dynamic>{
        'Error:': 'Failed to get platform version.'
      };
    }

    if (!mounted) return;

    setState(() {
      _deviceData = deviceData;
    });
  }

  Map<String, dynamic> _readAndroidBuildData(AndroidDeviceInfo build) {
    return <String, dynamic>{
      'version.securityPatch': build.version.securityPatch,
      'version.sdkInt': build.version.sdkInt,
      'version.release': build.version.release,
      'version.previewSdkInt': build.version.previewSdkInt,
      'version.incremental': build.version.incremental,
      'version.codename': build.version.codename,
      'version.baseOS': build.version.baseOS,
      'board': build.board,
      'bootloader': build.bootloader,
      'brand': build.brand,
      'device': build.device,
      'display': build.display,
      'fingerprint': build.fingerprint,
      'hardware': build.hardware,
      'host': build.host,
      'id': build.id,
      'manufacturer': build.manufacturer,
      'model': build.model,
      'product': build.product,
      'supported32BitAbis': build.supported32BitAbis,
      'supported64BitAbis': build.supported64BitAbis,
      'supportedAbis': build.supportedAbis,
      'tags': build.tags,
      'type': build.type,
      'isPhysicalDevice': build.isPhysicalDevice,
      'androidId': build.androidId,
      'systemFeatures': build.systemFeatures,
    };
  }

  Map<String, dynamic> _readIosDeviceInfo(IosDeviceInfo data) {
    return <String, dynamic>{
      'name': data.name,
      'systemName': data.systemName,
      'systemVersion': data.systemVersion,
      'model': data.model,
      'localizedModel': data.localizedModel,
      'identifierForVendor': data.identifierForVendor,
      'isPhysicalDevice': data.isPhysicalDevice,
      'utsname.sysname:': data.utsname.sysname,
      'utsname.nodename:': data.utsname.nodename,
      'utsname.release:': data.utsname.release,
      'utsname.version:': data.utsname.version,
      'utsname.machine:': data.utsname.machine,
    };
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
              Platform.isAndroid ? 'Android Device Info' : 'iOS Device Info'),
        ),
        body: ListView(
          children: _deviceData.keys.map((String property) {
            return Row(
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.all(10.0),
                  child: Text(
                    property,
                    style: const TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Expanded(
                    child: Container(
                  padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
                  child: Text(
                    '${_deviceData[property]}',
                    maxLines: 10,
                    overflow: TextOverflow.ellipsis,
                  ),
                )),
              ],
            );
          }).toList(),
        ),
      ),
    );
  }
}

 

이렇게 기본적인 화면이 뜬다.

이 화면을 예쁘게 만들고 admob 을 추가해주고 올리면 되겠지?

 

이번엔 여기까지,,,