일정 관리 앱을 만들던 중 사이드 메뉴를 사용하려고 하니 `Drawer`를 사용해야 한다는 것을 알게됨.그래서 `Drawer`에 대해 정리를 해보려고함 `Drawer`란?사용자가 앱의 메뉴를 열거나 닫을 때 슬라이딩 형태로 화면에 나타나는 위젯주로 앱의 내비게이션 메뉴를 구현하는데 사용되고 다른 메뉴로 넘어가는 기능으로 사용됨Flutter에서는 `Drawer`위젯과 `Scaffold`를 조합하여 주로 사용함. 순서대로 보겠음. 예제1. `Scaffold` 생성App에 `Drawer`를 구현하려면, `Scaffold` 위젯으로 감싸야함.`Scaffold` 위젯은 `MATERIAL Design` 가이드 라인을 따르는 App에 일관된 시각적 구조를 제공함.`Drawer``AppBar``SnackBar`와 같은..

AI 챗봇을 공부하다보니 API를 가져와야 하는 상황이 생겼음.근데 또 취업하려고 공고를 보다보면 REST API에 대한 이해도?를 보는 곳이 굉장히 많았음.그럼 그 REST API는 무엇일까?REST API프로그램이 다른 프로그램과 통신하는 데 정해진 규격의 API를 이용함.예를 들어 일정 관리 앱에서 일정 날짜와 내용을 가져오는 API를 노출시키면 다른 클라이언트에서 해당 리소스를 불러올 수있음. REST(`Respresentational State Transfer`) API는 REST 기준을 따르는 HTTP API임.HTTP API이므로 `GET`, `POST`, `PUT`, `DELETE` 메서드를 제공함. 그렇다면 HTTP 요청에서 제공하는 `GET`, `POST`, `PUT`, `DELETE`..

오랜만에 포스팅이긴한데 공부하느라 바빴음..ㅎAI챗봇 실습을 하면서 사용한 주요 기능을 정리해보려고함1. 📦 실시간 메시지 갱신 (Isar + StreamBuilder)StreamBuilder>( stream: GetIt.I().messageModels.where().watch(fireImmediately: true), builder: (context, snapshot) { final messages = snapshot.data ?? []; // 위젯 트리 빌드 완료 후 맨 아래로 자동 스크롤 WidgetsBinding.instance.addPostFrameCallback((_) async => scrollToBottom()); return buildMessageList(mes..

위젯 생명 주기란?위젯이 화면에 그려지는 순간부터 삭제되는 순간까지의 주기를 의미함.플러터에서 UI를 표현할 때 사용되는 위젯인 `StatelessWidget`과 `StatefulWidget`이 있음 이걸 왜 알아야하냐?UI 상태 관리: `StatefulWidget`은 상태를 가지는 위젯으로, 사용자 인터페이스의 상태를 관리하는 데 사용됨.위젯이 화면에 표시되고 변경될 때마다 생명주기 메서드가 호출되며, 이를 통해 화면의 상태를 업데이트하고 반응적인 UI를 구현가능.상태 변경 감지: `StatefulWidget`의 생명주기 메서드를 이용하면 상태의 변화를 감지하고, 이에 따라 필요한 작업을 수행할 수 있음.예를 들어, 사용자의 입력에 따라 화면을 업데이트하거나 데이터를 로드하는 등의 작업을 수행할 수 있..

우선 실습한 프로젝트는 시뮬레이터에서 앱에서 웹으로 접근하는걸 실습해봤음https://github.com/Leedoseo/Flutter_WidgetStudy/tree/main/webapp_practice_projectFlutter_WidgetStudy/webapp_practice_project at main · Leedoseo/Flutter_WidgetStudyContribute to Leedoseo/Flutter_WidgetStudy development by creating an account on GitHub.github.com커밋 기록을 보면 코드를 볼 수 있음!

그럼 이제까지 배운 Widget의 기본 개념을 봤으니 실습을 해보겠음. 1. 사용자 정의 위젯 만들기우선 사용자 정의 위젯을 만들어야함 -> 스테이트리스 위젯import 'package:flutter/material.dart';void main() { runApp(SplashScreen()); // SplashScreen 위젯을 첫 화면으로 지정}class SplashScreen extends StatelessWidget { // StatelessWidget 선언 @override Widget build(BuildContext context) { // 위젯의 UI 구현 return MaterialApp( // 항상 최상단에 입력되는 위젯 home: Scaffold( // 항상 두 번째..

1. 배치 관련 위젯배치 관련 위젯은 하위 위젯을 가로 또는 세로로 배치하거나 위젯 위에 위젯을 겹칠 때 사용함!1-1. `Row`위젯`Row`는 `Column`위젯과 함께 가로*세로로 배치하는데 사용됨. `Row`는 말 그대로 가로로 위젯을 배치하는데 사용됨.하나의 `child`위젯을 입력받는 위젯들과 다르게 여러 개의 `child`위젯을 입력받을 수 있는 `children`파라미터를 노출함.`Row`와 `Column`에는 주축과 반대축이라는 개념이 존재하는데 `Row`의 주축 : 가로, 반대축 : 세로`Column`의 주축 : 세로, 반대축 : 가로위젯을 가로로 배치하는 `Row`위젯은 `crossAxisAlignment`파라미터를 사용함. 이전 템플릿 코드는 버리고 새로 작성해보겠음void main..

1. 디자인 관련 위젯디자인 관련 위젯은 배경을 추가하거나 간격을 추가하거나 패딩을 추가하는 등 디자인적 요소를 적용할 때 사용함1-1. `Container`위젯말 그대로 다른 위젯을 담는데 사용위젯의 높이와 너비를 지정하거나, 배경이나 테두리를 추가할 때 많이 사용다른 위젯처럼 `child`파라미터 사용 가능import 'package:flutter/material.dart';void main() { runApp(MyApp());}// 디자인 관련 위젯class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( bod..

위젯 실습 템플릿// 위젯 실습용 파일import "package:flutter/material.dart";void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: // 여기에 실습 코드 작성 ), ), ); }}1. 텍스트 관련 위젯`Text`위젯은 글자를 적고 스타일링하는 위젯임. 첫 번째 포지셔널 파라미터에 원하는 문자열을 작성하고 `style`이라는 네임드 파라미터를 사용해..