23 01 19 Thu

소다 학회 4일차

어제 도대체 몇시에 잠든거야!!

오늘은 정시 출근을 못했다.

팀스에 오니 09:08....

 

파이팅!

 

DAY4 Goals

💡 DAY4 입니다! 벌써 한 주가 끝나가네요! 가장 긴 하루가 될 오늘이지만 끝까지 힘내세요!

💪🏻 오늘은 Flutter에서 기본기가 다져지면 배우는 Tutorial app을 배우는 날이에요. 자신이 배운 기본기를 잘 적용하면서 Tutorial app을 만들어 보아요!

 

오늘의 목표

📍 텍스트에 대한 다양한 반응의 종류를 알고 이해한다.

📍 constraints의 의미를 알고 적절하게 사용한다. > contraints의 의미? 

📍 tutorial app을 만들어보며 배운 내용을 정리한다.

오늘의 세션

🥤 Git 세션

시간 : 오전 11시 장소 : 코딩스페이스

 

1.text

텍스트

 

TextStyle은 엄밀히  보면 위젯은 아니다. 

그대로의 일을 수행하는 기능이다.

텍스트를 꾸민다.

 

앱 중 하나의 텍스트 위젯을 입력하고

스타일 파라미터 추가

텍스트 스타일 26개 파마리터 중 지원을 해야한다.

 

매번 지정해주기엔 너무 많다

조금의 변경만 있는 것을 해주고 싶다면,

 

새로 생성하는 것이 아닌

어느 곳에서 정의 내리는 곳에 지정

가장 유사한 텍스트 copywith 를 하면 된다.

 

스캐트폴드 위젯 

scattdfold 위젯 

 

색상 앞면과 뒷면

color , background 

 

Flutter에서 텍스트의 기본 색상은 검은색이다.

 

텍스트의 불투명도 (withOpacity)

 

개발 색상의 불투명도를 추가로 조정할 수 있다.

0.0에서~ 1.0 사이의 doublue (실수형) 을 추가로 조정할 수 있다.

 

사이즈업

Flutter에서 기본 크기는 14pt 이다.

물론 그 값을 줄이거나 늘릴 수 있다.

TextStyle에서 fontSize 매개변수는 크기를 지정하기 위해서 이중 숫자 값을 사용한다.

지정된 크기에 현재 textScaleFactor (전통적으로 1.0) 를 더 곱한다.

 

약간의 공간 제공 (letterSpacing)

각 문자 사이의 간(논리 픽셀)을 지정할 수 있다.

음수 값은 문자를 더 가깝게 만든다.

 

단어간격 (wordSpacing)

각 단어 사이의 공백(논리 픽셀)의 양도 지정할 수 있다.

 

텍스트 기준선

Flutterㅇ에서는 textBaseline dㅔ 매개변수에 대한 두가지 열거형 설정이 있다.

그들은 알파벳과 표의 문자이다.

기본값은 갈파벳이다.

 

알파벳 기준선은 영어와 같은 알파벳의 글자가 앉는 선이다.

 

키

 

그림자

Shadow를 통해서 넣어준다.

 

개발에 레이블 지정

debugLabel은 매개변수 앱을 통해 텍스트 스타일을 다시 추적하기 위한 것이다.

앱 텍스트의 스타일은 전통적으로 다음 네 가지 함수 중  한 가지를 사용한다.

1. merge()

2. copyWith()

3. apply()

4. lerp()

--> 디버깅 및 개발을 하는 동안 assert() 함수는 현재 스타일이 가져온 '방법'을 기록하기 위해 네 가지 함수 모두에서 사용된다. 

 

글꼴 패밀리

-대체로 기본 글꼴은 장치 운영 체제에 따라 다르다.

그러나 모든 것이 동일하다면, MaterialApp 디자인 인터페이스의 기본 글꼴은 Google 글꼴인 'roboto'이다.

ios의 경우에는 'San Francisco' 글꼴이다.

대체 글꼴(제공된 글꼴이 전혀 없는 경우)는 MonoSpace이다.

 

 

DefalutTextStyle 전환

 

AnimatedDefalutTextStyle  - 지정된 기간 동안 텍스트 스타일의 변경 사항을 부드럽게 애니메이션화 한다.

- 명시적 스타일이 없는 하위 텍스트 위젯에 적용할 텍스트 스타일이다.

- 애니메이션의 경우 곡선, 기간을 선택 가능

- 위젯은 자동으로 새로운 기본 텍스트 스타일로 애니메이션된다.

- 애니메이션에 대한 더 많은 제어가 필요할 경우,DefaultTextStyleTransition 을 통해서 제공된 애니메이션을 인수로 하용한다. (하지만, 기본 Animation Controller 의 수명주기를 수동으로 관리해야하기 때문에 더 많은 개발 오버해드가 필요하다. ) 

 

DefaultTextStyleTransition - 제공된 애니메이션을 사용하여 시간 경과에 따른 텍스트 스타일의 변경 사항을 부드럽게 애니메이션화 한다 .

-AnimatedDefalutTextStyle 보다 더 많은 애니메이션을 인수로 할 떄 쓰는 것.

---

 

2. selectable text 

앱 상에서 화면상의 텍스트를 선택하고 싶을 때 사용

text 위젯과 같은 지정을 사용

 

showCursor

toolbarOption

scrollPhysics- 스크롤 방식을 지정할 수 있음 , 

 

---

3.RichText

애플리케이션의 프로토타입

다양한 사이즈와 폰트

다양한 스타일을 결합

선이나 단락을 띄우고싶을때 사용

 

Text.rich 생성자를 사용 > 범위당 지정된 스타일을 계속 허용

text : TextSpan 해야됌 

하이퍼 링크와 같은 역할로, 링크를 선택했을 때 해당 링크로 들어가지는 기능도 수행함.

 

이 RichText를 선택 가능하게 만드려면, RichText가 SelctionAre 또는 SelectableRegion 의 하위 트리에 있어야 하고, SelectionRegistar가 RichText.selectionRegistrar에 할당되어야 합니다.

 SelectionContainer.mybeOf를 사용하여 컨테스트에서 SelectionRegistrar를 가져올 수 있습니다.

 

+) 그외

TextStyle - 텍스트의 스타일을 지정하는 방법

TextSpan - 단락의 텍스트를 설명하는 데 사용

Texts는 DefaultTextStyle에서 설명하는 주변 스타일을 > 단일 문자열에 자동으로 등록

Text.rich는 RichText와 유사한 기능을 제공하는 constd 위젯이다.

Text.rich는 DefaultStyle에서 TextStyle을 상속한다.

SelectableRegion - 선택 시스템의 개요를 제공함.

 

---

Constraint

제한 사항 

1) 위젯은 부모가 지정한 제약 조건 내에서만 자체 크기를 정할 수 있다. > 이는 일반적으로 위젯이 원하는 크기를 가질 수 없음을 의미한다.

2) 위젯의 위치를 결정하는 것은 위젯의 부모이기 때문에, 위젯은 알 수 없으며 화면 자체의 위치를 결정하지 않는다.

3) 부모의 크기와 워치도 자체 부모에 따라 달라지므로, 트리 전체를 고려하지 않고 위젯의 크기와 위치를 정확하게 정의하는 것은 불가능하다.

4) 자식이 부모와 다른 크기를 원하고부모가 이를 정렬한 정보가 충분하지 않은 경우, 자식 크기는 무시될 수 있다. > 정렬을 정의할 때는 구체적이어야한다. 

 

---

< 실습 >

 

 

0단계~ 4단계로 나뉜 실습

 

우선 오늘은 정말 간단한 실습이다.

해야할 것은

1) 기본 화면 (기능이 구현되지않은 기본적인 상태)를 만들기. 

2) 기능이 구현될 수 있도록 코드 내에 기능 부터 차근차근 살펴보자.

 

우선 기본적으로 구성요소를 보면,  c언어에서 #include <stdio.h> 라고 지정해준 부분과 비슷하다고 이해를 하면 될 것 같다. 

import 'package:flutter/material.dart'; 

 

 

class는 총 두개 (class Myapp , _FavoriteWidgetState) 로, 최상위 클래스인 Myapp이라는 사용자 지정 클래스명으로 StatelessWidget이다. 상태에 대한 위젯이다.

 

@override 

> 이 부분은 자바프로그래밍에서 더 배울텐데, 내가 이해한 바대로 설명하면 

창건님이 설명해주신 자전거 예시

자전거 상위 (부모) 에 대해

하위 (자식) 이 스포츠자전거, 뭐 하이브리드 자전거, 등등등 여러 종류의 자전거가 있는 셈이다.

근데 override, overriding 해준다는 것은 물려주는 것 (상속) 외에도 추가 +  알파 라고 이해를 했다.

 

이미지 파일의 경우에는 확장자가 .png 파일이다.

강과 같은 호수의 사진이였기 때문에 lake.jpg 라고 저장해주었고,

 

assets라는 파일을 새로 생성해서, 그 파일안에 넣어주었다.

 

그리고 pubspec .yaml 파일에 들어가서 

flutter : 

 

uses-material-design: true

assets:

- lake.jpg 

 

를 꼭 저장해주어야한다.

 

그리고 다음 단계로는,

main 폴더 코드에서

Image.asset(

 'lake.jpg',  ///를 해준다. 이때 기본 코드에서는'lmage/lake.png' 라고 되어있었는데, 이 부분에서 Image를 지워주어야한다.

)

 

그리고 다음 코드를 쓰면 됌 .