개발 note

하나의 코드 파일에 UI, 비즈니스 로직, 프레젠테이션 로직을 모두 넣는 형식을 흔히 Monolithic Architecture또는 간단히 Monolith 라고 부릅니다. 먼저 MVVM 패턴 없이 간단한 구조로 코드를 작성해보자. 모든 로직과 상태 관리를 하나의 파일에 통합하여, UI와 데이터 처리가 한 클래스에서 이루어지는 방식으로 코드를 작성할 수 있다. 이 방식은 MVVM과 같은 디자인 패턴이 없어도 간단한 앱에서는 빠르게 개발할 수 있는 장점이 있다. UI와 데이터 로직이 한 곳에 있음StatefulWidget을 사용하여 UI와 데이터 로직을 하나의 파일에 결합했습니다.상태 변경 및 UI 업데이트:addTodo와 removeTodo 메서드는 각각 새로운 할 일을 추가하고, 삭제하는 로직을 포함하고..

[Flutter] Dio 통신The official repository for Dart and Flutter packages.Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.pub.dev  dio install | Dart packageA powerful HTTP networkimaze910.tistory.comdependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. ..

The official repository for Dart and Flutter packages.Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.pub.dev  dio install | Dart packageA powerful HTTP networking package, supports Interceptors, Aborting and canceling a request, Custom adapters, Transformers, etc.pub.dev pubspec.yaml에 dio:^5.7.0를 붙여넣어 줍..

TabBar와 TabBarView 개념TabBar: 여러 개의 탭을 화면에 표시하며, 각 탭을 클릭할 수 있도록 해주는 위젯입니다. 사용자가 탭을 클릭하면 해당 탭에 대한 내용을 표시합니다.TabBarView: TabBar와 연결되어 각 탭에 해당하는 내용을 표시하는 역할을 합니다. 사용자가 탭을 선택하면 이 위젯이 해당하는 내용을 보여줍니다.TabControllerTabController: 탭의 상태를 관리하는 클래스입니다. 탭의 개수와 현재 활성화된 탭을 추적합니다. SingleTickerProviderStateMixin을 사용하여 애니메이션과 상태 관리를 돕습니다.length: 탭의 개수를 지정합니다.vsync: 애니메이션의 성능을 최적화하는 데 사용됩니다. 이 예제에서는 this를 사용하여 현재 ..

화면 아래쪽에서 올라오는 다이얼로그showBottomSheet() 및 showModalBottomSheet()의 builder 속성에 지정한 위젯을 화면 아래쪽에서 올라오도록 보여줌showModalBottomSheet()는 사용자가 Bottom Sheet 외부를 터치하면 Bottom Sheet가 자동으로 닫히지만, showBottomSheet()는 사용자가 Bottom Sheet 외부를 터치해도 Bottom Sheet가 닫히지 않음다이얼로그를 닫기 위해서는 닫히게 하려면, Navigator.of(context).pop()을 호출하면 됨 import 'package:flutter/material.dart';void main(){ runApp(BottomSheetApp());}class BottomShee..

💡 작업 순서constants.dart 파일 작업 theme.dart 파일 작업.. header.dart… details.dart 구조 constants.dart 파일 작업import 'package:flutter/material.dart';// 3개 상수 미리 정의 (재활용)const kPrimaryColor = MaterialColor( 0xFFeeeeee, { 50: Color(0xFFeeeeee), 100: Color(0xFFeeeeee), 200: Color(0xFFeeeeee), 300: Color(0xFFeeeeee), 400: Color(0xFFeeeeee), 500: Color(0xFFeeeeee), 600: Color(0xFFeeeeee), ..

PageView 위젯 스와이프 이벤트에 반응하여 항목을 보여주는 위젯PageController의 initialPage로 처음 보일 페이지를 설정할 수 있고, viewportFraction으로 현재 페이지가 화면에 차지하는 비율도 설정 가능예: viewportFraction: 0.7이면 현재 페이지가 화면에 70%, 나머지 30%가 이전과 다음 페이지가 살짝 보이게 됨PageController 객체를 PageView의 controller 속성에 적용하여, PageController 설정을 반영시킬 수 있음 import 'package:flutter/material.dart';void main() { runApp(MyApp1());}class MyApp1 extends StatelessWidget { c..

GridView 위젯 리스트 뷰와 마찬가지로 항목을 나열하는 위젯이지만, 리스트 뷰와 달리 한 줄에 여러 개를 함께 나열할 수 있음 (그리드 형태)리스트 뷰와 마찬가지로 그리드뷰도 GridView.builder() 생성자를 제공하며,itemCount, itemBuilder 속성을 통해 항목의 개수와 위젯을 지정gridDelegate 속성을 설정해야 함이 속성에는 SliverGridDelegateWithFixedCrossAxisCount 객체를 지정해줘야 함해당 객체에서 crossAxisCount 값이 한 줄에 함께 나와야 하는 항목의 개수임그리드 두 방향을 설정하지 않으면, crossAxisCount는 가로를 가리킴참고: scrollDirection 속성에 Axis.horizontal을 설정하면, cro..

가장 일반적으로 사용되는 스크롤 위젯ListView는 주로 다음과 같은 방식으로 사용일반적인 ListView를 명시적으로 호출하고 children 전달하는 방법 (적은 데이터에 사용시 용이함)ListView.builder를 사용하여 동적으로 호출ListView.separated는 ListView.builder 기능에 구분선 사용 가능주요 propertyreverse: true이면 bottom에서부터 리스트 표시padding: 리스트 아이템 간격 (EdgeInsets로 적용)itemCount: 동적 리스트 아이템 개수 (ListView.builder/ListView.separated에서 사용 가능)itemBuilder: 각 동적 리스트 아이템 정의 (ListView.builder/ListView.separ..

GlobalKey는 Flutter에서 위젯 트리 내에서 특정 위젯을 유일하게 식별할 수 있는 키입니다. 이 키를 사용하면 해당 위젯이나 그 상태(State)에 직접 접근하여 조작할 수 있습니다. 상태(State)란? 위젯이 현재 가지고 있는 데이터나 속성을 의미하며, 시간이 지남에 따라 변경될 수 있는 값입니다.StatelessWidget VS StatefulWidget의 차이StatelessWidget정의: 상태를 가지지 않는 위젯입니다. 내부에 데이터나 속성을 가질 수 있으나 내부에 변경 가능한 데이터나 속성이 없기 때문에 자체적으로 UI가 업데이트되지 않습니다.하지만(추가 설명)외부로부터의 변화: StatelessWidget은 부모 위젯이나 외부에서 전달된 데이터가 변경되면 재빌드되어 UI가 업데이..