Tag & Linked Page

[[플러터]]

머리말

저자들의 이력을 보면 그 사람의 기술 스택을 알 수 있다.
저자 세 분 모두 공통적으로 JSP를 이용해서 개발을 주로 하셨고 두 분은 라즈베리파이4에 IoT를 올리는 책도 만드셨다. 그리고 머리말을 읽어보면 어떻게 하다가 플로터를 접하게 되었는지 잘 나와있다.

퓨시아(Fuchsia)

구글에서 개발하는 소형 시스템용으로 설계된 경량 OS

지르콘(Zircon)이라는 마이크로 커널을 사용하는데, 지르콘은 LK라는 마이크로 커널을 가지고 자체 개발한 것이다.(git fork정도로 이해하면 되겠다)

https://opensource.googleblog.com/2020/12/expanding-fuchsias-open-source-model.html
https://fuchsia.googlesource.com/

퓨시아에 대한 자세한 글 링크

Google의 새로운 운영 체제 인 Fuchsia 란 무엇입니까? - TheFastCode

www.thefastcode.com

머리말의 결론

플러터는 시아, iOS, android 3가지에 대해서 최대 호환성으로 앱을 작성할 수 있다.
구글의 프레임워크에서 UI를 Flutter가 담당하게 될 가능성이 높다.

CH 1. 플러터 이해하기

플러터의 모든 것은 위젯이다 (20p)
skia엔진으로 렌더링되고 있다 (21p)
RN과 Flutter의 렌더링 차이(22p)
- Flutter는 JVM처럼 VM이 있어서 가능한듯
AOT(Ahead of time)과 JIT(Just in time) (23p)
플러터 아키첵처 (24p)
플러터 2.0부터 데스크탑 앱, 웹을 지원한다 (25p)

CH 2. 플러터 시작하기

설치는 책/구글링을 참조하면 됩니다

Visual Studio code에서

Extension에서 dart를 설치한 이후에,

Project 생성

Shift + Ctrl + p => Flutter: New application project

emulator 열기

Shift + Ctrl + p => Flutter: Lunach Emulator

flutter 앱 올리기

$ flutter run

web으로 실행

$ flutter run -d chrome

CH 3. Dart 문법 익히기

dartpad에서 연습하기

https://dartpad.dev/

DartPad

dartpad.dev

dart with html

import 'dart:html';

void main() {
  final header = querySelector('#header');
  header?.text = "Hello, World!";


  DivElement div = new DivElement();
  final span = new Element.tag('span');

  span.text = "Here's my test code by hklee";
  div.append(span);

  final test = querySelector('#test');
  test?.append(div);
}

html section

<h1 id="header"></h1>

<div id="test"> </div>

css section

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

h1 {
  color: yellow;
  font-family: Arial, Helvetica, sans-serif;
}

#test {
  color: blue;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
}

문법 연습

타입확인 : runtimeType
- print("정수 : ${n1.runtimeType}")
var(타입변경 불가능), dynamic(타입변경 가능)
- javascript에서는 var은 변경가능했는데 dart에서는 불가능함
익명함수, 람다식 (60p)
- (매개변수) {동작} / (매개변수)=>동작 혹은 반환값
- javascript와 비슷하면서 비슷하지 않은 표현들이다
class의 constructor의 initialize 방법 (67p)

cascade연산자 (67p)

신박하다. 객체 생성하고 바로 함수호출하는 방법

class TestSet {
  int callCnt = 0;
  String name;

  TestSet({this.name = "lee"});
  
  void callMe() {
    print(name + " call count ${callCnt++}");
  }
  
  void ready() {
    print("READY!!");
  }
  
  void set() {
    print("SET!!");
  }
  
  void go() {
    print("GO!!");
  }
}

void main() {
  TestSet tset1 = TestSet(name:"hklee")..callMe()..callMe()..callMe()..callMe();
  TestSet tset2 = TestSet(name:"hklee")..ready()..set()..go();
}

Console

hklee call count 0
hklee call count 1
hklee call count 2
hklee call count 3
READY!!
SET!!
GO!!

Mixin (72p)
- 여러 클래스의 코드를 재사용하는 방법
- 클래스 자체를 ...(스프레드 연산자) 로 풀어놓는 느낌이다

class Engine {
  int _power = 5000;

  int getPower() {
    return _power;
  }
}

class Wheel {
  String _wheelName = "continental";

  String getWheelName() {
    return _wheelName;
  }
}

class BENZ with Engine, Wheel {
}

void main() {
  BENZ z = new BENZ();
  print("power : ${z.getPower()}");
  print("wheel : ${z.getWheelName()}");
}

반복문
- where 연산자
  - javascript의 filter와 비슷하다
final과 const (82p)
- final은 프로그램이 runtime에 초기화, const는 컴파일 시점에 값이 초기화
Null Safety란
- Dart 2.12버전부터 적용
- Null을 객체가 받을 수 있게 만드는 것
- String? name = null; //가능 String name = null; //오류, 불가능
required 키워드
- 클래스 생성자에 사용하면 클래스를 생성할 때 무조건 받아야하는 값으로 인식

나머지 객체에 대한 부분이나 반복문 등은 C++, javascript와 비슷하거나 동일합니다

실습

아래 주소에 있는 repository를 다운받아놓고 시작하면 편합니다
프로젝트를 새로 만들고 나면 assets부분을 먼저 복사/붙여넣기 합니다

git repository 주소

GitHub - flutter-coder/flutter-ui-book1

Contribute to flutter-coder/flutter-ui-book1 development by creating an account on GitHub.

github.com

CH 05. 레시피앱 만들기

111 p부터 시작합니다

처음 시작으로 만들어본 클론코딩 예제
무난하게 시작하기에 좋은 예제인것 같습니다
개발 시간은 40분 정도 걸렸습니다.

https://youtu.be/401LVCd30EI

CH 09. 모두의 숙소 웹 만들기

웹 개발도 같이 하는 예제 해보기 위해서 선택했습니다
예제를 복붙없이 따라쳐봤는데 넉넉히 2시간 정도 걸린것 같습니다

https://youtu.be/rwuiz6zi5qg

정오 내용

1. import 누락

216p / home_header_appbar.dart에 아래 코드 추가
import 'package:flutter_airbnb/styles.dart';

226p / home_body_popular_item.dart에 아래 코드 추가
import 'package:flutter_airbnb/styles.dart';

228p / 에도 추가
import 'package:flutter_airbnb/styles.dart';

2. mobile style 수정

home_body_banner.dart
모바일에서 오른쪽 글씨가 짤림

Widget _buildBannerCaption() {
  return Positioned(
    top: 40,
    left: 20,
    right: 20,

총평

재미있는 예제가 너무 많아서 어떤것 부터 할지가 고민이였습니다
그래서 처음 시작은 간단한 listView로 만들어진 것으로하고
두 번째는 web도 같이 출력을 하는 것으로 골랐습니다.

그 이후엔 모두의채팅 앱으로 화면전환과 state관리도 해보면 좋을것 같습니다.
마지막엔 스스로 기획을 해보고 필요한 재료들을 모아서 구현하는 것까지 하면
플러터를 더 재미있게 개발해볼 것 같습니다.

Reference

"엔써북에서 도서를 무상 제공받아 제작하였습니다"

저작자표시

모두가 할 수 있는 플러터 UI입문 - 서평