[TIL-024] Flutter 상태관리 라이브러리 - Riverpod

MVVM프로그램을 작성하는 아키텍쳐(패턴, 구조)상태 관리 라이브러리를 효과적으로, 코드 관리를 효과적으로 관리하기 위해 사용하는 구조. M: ModelV: ViewVM: View Model Model: 데이터를 서버에서 가져오고 데이터를 사용할 수 있게 가공하기 위한 클래스를 작성Repository: Model의 한 부분으로 데이터를 서버에서 가져오는 담당View: UI를 나타내는 부분View Model: 데이터 또는 상태를 관리하기 위한 클래스를 작성 사용 방법1. ProviderScope// lib/main.dartimport 'package:flutter/material.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';import 'p..

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

[TIL-023] Dart에서 json사용하기

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..

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

[TIL-022] Flutter 도대체 버튼 스타일링 어떻게 해야 하는거야?

현재 버전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`를 하면 에러가 발..

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

[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