공학의 시대

안녕하세요. 이번 포스팅에서는 dio를 사용한 API request를 구현해 보겠습니다. 언어: dartIDE: Android StudioFramework: FlutterTest device: Android Dio는 Flutter에서 네트워크 요청을 수행하기 위해 사용되는 효과적인 HTTP 클라이언트 라이브러리입니다. 유연성, 사용 편의성이나 사용자 지정 헤더, 요청/응답 처리와 같은 고급 기능을 지원하는 점에서 널리 사용됩니다. 추가로, 이전에 포스팅했던 bloc pattern을 적용해서 예제를 작성하겠습니다.https://it-of-fortune.tistory.com/49 Flutter 상태 관리 - Bloc pattern안녕하세요.이번 포스팅에서는 Flutter app 개발 시 상태 관리를 위한 디..

안녕하세요. 이번 포스팅에서는 하단 navigation bar를 사용해 화면을 이동하는 방식을 간략하게 구현해 보겠습니다. 언어: dartIDE: Android StudioFramework: FlutterTest device: Android 먼저 Screen으로 사용하기 위한 Widget들을 작성해 줍니다.main.dartclass HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Home Screen', style: TextStyle(fontSize: 24) ) ); }}c..

안녕하세요.이번 포스팅에서는 Flutter app 개발 시 상태 관리를 위한 디자인 패턴 중 하나인 Bloc pattern에 대해 알아보겠습니다. 언어: dartIDE: Android StudioFramework: FlutterTest device: Android Bloc(Business Logic Component) pattern은 Flutter app에서 널리 사용되는 상태 관리 솔루션입니다. 이 패턴은 비즈니스 로직을 UI와 분리하여 명확한 역할 분리를 이루고, 앱의 테스트 및 유지보수를 좀 더 쉽게 할 수 있게 도와줍니다.핵심 개념Event (이벤트):Event는 Bloc의 입력입니다. 버튼 클릭, API 요청 등 사용자 상호작용을 나타냅니다.State (상태):State는 Bloc의 출력입니다...

안녕하세요.이번 포스팅에서는 flutter app에서 상태를 관리하는 방법 중 하나인 state hoisting에 대해 간단히 알아보겠습니다. 언어: dartIDE: Android StudioFramework: FlutterTest device: AndroidState HoistingReact, Flutter와 같은 선언형 UI 프레임워크에서 주로 사용되는 개념입니다. 이는 상태(state: UI에 영향을 미치는 변경 가능한 data)를 더 상위의 컴포넌트나 컨텍스트로 이동시켜 여러 하위 컴포넌트에서 공유할 수 있도록 하는 것을 말합니다. State Hoisting은 다음과 같은 경우에 주로 사용됩니다.두 개 이상의 컴포넌트가 동일한 상태에 접근해야 할 때: 여러 곳에서 상태를 중복 관리하는 대신, 상태..

안녕하세요.이번 포스팅에서는 flutter app 내에서 로딩 중인 상태를 보여줄 수 있는 방법 중 하나인 원형 프로그레스 바를 구현해 보겠습니다. 언어: dartIDE: Android StudioFramework: FlutterTest device: Android 이전에 진행했던 코드를 사용해 예제를 구현해 보겠습니다. 아래 링크를 참고해 주세요.https://it-of-fortune.tistory.com/46 Flutter 앱에서 delay 구현하기안녕하세요.이번 포스팅에서는 Flutter app의 delay 기능을 구현해 보겠습니다. 언어: dartIDE: Android StudioFramework: FlutterTest device: Android 먼저, 버튼을 클릭하면 메시지가 나타나도록 코드를..

안녕하세요.이번 포스팅에서는 Flutter app의 delay 기능을 구현해 보겠습니다. 언어: dartIDE: Android StudioFramework: FlutterTest device: Android 먼저, 버튼을 클릭하면 메시지가 나타나도록 코드를 짜보겠습니다. 참고로, 이번 예제는 아래의 포스팅에서 사용한 예제를 사용하여 작성해 보겠습니다.https://it-of-fortune.tistory.com/45 Flutter StatefulWidget 사용하기안녕하세요.이번 포스팅에서는 Flutter의 StatefulWidget에 대해 간략하게 알아보겠습니다.StatefulWidget이란?Flutter에서 StatefulWidget은 상태(state)를 가질 수 있는 위젯입니다. 상태는 위젯이 동적으..

안녕하세요.이번 포스팅에서는 Flutter의 StatefulWidget에 대해 간략하게 알아보겠습니다. 언어: dartIDE: Android StudioFramework: FlutterTest device: AndroidStatefulWidget이란?Flutter에서 StatefulWidget은 상태(state)를 가질 수 있는 위젯입니다. 상태는 위젯이 동적으로 변경될 수 있는 데이터를 말하며, 사용자의 동작이나 외부 요인에 의해 변경될 수 있습니다. 예를 들어, 버튼 클릭, API 호출 결과, 사용자 입력 등으로 인해 위젯의 상태가 바뀌면 화면이 다시 그려질 수 있습니다.*Kotlin(Jetpack Compos)에서는 MutableState, SwiftUI에서는 @State와 같은 역할을 한다 볼 수..

안녕하세요.이번 포스팅에서는 Flutter의 ElevatedButton을 간략하게 구현해 보겠습니다. 언어: dartIDE: Android StudioFramework: FlutterTest device: Android 처음 flutter project를 생성하면 아래와 같은 코드가 기본으로 생성됩니다. 참고로 주석은 모두 지운 상태입니다.main.dartimport 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @overr..