nomad-programmer

글자나 그림 같이 이벤트 프로퍼티가 없는 위젯에 이벤트를 적용하고 싶을 때 사용하는 위젯이다. GestureDetector와 InkWell 위젯은 터치 이벤트를 발생시킨다. onTab 프로퍼티를 가지고 있어서 child 프로퍼티에 어떠한 위젯이 와도 클릭 이벤트를 작성할 수 있다. 따라서 Text, Image 등의 위젯에도 간단히 클릭 이벤트를 추가할 수 있다. GestureDetector( onTab: () { // 클릭 시 실행 }, child: [위젯], ), InkWell( onTab: () { // 클릭 시 실행 }, child: [위젯], ), InkWell 위젯으로 감싸고 클릭하면 물결 효과가 나타나지만 GestureDetector 위젯은 그렇지 않다. GestureDetector & Ink..

TimePicker 위젯을 시간을 선택할 때 사용하는 위젯이다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => ..

Flutter Studio https://flutterstudio.app AppBuilder 2 20180529-19:35 flutterstudio.app 비주얼 에디터인 플러터 스튜디오를 이용하면 드래그&드롭으로 위젯을 간단히 시험할 수 있다. 대신 코드 수정은 불가능하다. 위젯을 드래그&드롭하여 화면에 배치하고 '{ } source code'를 누르면 소스 코드를 바로 확인할 수 있다. Dart Pad 코드는 안드로이드 스튜디오에서 작성하는 것이 기본이지만 급하게 무언가 테스트해보고 싶을 때는 다트 패드 웹 서비스를 이용하는 것도 좋다. https://dartpad.dev DartPad dartpad.dev 여러 가지 샘플 앱도 준비되어 있다.

화면을 구성하는 컴포넌트를 위젯이라고 부른다. 화면을 구성하려면 다양한 위젯을 조합해야 하므로 가능하면 많은 위젯을 아는 것이 좋다. https://flutter.dev/docs/development/ui/widgets Widget catalog A catalog of some of Flutter's rich set of widgets. flutter.dev 앱을 만들려면 기본 위젯을 알아야 한다. UI를 위젯의 조합으로 구성하기 때문이다. 플러터는 머티리얼 디자인을 표준 디자인으로 채용하고, 필요에 따라서 iOS 쿠퍼티노 디자인도 사용할 수 있다. 그리고 다양한 화면 크기에 대응하는 방법을 제공한다. 화면 배치에 쓰는 기본 위젯 위젯 중에는 화면을 구성하고 배치하는 데 뼈대가 되는 것이 있다. Cont..

버튼을 누르면 "Hello, World!", "안녕, 세상!" 이렇게 두 개의 문자열이 번갈아가며 변경되는 것을 만들어보았다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override..

프로젝트를 새로 작성하면 샘플 앱이 표시된다. 프로젝트 창의 lib 폴더에서 main.dart 파일을 클릭하면 전체 코드를 볼 수 있다. import 'package:flutter/material.dart'; // 앱 시작 부분 void main() { runApp(MyApp()); } // 시작 클래스. 메터리얼 디자인 앱 생성 class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Col..

플러터 앱을 잘 만들려면 먼저 프로젝트를 구성하는 폴더와 파일 역할을 알아야 한다. 1. 프로젝트를 구성하는 폴더 2. 프로젝트를 구성하는 파일 프로젝트를 구성하는 폴더는 다음과 같다. .idea : 개발 도구에 필요한 설정 android : 안드로이드 네이티브 코드를 작성하는 부분 build : 빌드시 생성되는 파일 ios : iOS 네이티브 코드를 작성하는 부분 lib : 다트 코드를 작성하는 부분 test : 테스트 코드를 작성하는 부분 프로젝트를 구성하는 파일은 다음과 같다. .gitignore : Git 설정 파일. 버전 관리지 무시할 파일 규칙 작성 .metadata : 프로젝트가 관리하는 파일. 임의로 수정하지 않는다. .packages : 각종 패키지 정보. 임의로 수정하지 않는다. flu..

다트의 버전이 올라가면서 유용한 기능이 계속해서 추가되고 있는데, 이러한 기능들을 잘 사용하면 좀 더 간결한 코드를 작성하는 데 도움이 된다. 계단식 표기법, 컬렉션 if, 컬렉션 for, null을 다루는 연산자를 알아보자. 계단식 표기법 .. 연산자 계단식 표기법(cascade notation) .. 연산자를 사용하면 동일 객체에서 일련의 작업을 수행할 수 있다. 컬렉션의 add() 메소드는 void를 반환하고 remove() 메소드는 bool을 반환하지만 '..' 연산자를 사용하면 메소드를 수행한 객체의 참조를 반환한다. 다음은 리스트에 6을 추가하고 2를 제거하여 출력하는 코드이다. void main() { final items = [1, 2, 3, 4, 5]; var result = items;..

다트는 객체 지향 프로그래밍과 함수형 프로그래밍의 특징을 모두 제공한다. 함수형 프로그래밍은 자료 처리를 수학적 함수의 계산으로 취급하는 프로그래밍 패러다임이다 (상태와 가변 데이터를 기피한다). 특히 다트의 컬렉션은 함수형 프로그래밍을 지원하는 다양한 함수를 제공한다. 자주 사용하는 몇 가지를 알아보자. 일급 객체 다트에서는 함수를 값으로 취급할 수 있다. 그러므로 다른 변수에 함수를 대입할 수 있다. void greeting(String text) { print(text); } void main() { var f = greeting; f('hello'); } /* 결과 hello */ 다른 함수의 인수로 함수 자체를 전달하거나 함수를 반환받을 수도 있다. void something(Function(i..

다트는 List, Map, Set 등의 컬렉션을 제공한다. 다트에서 컬렉션은 기본 제공하는 자료 구조를 말한다. List : 같은 타입으 ㅣ자료를 여러 개 담을 수 있고 특정 인덱스로 접근할 수 있다. Map : 키(key)와 값(value)의 쌍으로 저장할 수 있고 키를 통해 값을 얻을 수 있다. Set : 중복이 허용되지 않고, 찾는 값이 있는지 없는지 판단하고자 할 때 사용한다. List List는 순서가 있는 자료를 담는 컬렉션이다. 다른 언어에서는 대부분 배열과 리스트가 별도로 제공되지만, 다트는 배열을 제공하지 않는다. List numbers = [1, 2, 3, 4, 5]; var numbers = [1, 2, 3, 4, 5]; 는 리스트에 담길 데이터 타입을 지정한 것이다. 하지만 컬렉션도..

다트는 실제 현실 세계를 반영한 객체 지향 프로그래밍 언어이다. 클래스 컴퓨터 세계에서 객체(object)는 저장 공간에 할당되어 값을 가지거나 식별자에 의해 참조되는 공간을 말한다. 변수, 자료 구조, 함수 또는 메소드 등이 객체가 될 수 있다. 이러한 객체를 메모리에 작성한느 것을 '인스턴스(instance)화' 한다고 하며 메모리에 작성된 객체를 인스턴스라고 한다. 인스턴스화하기 위해서는 설계도가 필요한데 설계도 역할을 하는 것이 클래스(class)이다. 클래스 안에는 속성을 표현할 수 있는데 이를 프로퍼티(property) 라고 한다. class Person { String name; int age; } void main() { Person person = new Person(); // new 키..

플러터 개발에는 다트 언어를 사용한다. 다트 문법 온라인 메뉴얼 https://dart.dev/guides/language/language-tour A tour of the Dart language A tour of all of the major Dart language features. dart.dev 다트 문법은 main() 함수가 진입점(entry point)이다. void main() { print('Hello, World!'); } 주석 // 이것도 주석 /* 이것도 주석 */ /// 이것도 주석 void something() {} // : 한줄 주석 /* ... */ : 여러줄 주석 /// : 문서 주석 ///를 메소드나 클래스 정의 위에 작성하면 dartdoc과 같은 문서 생성 도구를 통해 ..