jsonEncode타입을 `String`으로 변환하는 함수.`import 'dart:convert';`라이브러리를 통해 사용할 수 있다.import 'dart:convert';void main() { Map myInfo = { "name": "Mark", "age": 20 }; // Map -> String String jsonString = jsonEncode(myInfo); print(jsonString); // {"name":"Mark","age":20} print(jsonString.runtimeType); // String // List -> String List list = [myInfo, myInfo]; String listJsonString = jsonEncod..
현재 버전Flutter : 3.29.2Dart : 3.7.2 Flutter에서 `ElevatedButton`위젯을 사용할 때 `style`속성을 이용해 버튼의 스타일링을 할 수 있다.그렇지만 스타일링에 사용하는 위젯이 2가지이다. 그래서 너무 헷갈리기에 정리해 본다. ButtonStyle 위젯기본 사용법// 편의를 위해 스타일 속성만 사용Widget myButton() { return ElevatedButton( style: ButtonStyle( backgroundColor: WidgetStatePropertyAll(Colors.red) ), ); }`ButtonStyle`위젯은 색을 지정하기 위해 `background: Colors.red`를 하면 에러가 발..
BuildContext `BuildContext`는 Flutter 위젯 트리에서 위젯의 위치와 상태에 대한 정보를 제공하는 객체.쉽게 말해, 현재 위젯이 위젯 트리 안에서 어디에 위치해 있는지 알려주는 역할을 한다.위젯 트리를 따라 부모, 자식, 형제 위젯에 접근할 때 사용Theme, MediaQuery, Navigator 같은 상위 계층에 있는 데이터에 접근할 때 필요 `Navigator.pop`을 사용할 때 `context`를 인자로 넘겨줘야한다.`mybutton`커스텀위젯은 `build`메서드 내부에 있는 위젯이 아니기 때문에 `context`에 접근을 할 수 없어 에러가 발생한다. 해결 방법은 2가지가 있다. 인자로 Context를 사용 `myButton`을 호출 할 때 `build`메서드에 있..
2025.04.01 - [TIL(Today I Learned)] - [TIL-019] Flutter로 기차 좌석 예매 어플 만들기-1 [TIL-019] Flutter로 기차 좌석 예매 어플 만들기-1개요Flutter의 기본적인 상태 관리를 어떻게 하는지 알고 익숙해지기 위해 기차 좌석 예매 어플을 만들어 보자. 기능사용자의 시스템 테마에 따라 UI의 색상을 변경할 수 있다.상태 관리를 통해skyhyunjinlee.tistory.com 문제 발생 많은 좌석을 완성본처럼 배치시키기 위해 무의식적으로 `Column`위젯을 사용하려다가 멈칫했다.저번 TIL에서 언급했듯이 스크롤이 생기게 하기 위한 위젯은 따로 있었으니까. 공부를 한 보람을 느끼며 `ListView`위젯을 사용했지만 아래와 같은 아래가 수십 개나..
개요Flutter의 기본적인 상태 관리를 어떻게 하는지 알고 익숙해지기 위해 기차 좌석 예매 어플을 만들어 보자. 기능사용자의 시스템 테마에 따라 UI의 색상을 변경할 수 있다.상태 관리를 통해 출발역과 도착역을 선택하여 UI를 동적으로 변경할 수 있다.상태 관리를 통해 좌석을 선택 및 해제가 가능하며 좌석이 없을 경우에는 예매 버튼이 비활성화된다.Navigator위젯을 통해 라우팅을 할 수 있다. 문제 발생`Navigator`위젯을 통해 메인 페이지, 기차역 리스트 페이지, 좌석 페이지를 이동할 수 있게 됐다.그러나 가장 중요한 것은 페이지 이동 시, 데이터를 전달하는 방법이다. 다음 페이지를 라우팅 할 때 데이터를 전달하는 것은 어렵지 않다.문제는 이전 페이지로 다시 돌아올 때 데이터를 전달하는 방법..
AspectRatio`AspectRatio`위젯은 부모 위젯의 너비를 기준으로 가로 세로 비율을 정하여 본인의 크기를 지정하는 위젯이다.보통 이미지의 크기를 지정할 때 많이 사용하는 위젯이라고 하는데 이번에 연습하면서 이 위젯의 장점을 발견했기에 TIL을 작성해 본다. 상황세로 방향이미지의 너비를 500으로 지정한 상황다행히, 부모 위젯이나 뷰포트보다 이미지의 너비가 커서 아무 문제가 없어 보인다.그러나 이미지들의 원본 비율 때문에 높이가 다른 것을 볼 수 있다. 가로 방향이미지의 너비를 500으로 지정했기 때문에 핸드폰을 가로로 봐도 이미지의 크기가 변동이 없다.이러한 모습을 디자인했다면 상관없겠지만, 어떤 방향이든 이미지가 꽉 차야하는 경우가 있을 경우가 있다.이럴 때 `AspectRaio`를 사용하..