[TIL-021] Flutter 위젯 파헤치기 - Builder

BuildContext `BuildContext`는 Flutter 위젯 트리에서 위젯의 위치와 상태에 대한 정보를 제공하는 객체.쉽게 말해, 현재 위젯이 위젯 트리 안에서 어디에 위치해 있는지 알려주는 역할을 한다.위젯 트리를 따라 부모, 자식, 형제 위젯에 접근할 때 사용Theme, MediaQuery, Navigator 같은 상위 계층에 있는 데이터에 접근할 때 필요  `Navigator.pop`을 사용할 때 `context`를 인자로 넘겨줘야한다.`mybutton`커스텀위젯은 `build`메서드 내부에 있는 위젯이 아니기 때문에 `context`에 접근을 할 수 없어 에러가 발생한다. 해결 방법은 2가지가 있다. 인자로 Context를 사용 `myButton`을 호출 할 때 `build`메서드에 있..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 4. 2.
• textsms

[TIL-020] Flutter로 기차 좌석 예매 어플 만들기-2

2025.04.01 - [TIL(Today I Learned)] - [TIL-019] Flutter로 기차 좌석 예매 어플 만들기-1 [TIL-019] Flutter로 기차 좌석 예매 어플 만들기-1개요Flutter의 기본적인 상태 관리를 어떻게 하는지 알고 익숙해지기 위해 기차 좌석 예매 어플을 만들어 보자. 기능사용자의 시스템 테마에 따라 UI의 색상을 변경할 수 있다.상태 관리를 통해skyhyunjinlee.tistory.com 문제 발생 많은 좌석을 완성본처럼 배치시키기 위해 무의식적으로 `Column`위젯을 사용하려다가 멈칫했다.저번 TIL에서 언급했듯이 스크롤이 생기게 하기 위한 위젯은 따로 있었으니까. 공부를 한 보람을 느끼며 `ListView`위젯을 사용했지만 아래와 같은 아래가 수십 개나..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 4. 1.
• textsms

[TIL-019] Flutter로 기차 좌석 예매 어플 만들기-1

개요Flutter의 기본적인 상태 관리를 어떻게 하는지 알고 익숙해지기 위해 기차 좌석 예매 어플을 만들어 보자. 기능사용자의 시스템 테마에 따라 UI의 색상을 변경할 수 있다.상태 관리를 통해 출발역과 도착역을 선택하여 UI를 동적으로 변경할 수 있다.상태 관리를 통해 좌석을 선택 및 해제가 가능하며 좌석이 없을 경우에는 예매 버튼이 비활성화된다.Navigator위젯을 통해 라우팅을 할 수 있다. 문제 발생`Navigator`위젯을 통해 메인 페이지, 기차역 리스트 페이지, 좌석 페이지를 이동할 수 있게 됐다.그러나 가장 중요한 것은 페이지 이동 시, 데이터를 전달하는 방법이다. 다음 페이지를 라우팅 할 때 데이터를 전달하는 것은 어렵지 않다.문제는 이전 페이지로 다시 돌아올 때 데이터를 전달하는 방법..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 4. 1.
• textsms

[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