Text Widget 예제

import 'package:flutter/material.dart';

void main() => runApp(SnowDeerExample());

class SnowDeerExample extends StatelessWidget {
  static const title = 'SnowDeer\'s Text Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: title,
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(title: Text(title)),
            body: Column(children: [
              Text('안녕하세요. SnowDeer 입니다.'),
              Text('이건 Styled Text 입니다.',
                  style: TextStyle(
                      color: Colors.blue,
                      fontSize: 16.0,
                      fontWeight: FontWeight.bold)),
              Text('이건 두번 째 Styled Text 입니다.',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    background: Paint()
                      ..color = Colors.blueGrey
                      ..style = PaintingStyle.fill,
                  ))
            ])));
  }
}

Image Widget 예제

먼저 이미지 파일을 assets/images 디렉토리에 복사한 다음, pubspec.yaml 파일을 다음과 같이 수정합니다.

flutter:

  uses-material-design: true
  assets:
     - assets/images/

  ...

그 이후 예제 코드는 다음과 같습니다.

import 'package:flutter/material.dart';

void main() => runApp(SnowDeerExample());

class SnowDeerExample extends StatelessWidget {
  static const title = 'SnowDeer\'s Image Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: title,
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(title: Text(title)),
            body: Column(children: [
              Image.asset('assets/images/snowdeer.png')
            ])));
  }
}

RaisedButton Widget 예제

import 'package:flutter/material.dart';

void main() => runApp(SnowDeerExample());

class SnowDeerExample extends StatelessWidget {
  static const title = 'SnowDeer\'s RaisedButton Example';

  void onClicked() {
    print('onClicked !!!');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: title,
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(title: Text(title)),
            body: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  RaisedButton(
                    child: Text('Normal Button'),
                    onPressed: onClicked,
                  ),
                  RaisedButton(
                      child: Text('Round Shape Button'),
                      onPressed: onClicked,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12),
                      ))
                ])));
  }
}

TextFormField Widget 예제

import 'package:flutter/material.dart';

void main() => runApp(SnowDeerExample());

class SnowDeerExample extends StatelessWidget {
  static const title = 'SnowDeer\'s TextFormField Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: title,
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(title: Text(title)),
            body: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  TextFormField(),
                  TextFormField(
                    keyboardType: TextInputType.number,
                  ),
                  TextFormField(
                    keyboardType: TextInputType.emailAddress,
                  )
                ])));
  }
}

이 때, TextFormField에서 가질 수 있는 키보드 속성은 다음과 같습니다.

• TextInputType.datetime
• TextInputType.emailaddress
• TextInputType.multiline
• TextInputType.number
• TextInputType.phone
• TextInputType.text
• TextInputType.url

Intelli J에서는 PATH 경로를 체크해서 Flutter의 설치 여부를 확인합니다.

.zshrc에 다음과 같은 alias를 추가해준 다음 터미널을 통해 intelliJ로 실행하면 Intelli J에서 Flutter를 사용할 수 있습니다.

# for Flutter
export PATH=$PATH:~/Development/flutter/bin

alias intelliJ="open '/Applications/IntelliJ IDEA CE.app/'"

Setup

flutter channel dev
flutter upgrade
flutter config --enable-macos-desktop

Device 확인

그 이후 flutter devices 명령어를 통해 현재 Mac PC가 발견되면 준비 끝입니다.

$ flutter devices

1 connected device:

macOS • macOS • darwin-x64 • Mac OS X 10.15.4 19E287

실행

flutter create snowdeer_flutter
cd snowdeer_flutter

flutter run -d macos

Flutter 설치 방법

Flutter를 Mac OS에 설치 하는 방법입니다.

여기에서 Flutter SDK를 다운로드할 수 있으며, 그 중 Mac OS 버전은 여기에서 받을 수 있습니다.

설치 후 다음 명령어로 Flutter를 설치합니다.

mkdir ~/Development
cd ~/Development
unzip ~/Downloads/flutter_macos_1.17.2-stable.zip

그리고 .zshrc 파일에 아래 부분을 추가합니다.

# for Flutter
export PATH=$PATH:~/Development/flutter/bin

Pre-download Development Binaries

flutter precache

Flutter doctor

설치 후 flutter doctor 명령어를 이용해서 현재 시스템에 부족한 부분이 어떤 것이 있는 지 점검할 수 있습니다.

flutter doctor

점검 사항

안드로이드 라이센스가 수락되어 있지 않으면

flutter doctor --android-licenses

를 해줍니다.

XCode 설치가 불완전하면

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

sudo gem install cocoapods

를 실행합니다.

Android Studio나 IntelliJ, VSCode 같은 경우는 Flutter 플러그인을 설치해줍니다.

Flutter 프로젝트 생성하기

flutter create snowdeer_flutter

Git Commit Id 및 날짜 획득 방법

CMakeLists.txt 예제

CMakeLists.txt 파일에 다음 명령어를 추가하면 Git Commit Id 및 Commit Date를 얻을 수 있습니다. add_definitions 명령어를 이용해서 C++ 코드에 전달할 수 있습니다.

execute_process(
		COMMAND git log -1 --format=%h
		WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}
		OUTPUT_VARIABLE GIT_COMMIT_HASH
		OUTPUT_STRIP_TRAILING_WHITESPACE
)

execute_process(
		COMMAND git log -1 --format=%cd
		WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}
		OUTPUT_VARIABLE GIT_COMMIT_DATE
		OUTPUT_STRIP_TRAILING_WHITESPACE
)

add_definitions("-DVERSION_HASH=\"${GIT_COMMIT_HASH}\"")
add_definitions("-DCOMMIT_DATE=\"${GIT_COMMIT_DATE}\"")

C++ 예제

실제 C++ 코드에서 사용하는 예제는 다음과 같습니다.

#ifndef VERSION_HASH
#define VERSION_HASH "0000000"
#endif

#ifndef COMMIT_DATE
#define COMMIT_DATE ""
#endif

string Prefs::GET_VERSION() {
  return VERSION_HASH;
}

string Prefs::GET_COMMIT_DATE() {
  return COMMIT_DATE;
}