728x90 반응형 Flutter35 [flutter] 블로그 만들기01 - 프로젝트 기본설정 의존성cupertino_icons: ^1.0.8flutter_svg: ^2.0.6intl: ^0.18.1dio: ^5.2.0 # 서버와 통신하기 위해 필요한 라이브러리 입니다.flutter_riverpod: ^2.3.6 # 상태관리 Riverpod 라이브러리 입니다.logger: ^1.3.0 # 콘솔창에서 결과물을 쉽게 확인할 수 있도록 하는 Log 라이브러리입니다.flutter_secure_storage: ^8.0.0 # 어플리케이션 Secure Storage를 쉽게 사용할 수 있도록 도와주는 라이브러리입니다.pull_to_refresh: ^2.0.0linter#linter란? # 코드 스타일과 품질을 검사하여 코드에 있는 잠재적 오류 # 스타일 위반, 비효율적 패턴 등을 알려주는 도구입니다. l.. 2025. 1. 31. [flutter] 상태관리되는 ToDo List 만들어보기 Flutter 프로젝트: Riverpod과 ToDo 관리이 문서는 Riverpod과 Flutter를 활용한 상태관리 및 ToDo 리스트 구현에 대해 정리한 내용입니다. Tistory에 게시할 수 있도록 깔끔하게 정리하였습니다.1. Riverpod을 활용한 책 관리 시스템1-1. 책 관리 창고 생성NotifierProvider를 사용하여 책 리스트를 관리하는 상태 관리 시스템을 구현합니다.import 'package:flutter_riverpod/flutter_riverpod.dart';// 초기 데이터 선언String myBook = '홍길동전';List books = [];// Notifier 클래스 정의class MyBookStore extends Notifier> { @override List .. 2025. 1. 22. [Flutter] 상태관리가 되는 앱 만들어 보기 03 (RiverPod) Flutter 상태 관리: RiverPod 소개와 활용법Flutter에서 상태 관리를 위해 다양한 도구를 사용할 수 있지만, RiverPod는 코드의 간결성과 테스트 용이성을 높여주는 강력한 상태 관리 도구입니다. 이번 글에서는 RiverPod의 기본 사용 방법과 몇 가지 예제를 통해 이를 활용하는 방법을 알아보겠습니다.1. RiverPod란?RiverPod는 Flutter의 상태 관리 패키지로, Provider의 한계를 극복하기 위해 만들어졌습니다. 주요 특징은 다음과 같습니다:명확한 상태 관리: 상태를 명확하게 정의하고 관리할 수 있습니다.컴파일 타임 검증: 잘못된 사용을 컴파일 시점에 감지합니다.독립적 동작: Flutter 위젯 트리에 의존하지 않고 상태를 관리합니다.2. RiverPod 기본 사용.. 2025. 1. 21. [flutter] 상태관리가 되는 앱 만들어 보기 02 (inheritedWidget) 3단계 작업 (InheritedWidget 사용 해보기)앞의 단계를 보고싶다면 아래의 링크로 props Drilling을 해결하기 위한 방안Inherited_Parent// InheritedWidget 내장 데이터 타입을 상속받아 구현한다.import 'package:flutter/cupertino.dart';import '../common.utils/logger.dart';class InheritedParent extends InheritedWidget { // 공유 상태 데이터 관리에 목적 // List mySelectedBooks = []; List state; // 카드에 담긴 책 목록(공유 상태) // 부모에게 콜백 메서드를 관리하는 목적 void Function(String book).. 2025. 1. 20. [flutter] 상태관리가 되는 앱 만들어 보기 01 우리가 배울 여러 상태 관리 방법을 이용해 데이터 일관성을 유지해 봅시다.StatefulWidgetInheritedWidgetProvider(라이브러리)Riverpod(라이브러리)1단계 statelessWidget statefulWidget 위젯 만들어보기StatelessWidgetimport 'package:flutter/material.dart';void main() => runApp(MaterialApp( debugShowCheckedModeBanner: false, home: MyStatelessWidget(), ));//statelessWidget은//상태의 변화없이 항상 동일한 UI를 그린다.//이런 위젯은 데이터나 변수의 값이 변하지 않을때 사용합니다.//포인트!! =.. 2025. 1. 20. [flutter] 로컬 상태와 공유 상태 상태(State)의 종류상태는 공유 여부에 따라 로컬 상태(Local State)와 공유 상태(Shared State)로 나눌 수 있습니다.https://docs.flutter.dev/data-and-backend/state-mgmt/ephemeral-vs-app[Differentiate between ephemeral state and app stateHow to tell the difference between ephemeral and app state.docs.flutter.dev](https://docs.flutter.dev/data-and-backend/state-mgmt/ephemeral-vs-app)로컬 상태(Local State) : 공유되지 않는 상태BottomNavigationBar의 .. 2025. 1. 20. [flutter] StatelessWidget 과 StatefulWidget 상태란 뭘까?Stateless Widget과 고정상태import 'package:flutter/material.dart';void main() { runApp(MaterialApp(home: MyStatelessWidget()));}// Stateless// 상태의 변화 없이 항상 동일한 UI를 그립니다.// 이런 위젯은 데이터나 변수의 값이 변하지 않을 때 사용합니다.class MyStatelessWidget extends StatelessWidget { // 변수에 final 키워드 즉 상수이다. final msg = '안녕하세요! 저는 Stateless 위젯입니다.'; @override Widget build(BuildContext context) { return Scaffold( .. 2025. 1. 20. [flutter] Error 키보드 origin_client_hide_soft_input reason hide_soft_input_by_insets_api 문제 상황텍스트필드를 눌렀을때 , 키보드가 왔다갔다 거리면서 제대로 위치를 잡지 못하는 오류가 지속적으로 생겼다. I/ImeTracker: onRequestHide at ORIGIN_CLIENT_HIDE_SOFT_INPUT reason HIDE_SOFT_INPUT_BY_INSETS_APII/InputMethodManager_LC: notifyImeHidden: IInputMethodManagerGlobalInvoker.hideSoftInputI/ViewRootImpl: Resizing android.view.ViewRootImpl frame=[0,0][1080,2340]1. 키보드가 열릴때 : 화면 레이아웃이 재조정되며 화면이 다시 랜더링 되는 문제2. 키보드가 닫힐때 : 레이아웃이 충돌하여 UI가 흔들.. 2025. 1. 19. [flutter 23] flutter BoxShadow boxShadow란?Flutter에서 boxShadow는 위젯의 그림자 효과를 추가하는 데 사용됩니다.주로 Container 위젯의 decoration 속성 안에서 **BoxDecoration**과 함께 사용되며, 그림자의 색상, 위치, 크기 등을 설정할 수 있습니다. 이 속성을 활용하면 위젯에 입체감과 시각적 효과를 부여할 수 있습니다.boxShadow 속성의 주요 구성 요소boxShadow는 List 타입을 가지며, 다음과 같은 속성으로 구성됩니다:color:그림자의 색상을 지정합니다.기본값은 **Colors.black**입니다.offset:그림자의 위치를 설정합니다.Offset(dx, dy) 형식으로 가로(x축) 및 세로(y축) 방향으로 이동 거리를 설정합니다.예: Offset(4, 4)은 그림자를.. 2025. 1. 16. [Flutter22] Card 위젯은? Flutter의 Card 위젯이란?Flutter의 Card는 Material Design 스타일의 카드 형태의 UI를 제공하는 위젯입니다.텍스트, 이미지, 버튼 등 다양한 콘텐츠를 담을 수 있으며, 그림자와 둥근 모서리를 기본으로 제공해 시각적으로 매력적인 UI 요소를 쉽게 구현할 수 있습니다. 예제 코드와 주석아래는 Card 위젯을 사용하는 Flutter 예제 코드이며, 각 부분에 대해 상세한 설명을 포함하고 있습니다. import 'package:flutter/material.dart'; // Flutter의 Material Design 라이브러리 임포트void main() { runApp(MyApp()); // 애플리케이션의 시작점, MyApp 실행}// 앱의 메인 위젯class MyApp ext.. 2025. 1. 16. 이전 1 2 3 4 다음 728x90 반응형
