Flutter openFile, saveFile Dialog 사용

|

openFile, saveFile Dialog 사용 예제

먼저 pubspec.yaml 파일에 다음 항목을 추가해줍니다.


pubspec.yaml

dependencies:
  file_chooser: ^0.1.2
  path_provider: ^1.6.10
  path_provider_macos: ^0.0.4+3

여기서 file_chooser는 구글에서 만든 파일을 선택할 수 있는 인터페이스를 제공해주는 라이브러리이며, path_providerDocuments와 같은 특정 디렉토리를 쉽게 찾을 수 있도록 함수를 제공해주는 라이브러리입니다.

여기서 테스트하는 App은 MacOS 버전이기 때문에 macos/Runner/DebugProfile.entitlements 파일에 다음 Permission도 추가해줍니다.


macos/Runner/DebugProfile.entitlements

<dict>
  ...
	<key>com.apple.security.files.user-selected.read-write</key>
    <true/>
</dict>


main.dart

import 'dart:io';

import 'package:file_chooser/file_chooser.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('File Dialog Example'),
        ),
        body: SnowDeerExampleWidget(),
      ),
    );
  }
}

class SnowDeerExampleWidget extends StatefulWidget {
  @override
  State createState() => SnowDeerExampleWidgetState();
}

class SnowDeerExampleWidgetState extends State<SnowDeerExampleWidget> {
  void showOpenDialog() async {
    String initDirectory;
    if (Platform.isMacOS || Platform.isWindows) {
      initDirectory = (await getApplicationDocumentsDirectory()).path;
    }

    showOpenPanel(
      allowsMultipleSelection: true,
      initialDirectory: initDirectory,
    ).then((value) {
      final paths = value.paths;

      for (int i = 0; i < paths.length; i++) {
        final path = paths[i];
        print('- path: $path');
      }
    });
  }

  void showSaveDialog() {
    showSavePanel().then((value) {
      final paths = value.paths;

      for (int i = 0; i < paths.length; i++) {
        final path = paths[i];
        print('- path: $path');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          children: [
            RaisedButton(
              child: Text('Show open dialog'),
              onPressed: () {
                showOpenDialog();
              },
            ),
            RaisedButton(
              child: Text('Show save dialog'),
              onPressed: () {
                showSaveDialog();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Flutter 기존 프로젝트에 MacOS 실행 환경 추가

|

Flutter 기존 프로젝트에 MacOS 실행 환경 추가

기존에 만들어진 Flutter 프로젝트에 MacOS 실행 환경을 추가하는 방법입니다. 리눅스 PC에서 생성한 Flutter 프로젝트를 MacOS에서 실행하면 처음에 다음과 같은 메시지가 발생합니다.

flutter run -d macos
Launching lib/main.dart on macOS in debug mode...
Exception: No macOS desktop project configured. See
https://flutter.dev/desktop#add-desktop-support-to-an-existing-flutter-project to learn about adding
macOS support to a project.


해결법

flutter create . 명령어를 실행하면 됩니다.

$ flutter create .

Recreating project ....
  snowdeer_flutter_sample.iml (created)
  macos/Runner.xcworkspace/contents.xcworkspacedata (created)
  macos/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_16.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_1024.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_256.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_64.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_512.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_128.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_32.png (created)
  macos/Runner/DebugProfile.entitlements (created)
  macos/Runner/Base.lproj/MainMenu.xib (created)
  macos/Runner/MainFlutterWindow.swift (created)
  macos/Runner/Configs/Debug.xcconfig (created)
  macos/Runner/Configs/Release.xcconfig (created)
  macos/Runner/Configs/Warnings.xcconfig (created)
  macos/Runner/Configs/AppInfo.xcconfig (created)
  macos/Runner/AppDelegate.swift (created)
  macos/Runner/Info.plist (created)
  macos/Runner/Release.entitlements (created)
  macos/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  macos/Runner.xcodeproj/project.pbxproj (created)
  macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (created)
  macos/Flutter/Flutter-Debug.xcconfig (created)
  macos/Flutter/Flutter-Release.xcconfig (created)
  macos/.gitignore (created)
  android/snowdeer_flutter_sample_android.iml (created)
  .idea/runConfigurations/main_dart.xml (created)
  .idea/libraries/KotlinJavaRuntime.xml (created)
Wrote 33 files.

All done!

Dart Coding Style

|

Dart Coding Style 은 공식 홈페이지에서 확인할 수 있습니다.

Identifiers

클래스명, 변수명, 함수명 등을 표현하는 Identifiers에는 다음과 같이 가장 많이 사용되는 3가지 유형이 있습니다. Dart에서는 이 3가지 유형을 전부 활용하고 있습니다.

  • UpperCamelCase
  • lowerCamelCase
  • lowercase_with_underscores


클래스, enum 이나 typedef, extension 등에는 UpperCamelCase

class SliderMenu { ... }

class HttpRequest { ... }

typedef Predicate<T> = bool Function(T value);

extension MyFancyList<T> on List<T> { ... }

extension SmartIterable<T> on Iterable<T> { ... }


라이브러리, 패키지, 디렉토리, 소스 파일 이름 및 import prefix에는 lowercase_with_underscores

library peg_parser.source_scanner;

import 'file_system.dart';
import 'slider_menu.dart';

import 'dart:math' as math;
import 'package:angular_components/angular_components'
    as angular_components;
import 'package:js/js.dart' as js;


그 외의 이름에는 lowerCamelCase

클래스 멤버 변수, 최상위(Top-level) 선언, 변수, 파라메터 등은 전부 lowerCamelCase를 사용합니다.

var item;

HttpRequest httpRequest;

void align(bool clearItems) {
  // ...
}


상수값(Constant)에서도 lowerCamelCase

대부분의 언어에서는 상수 값을 나타내는 변수에는 모두 대문자(SCREAMING_CAPS)로 표현하는 경우가 많은데, Dart에서는 lowerCamelCase를 권장합니다. (과거에는 Dart에서도 SCREAMING_CAPS 스타일을 사용했으나 몇 가지 단점으로 인해 lowerCamelCase 스타일로 변경했습니다.)

const pi = 3.14;
const defaultTimeout = 1000;
final urlScheme = RegExp('^([a-z]+):');

class Dice {
  static final numberGenerator = Random();
}

물론 권장이기 때문에 다음과 같은 경우에는 예외적으로 SCREAMING_CAPS를 허용하기도 합니다.

  • SCREAMING_CAPS 형태 네이밍의 변수를 사용하고 있는 기존 코드나 라이브러리를 사용할 경우
  • Dart 코드를 Java 코드와 병행해서 개발할 경우


약어들의 스타일

약어들을 대문자로만 사용할 경우 가독성에 어려움이 발생할 수 있으며, 뜻이 모호해지기도 합니다. 예를 들어 HTTPSFTP와 같은 단어는 HTTPS FTP인지 HTTP SFTP인지 알아 볼 수 없습니다. 따라서 두 단어 이상의 약어들은 일반 단어 사용하듯이 대소문자를 사용하면 됩니다.

good 예시

HttpConnectionInfo
uiHandler
IOStream
HttpRequest
Id
DB

bad 예시

HTTPConnection
UiHandler
IoStream
HTTPRequest
ID
Db


언더스코어(_)를 prefix로 사용하지 말 것

언더스코어(_)는 private를 의미하기 때문에 사용하지 말아야 합니다.


변수 이름 앞에 prefix 사용할 필요 없음

Hungarian Notation과 같이 과거에는 변수가 어떤 용도로 사용되는 건지 코드 가독성을 위해 변수 타입에 대한 prefix를 붙이는 경우가 많았으나, Dart에서는 변수의 타입, 범위(Scope), Mutability 등 요소를 모두 알려주기 떄문에 별도의 prefix를 사용할 필요가 없습니다.


import 순서

dart, package, 그 외 코드 순으로 import 합니다. 또한 exportimport 뒤에 배치하며, 각 구문은 알파벳 순으로 정렬합니다.

import 'dart:async';
import 'dart:html';

import 'package:bar/bar.dart';
import 'package:foo/foo.dart';

import 'util.dart';

import 'src/error.dart';
import 'src/foo_bar.dart';

export 'src/error.dart';


Formating

  • dartfmt을 이용해서 formatting 적용
  • formatter에 의존하기 전에 먼저 formatter-friendly한 형태로 코드를 정리
  • 한 라인에는 80글자까지(다만 URL이나 멀티라인의 경우는 예외)

if 문 중괄호

if (isWeekDay) {
  print('Bike to work!');
} else {
  print('Go dancing or read a book!');
}

if (overflowChars != other.overflowChars) {
  return overflowChars < other.overflowChars;
}

if 문에 else 구문이 없는 경우는 다음과 같이 한 줄로 표현도 가능합니다.

if (arg == null) return defaultValue;

모던 C++ 입문 책 요약 - (1)

|

모던 C++ 입문 책을 읽고 실수하기 쉽거나 유용한 팁, 더 나은 방법 등을 정리해보았습니다.

LVvalue

주소를 지정할 수 있는 항목을 Lvalue라고 합니다.

int i = 3;
i++;
const int j = 5;
j++;
(3 + 5)++;

위의 코드에서 오직 iLvalue입니다.

증감 연산자(++, –) 등은 가독성 등에서 좋지 않습니다. j++ 보다는 j+1이 가독성이 더 좋으며, 컴파일러 최적화도 더 쉽습니다.


할당 연산자

할당 연산자는 오른쪽에서 왼쪽 순서로 결합됩니다. 하지만 가독성에서 그렇게 좋은 편은 아닙니다. 할당 연산자를 쓰지 말고 전부 개별 라인으로 작성하기를 강제화하는 언어도 있습니다.

o3 = o2 = o1 = expr;


인라인(inline)

함수를 호출하면 내부적으로 레지스터(Register)에 저장하고 스택(Stack)에 인수를 복잡하는 작업을 수행합니다. 제법 무거운 비용이 발생하며 컴파일러는 최적화 과정을 통해 함수 호출을 inline하기도 합니다.

inline을 하면 해당 코드를 함수에 포함된 연산으로 대체합니다. inline 키워드를 이용해 직접 컴파일러에게 인라인 여부를 요청할 수 있습니다.

inline double square(double x) { return x * x; }

물론 컴파일러가 inline을 무조건 수행할 의무는 없으며, 최적화 과정에서 inline 선언되지 않은 함수를 inline 하기도 합니다.


main 함수

main() 함수는 주로 다음과 같은 형태로 작성됩니다.

int main() {
  // ...
}

int main(int argc, char* argv[]) {
  // ...
}

int main(int argc, char** argv[]) {
  for (int i = 0; i < argc i++) {
    cout << argv[i] << endl;
  }

  return 0;
}

main 함수릐 리턴 값은 표준을 준수할 경우 0을 리턴합니다. (<cstdlib>EXIT_SUCCESS 매크로에 정의되어 있습니다.) return 문을 생략하더라도 컴파일러가 자동으로 return 0;을 삽입하는 경우도 있습니다.


assert

assert는 C에서 상속받은 매크로이지만 여전히 유용하게 사용되고 있습니다. 괄호 부분이 false이면 프로그램을 종료합니다.

assert의 가장 큰 장점은 개발시 마음껏 사용하다가 릴리즈(release) 모드로 빌드하면 실행 파일에서 아무런 동작을 하지 않도록 할 수 있다는 점입니다.


Exception

throw를 이용해서 예외를 던질 수도 있습니다. 이 함수를 호출하는 부분에서 예외 처리를 하지 않으면 App Crash가 발생합니다.

matrix read_matrix_file(const char* fname, ...) {
  fstream f(fname);
  if (!f.is_open()) {
    throw "Cannot open file.";
  }
  // ...
}

C++에서 문자열, 숫자, 사용자 정의 타입 등 모든 타입을 예외로 처리할 수 있지만, 적절하게 처리하게 위해서는 예외 타입을 별도로 정의하거나 표준 라이브러리의 메소드를 사용하는게 좋습니다.

예외 처리는 try ~ catch 구문으로 수행할 수 있습니다. catch(...) 블록으로 모든 예외를 처리할 수도 있습니다.


endl\n

둘 다 다음 라인으로 넘어가는 개행 문자를 생성합니다. 하지만 두 방식은 동작에서 조금 차이가 있습니다.

효율적인 출력을 위해 버퍼링(Buffering)을 사용하는데, endl은 버퍼를 비우지만, \n은 버퍼를 비우지 않습니다. 버퍼를 비우는 작업은 디버거(Debugger) 없이 디버깅 할 때 프로그램의 Crash가 발생하는 출력을 찾는데 도움이 됩니다. 대신 I/O가 느려질 수 있는 단점이 있습니다.


stringstream

표준 라이브러리에서 제공하는 stringstream은 출력 가능한 모든 타입의 문자열을 만드는데 사용할 수 있습니다. str() 메소드를 이용해서 스트림의 내부 문자열을 반환할 수 있습니다.


C++의 I/O 오류 처리

C++의 I/O에는 안전 장치가 없습니다. 예를 들어 다음과 같은 코드에서

int main() {
  std::ifstream infile("some_missing_file.txt";
  int i = 0;
  infile >> i;

  infile.close();

  return 0;
}

파일이 만약 존재하지 않더라도 파일을 여는 작업은 실패하지 않습니다.

기본적으로 스트림은 예외를 발생하지 않습니다. 역사적으로 스트림이 예외 처리보다 먼저 등장했기에 그동안의 코드 호환성을 위해 어쩔 수 없이 이렇게 되었으며, 그래서 보통 별도 플래그 체크를 통해 오류를 확인합니다.

int main() {
  std::ifstream infile("some_missing_file.txt";
  if(infile.good()) {
    int i = 0;
    infile >> i;
  }

  infile.close();

  return 0;
}


배열

배열의 크기는 컴파일 타임(Compile-time)에 결정되어져야 합니다. 런타임(Runtime)에 동적으로 바꾸고 싶을 경우에는 vector 등을 이용해야 합니다.

Introduction to widgets - (3)

|

조금 복잡한 예제

class Product {
  const Product({this.name});
  final String name;
}

typedef void CartChangedCallback(Product product, bool inCart);

class ShoppingListItem extends StatelessWidget {
  ShoppingListItem({this.product, this.inCart, this.onCartChanged})
      : super(key: ObjectKey(product));

  final Product product;
  final bool inCart;
  final CartChangedCallback onCartChanged;

  Color _getColor(BuildContext context) {
    // The theme depends on the BuildContext because different parts
    // of the tree can have different themes.
    // The BuildContext indicates where the build is
    // taking place and therefore which theme to use.

    return inCart ? Colors.black54 : Theme.of(context).primaryColor;
  }

  TextStyle _getTextStyle(BuildContext context) {
    if (!inCart) return null;

    return TextStyle(
      color: Colors.black54,
      decoration: TextDecoration.lineThrough,
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () {
        onCartChanged(product, inCart);
      },
      leading: CircleAvatar(
        backgroundColor: _getColor(context),
        child: Text(product.name[0]),
      ),
      title: Text(product.name, style: _getTextStyle(context)),
    );
  }
}

ShoppingListItem 클래스는 일반적인 StatelessWidget 위젯의 패턴을 따르고 있습니다. final로 정의된 변수들(product, inCart, onCartChanged)은 생성자로부터 전달받아 할당됩니다. 그리고 build() 메소드내에서 렌더링에 활용됩니다.

사용자가 위젯을 터치(onTab())하면 ShoppingListItem 클래스 내에서 이벤트를 처리하는 것이 아니라 부모로부터 생성자를 통해 전달받은 onCartChanged() 콜백 함수를 호출합니다. 이러한 패턴은 상태(state)값을 해당 위젯이 아닌 상위의 부모에게 전달함으로써 state를 더 오래동안 지속되도록 할 수 있으며 ShoppingListItem 위젯은 상태 관리할 필요 없이 주어진 값만 렌더링하면 되기 때문에 훨씬 가벼운 위젯이 될 수 있습니다.

onCartChanged() 이벤트를 전달받은 상위 부모는 그 안에서 state를 바꾸며, 그 결과에 따라 ShoppingListItem 인스턴스를 새로 생성하며 렌더링도 다시 이루어지도록 합니다. 이러한 동작은 프레임워크가 변경된 부분만을 갱신하기 때문에 가볍고 빠릅니다.


부모 위젯 예제

class ShoppingList extends StatefulWidget {
  ShoppingList({Key key, this.products}) : super(key: key);

  final List<Product> products;

  // The framework calls createState the first time a widget
  // appears at a given location in the tree.
  // If the parent rebuilds and uses the same type of
  // widget (with the same key), the framework re-uses the State object
  // instead of creating a new State object.

  @override
  _ShoppingListState createState() => _ShoppingListState();
}

class _ShoppingListState extends State<ShoppingList> {
  Set<Product> _shoppingCart = Set<Product>();

  void _handleCartChanged(Product product, bool inCart) {
    setState(() {
      // When a user changes what's in the cart, you need to change
      // _shoppingCart inside a setState call to trigger a rebuild.
      // The framework then calls build, below,
      // which updates the visual appearance of the app.

      if (!inCart)
        _shoppingCart.add(product);
      else
        _shoppingCart.remove(product);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shopping List'),
      ),
      body: ListView(
        padding: EdgeInsets.symmetric(vertical: 8.0),
        children: widget.products.map((Product product) {
          return ShoppingListItem(
            product: product,
            inCart: _shoppingCart.contains(product),
            onCartChanged: _handleCartChanged,
          );
        }).toList(),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    title: 'Shopping App',
    home: ShoppingList(
      products: <Product>[
        Product(name: 'Eggs'),
        Product(name: 'Flour'),
        Product(name: 'Chocolate chips'),
      ],
    ),
  ));
}

ShoppingList 위젯은 StatefulWidget 위젯입니다. ShoppingList 위젯이 UI Tree에 추가되면, 프레임워크에서는 createState() 메소드를 호출하여 _ShoppingListState 안스턴스를 생성합니다.

만약 ShoppingList 위젯의 부모 위젯이 새로 갱신되면, 하위 자식 위젯들도 갱신이 됩니다. 이 때, ShoppingList 인스턴스는 새로 만들어지지만 _ShoppingListState 인스턴스는 기존에 만들어진 인스턴스를 재활용하게 됩니다. _ShoppingListStatebuild() 메소드를 통해 새로운 위젯을 그리게 되는데, 이 때 didUpdateWidget() 메소드를 오버라이딩(overriding)하게 되면 old Widget 과 current Widget을 비교 후 다시 그릴 필요가 있는지를 정할 수 있습니다.

setState()state가 변경되었음을 프레임워크에 알려주며 프레임워크에서는 자식 위젯들을 새로 build()합니다.