[TIL-018] Flutter의 AspectRatio위젯의 재발견

AspectRatio`AspectRatio`위젯은 부모 위젯의 너비를 기준으로 가로 세로 비율을 정하여 본인의 크기를 지정하는 위젯이다.보통 이미지의 크기를 지정할 때 많이 사용하는 위젯이라고 하는데 이번에 연습하면서 이 위젯의 장점을 발견했기에 TIL을 작성해 본다. 상황세로 방향이미지의 너비를 500으로 지정한 상황다행히, 부모 위젯이나 뷰포트보다 이미지의 너비가 커서 아무 문제가 없어 보인다.그러나 이미지들의 원본 비율 때문에 높이가 다른 것을 볼 수 있다. 가로 방향이미지의 너비를 500으로 지정했기 때문에 핸드폰을 가로로 봐도 이미지의 크기가 변동이 없다.이러한 모습을 디자인했다면 상관없겠지만, 어떤 방향이든 이미지가 꽉 차야하는 경우가 있을 경우가 있다.이럴 때 `AspectRaio`를 사용하..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 3. 27.
• textsms

[TIL-017] Flutter 위젯 파헤치기 - Container

Flutter를 연습해 보니 `Container`위젯을 자주 사용하는 것 같다.마치 HTML의 `div`태그와 비슷한 용도인 것 같다.그래서 이번에는 자주 사용되는 만큼 중요한 `Container`위젯을 파헤쳐보자. Container 위젯이 위젯은 너비와 높이를 지정하고, 테두리, 그림자, 여백을 적용할 수 있는 박스이다.너비와 높이는 부모 위젯이 있는지, 자식 위젯이 있는지에 따라 우선순위가 달라진다. 크기 결정 원리부모, 자식 위젯이 없는 경우부모, 자식 위젯이 없으면 `Container`위젯의 크기는 0 자식 위젯만 있는 경우자식 위젯이 있으면 `Container`위젯의 크기는 자식의 크기를 가져온다. 부모 위젯만 있는 경우부모 위젯이 있으면 `Container`위젯의 크기는 부모의 크기를 가져온다..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 3. 27.
• textsms

[TIL-016] Flutter App은 스크롤 생성이 자동이 아니다

Dart문법을 공부했으니 이제 본격적으로 Flutter를 이용한 앱을 만들어보니 웹과는 다른 부분이 있었다. 상황Flutter에서는 UI(위젯)를 배치할 때, 세로 방향 배치를 하는 경우에는 `Column`위젯을 사용한다.그런데 세로로 배치를 하던 중 위젯이 뷰포트를 벗어나면 자동으로 스크롤이 생기는 것이 아니라 에러가 발생한다. 해결 방법스크롤을 생기게 하는 위젯이 따로 있었다.그것은 바로 `ListView`위젯이다.View 라는 이름에서도 알 수 있듯이 화면(뷰포트)에 관련된 위젯임을 알 수 있다.`Column`대신 사용하니 스크롤도 자동으로 생기고 에러도 말끔히 해결했다. 마무리(느낀 점)위젯이 css같아서 편한 느낌도 있지만 위젯들이 워낙 많고 웹에서는 당연하던 것이 앱에서는 안되니까 불편한 것도..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 3. 27.
• textsms

[TIL-014] Dart로 콘솔 텍스트 게임 만들기-2

2025.03.19 - [TIL(Today I Learned)] - [TIL-013] Dart로 콘솔 텍스트 게임 만들기-1 [TIL-013] Dart로 콘솔 텍스트 게임 만들기-1개요프로그램에서 비동기와 예외 처리는 매우 중요하다.그래서 비동기와 예외 처리를 익히고 익숙해지기 위해 콘솔 텍스트 게임을 만들어 보자. 기능캐릭터/몬스터가 턴을 교환하여 전투를 할skyhyunjinlee.tistory.com 문제 발생 마지막 남은 몬스터를 처치하면 터미널에 원일 모를 에러가 계속 출력이 되는 상황 발생 이유 추측에러에 `RangeError` 라는 단어가 있는 것을 보면 범위가 잘못 지정된 탓인 것 같다.범위 관련된 것은 `Random`클래스 밖에 없어서 아마 `Random`클래스 쪽이 문제인 것 같았다. 에..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 3. 21.
• textsms

[TIL-013] Dart로 콘솔 텍스트 게임 만들기-1

개요프로그램에서 비동기와 예외 처리는 매우 중요하다.그래서 비동기와 예외 처리를 익히고 익숙해지기 위해 콘솔 텍스트 게임을 만들어 보자. 기능캐릭터/몬스터가 턴을 교환하여 전투를 할 수 있다.난수를 이용해 몬스터 리스트에서 하나를 랜덤하게 뽑을 수 있다.텍스트 파일을 읽어 데이터로 사용할 수 있다.예외 처리를 통해 프로그램의 비정상 종료를 막을 수 있다.비동기로 새로운 텍스트 파일을 만들고 게임의 결과를 입력할 수 있다.몬스터의 체력이 50% 이하일 때 한 번만 60%의 확률로 전투 도중에 도망 갈 수 있다. 문제 발생새로운 파일을 생성하기 위해서는 `dart:io`라이브러리에 있는 `File().writeAsString()`를 이용할 수 있다.그러나 컴파일 에러가 발생했다.void createData(..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 3. 19.
• textsms

[TIL-012] 내가 모르는 메서드를 잘 사용할 수 있는 이유

Dart는 타입을 선언하는 것과 메서드의 반환 타입이 무엇인지 아는 것이 중요하다.근데 메서드의 반환 타입이 무엇인지 모르는 경우가 많다.물론, VSCode가 알려주지만 시그니처(메서드의 형태)가 도대체 어떤 의미인지까지는 잘 모른다.그래서 오늘은 공식 문서에 나오는 메서드의 시그니처를 읽는 방법을 공부했다. map 메서드`List`의 `length`만큼 반복문이 동작하는 메서드.콜백 함수에서 `List`의 각 요소를 읽어 올 수 있으며, return 되는 값을 모아 최종적으로 `Iterable`객체를 반환한다. 공식 문서에 나오는 코드를 분석해 보자.Iterable map( T toElement( E e ) ) Iterable`map`메서드가 최종적으로 반환할 타입을 말한다.var numbers = [..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 3. 19.
• textsms