미카 프로젝트

JSON은 상당히 편리하면서 직관적인 데이터 형식이죠.

그래서 사람들이 많이 사용합니다.

코딩을 하다보면, json을 그대로 사용하기 보다는 보통 필요한 데이터 형을 class로 만들고 이를 json으로 encoding/decoding 하는 방식으로 많이 사용합니다.

그런데  매번 class 만들고 fromJson(), toJson()을 만들어서 사용하는것이 상당히 번거롭고, 실수할 때가 많습니다.

그래서 fromJson, toJson을 구현해주는 모듈들이 있죠.

대표적으로 json_serializable 이 있죠.

이를 활용하면 쉽게 json 변환이 가능한 data class를 정의 할 수 있습니다.

저는 요즘 freezed 라는 모듈을 주로 사용합니다.

freezed 2.5.7

https://pub.dev/packages/freezed

이 freezed 는 json_serialiazble 을 이용하여 data class를 구현해주는 모듈인데요. 제가 이를 사용하게 된 계기는 deep copy 때문이었습니다.

freezed는 fromJson, toJson 뿐만 아니라 copyWith() 함수를 자동으로 구현 해줍니다. 그리고 copyWith() 를 수행할때 멤버들의  copyWith()를 수행해서 전체가 복사가 됩니다.

이것이 하나의 큰 장점이고,

freezed 로 선언된 data class는 내부 데이터를 변경할 수 없습니다.

변경하려면, copyWith()로 특정 데이터만 변경해서 복사해서 사용해야 합니다.

그렇지 않고 변경가능한 class를 만들고 싶다면, @unfreezed를 이용합니다.

주의점!

간혹  freezed 로 정의한 class의 멤버중에 freezed로 되어있지 않은 class들을 데이터로 포함할 경우가 있습니다.

그런데 간혹, toJson() 이 정상적으로 동작하지 않을때도 있는데요.

이럴때 toJson()이 불리도록 explicitToJson  설정이 필요할때가 있습니다.

@unfreezed
class MyDataModel with _$MyDataModelModel {
  @JsonSerializable(explicitToJson: true)

  factory MyDataModel({
    required int id,
    required String name,
    DateTime? created_at,
    DateTime? updated_at,
    required Map<String, Health> data,
    bool? is_demo,
  })= _MyDataModel;

예를 들면 위와 같이 클래스를 정의한 경우, Health라는 class에 fromJson, toJson 을 구현 해놨다 하더라도, MyDataModel의 toJson()을 호출할때 Health의 toJson()이 호출되지 않습니다.

이유는 자동으로 생성된 코드에 Health의 toJson()을 호출하는 코드가 생성되지 않기 때문인데요.

이런 경우, toJson()이 불리도록,   @JsonSerializable(explicitToJson: true) 을 class 밑에 선언해 줍니다.

#해피코딩

shimmer 3.0.0

컨탠츠의 로딩(Lazy update) 을 위화감 없이 표현하기 좋은 위젯

backdrop

popup 과 유사한 카드형태의 layout을 앞에 배치 할 수 있는 layout 구조를 제공합니다.

fl_chart

다양한 형태의 차트를 그릴수 있는 위젯

flutter_spinkit

다양한 로딩 인디케이터(loading indicator) 모음.

...

BackDropFilter

- material에 포함되어있는 class 입니다.

이미지에 블러 처리 하기

다양한 위젯들을 활용해서 멋진 앱을 만들어 보아요~

flutter_app_badger

앱 아이콘에 배지를 표시해주는 패키지

Carousel Slider 다양한 회전 슬라이더들

carousel 이라는 이름으로 찾아보면 다양한 것들이 나옵니다.

flutter_carousel_slider	carousel_slider	fan_carousel_image_slider

#해피코딩!!

 Dart에는 code의 주석을 문서로 만들어주는 기능을 가지고 있습니다.

project 폴더에서 아래와 같이 dart doc 라고 입력을 하면, 프로젝트 밑에 문서가 생성됩니다.

$ dart doc

문서 위치는 아래와 같습니다.

$ ~/[myporject]/doc/api 

문서에 설명을 다는 방법은 /// 로 주석을 달아주는 방식입니다.

아래 몇가지 예시를 포함 하였습니다.

/// This is a brief description of the library or package.
library my_library;

/// This is a brief description of the MyClass class.
///
/// Optionally, additional details about the class can be provided.
class MyClass {
 /// This is a constructor for MyClass.
 MyClass();
}

/// This is a brief description of the function.
///
/// It takes [param1] and [param2] as parameters and returns a String.
String myFunction(int param1, String param2) {
 // …
}

/// This is a brief description of the field.
int myField;

/// This is a brief description of the function.
///
/// It takes [param1] and [param2] as parameters and returns a String.
///
/// Additional details can be added, including:
/// - List items
/// - [Links to other elements]
/// - _Italic_ or **bold** text.
String myFunction(int param1, String param2) {
 // …
}

/// This is a brief description of the function.
///
/// It takes [param1] and [param2] as parameters and returns a String.
///
/// - `param1`: Description of parameter 1.
/// - `param2`: Description of parameter 2.
///
/// Returns a String representing the result.
String myFunction(int param1, String param2) {
 // …
}

/// This is a brief description of the MyEnum enum.
enum MyEnum {
 /// Description of EnumValue1.
 EnumValue1,
/// Description of EnumValue2.
 EnumValue2,
}

/// Represents a user in the system.
class User {
 // …
}

/// Returns the sum of two integers.
///
/// Example:
/// ```dart
/// int result = add(2, 3); // result will be 5
/// ```
int add(int a, int b) {
  return a + b;
}

/// Calculates the area of a rectangle.
///
/// [length]: Length of the rectangle.
/// [width]: Width of the rectangle.
///
/// Returns the area as a double.
double calculateArea(double length, double width) {
  return length * width;
}

/// Finds the maximum value in the given list.
///
/// [numbers]: List of integers.
///
/// Returns the maximum value in the list. Returns null if the list is empty.
///
/// Throws [ArgumentError] if [numbers] is null.
int? findMax(List<int> numbers) {
  // Implementation
}

/// Represents a configuration for the application.
///
/// See {@link User} for user-related settings.
///
/// For more details, visit the {@linkplain <https://example.com/docs}> documentation.
class AppConfig {
  // ...
}

예시 참고

https://medium.com/@jaitechie05/flutter-and-dart-best-practices-in-documentation-acae6bd7de9b

 
 
안녕하세요. 2024년 용띠해가 되었네요.
많은 일들이 잘 되길 빕니다.~
 

 
스터디는 원래 실전이 가장 좋은 방법이라고 하죠?, 저도 Flutter 스터디를 위해서 2가지 프로젝트를 예전부터 진행했었습니다.
하나는 게임을 한번 만들어보는 것이고, 하나는 집에서 가족들과 사용할 수 있는 애플리케이션을 만들어보는 거였는데요.
 
그중 하나인 Pocket A 라는 애플리케이션입니다.
https://play.google.com/store/apps/details?id=com.rjlife.pocketa

 
 
 
 
이 애플리케이션은 "아내가 집에서 입는 옷을 어떻게 하면 쉽게 관리하고 매칭해서 입을까?"라는 질문에서 시작했습니다.

처음 아이디어가 나왔을때는, "사진찍어서 바로 올리고", "계절별 매칭도 해주고", "집에 있는 옷장이 한눈에 보이고" 듣기에 그럴듯해보이는 것 같았습니다. 프로젝트를 구상하기 시작한지 몇일 지나자 초기의 옷 정리를 위한 앱의 정체성과 니즈에 대해서 복잡한 고민을 하기 시작했습니다. "사진을 찍어봤는데 별로 안이쁜데?", "옷 매칭을 하려면 옷을 잘 찍어놔야하고 또 배경도 없애고, 모델도 필요한거 아닌가?", "옷을 종류별 계절별로 나눠보니 몇벌 안나오네?" 등등등... 뭔가 상상과 현실이 안맞는 그런 상황에서의 고민이었죠.

그러다 그 시점에 Chat GPT가 뜨면서 Chat GPT 앱이 되어버렸습니다. (^^;;  역시 제대로 된 기획이 없으니 산으로 가는.. 쿨럭)

그래서 이런 애플리케이션이 되었습니다. 
 

 
Dali-E 같은 경우는 원래 영어로 입력해야 이미지를 만들어주는데, 좀 불편해서 한글을 영어로 자동 번역해서 처리되도록 해봤습니다.
 
그리고 2024년을 기념하여, 새해 계획들을 많이 세우는데 사실 실천이 어렵죠... 
와이프의 생활패턴을 보니 계획 실천하는데 매일 Todo를 적고 하나씩 해나가는 것이 좀 인상적이었습니다.
(본인은 잊어먹지 않고 하려고 적는다고 한다고 하는데, 나이가 들고 보니 무척 좋은 습관인 것 같네요.)
 
 

한동안 따로 개선하지 않다가 드디어 할 일?? 이 생겼습니다. ^^
아무튼 저는 개발자이니 이것을 개발자스럽게 해결해 보고자 앱에 TODO 기능을 넣었습니다.
 
짜잔.
 

 
날짜 별로 할 일을 추가할 수 있습니다.
운동이나 약 먹기 같은 매일 하고자 하는 루틴의 경우에는 매일 할 일을 체크 해두면 매일 해야 할 일로 나옵니다.
그리고 할 일을 일정시간 동안 투자 해야 하는 경우라면 간혹 타이머가 필요한데, 그래서 타이머를 이렇게 만들어 놨습니다.
 
 
이렇게 해서 간단한 할 일 기능이 추가되었답니다.
+ 사용하다 보니, 이전할 일들 중에서 아직 완료하지 못한 것들을 어떻게 표현하면 좋을까? 고민하고 있는데 했는데 무작정 이전에 완료 안된 일들을 남겨 놓는 것도 아닌 것 같고, 이 부분은 좀 아이디어를 찾아봐야 할 것 같습니다.
 
 
 
 
#개발 이야기
 
Framework :  Flutter 3.16.0
주요 pub:

 
 
animated_text_kit : intro(splash) 쪽이 너무 밋밋하여 뭔가 포인트를 주기 위해서 이용했습니다.
 - 생각보다 이쁘게 나와서 chat에서 waiting시에... 에 대한 animation에도 사용했는데요. 높이 조절이 잘 안 되고 너무 튀어서 customizing을 따로 했습니다.
 
objectbox: todo를 추가하다 보니 database가 필요해져서 nosql로 간단하게 사용할 것을 찾다가 이를 이용했습니다.
 - 설명에는 경량이고 추후 cloud sync 연동도 가능하다고 되어있어서 사용해 보게 되었습니다.
 
package_info_plus: package version 정보를 보여주기 위해서 사용
flex_color_scheme: 유튜브에서 theme을 쉽게 사용할 수 있다고 하여 한번 사용해 봤습니다.
 - 생각보다 이쁘게 안 나와서 실망 ㅠ_ㅠ , 역시 디자이너의 손길이 필요합니다.
upgrader: 스토어에 최신 버전이 있는지를 확인할 수 있는 기능이 필요해서 사용하였습니다.
 -  기능상으로 보면, google play store가 아니라 개인 서버에 package 정보를 올려서 사용할 수 도 있다고 되어있습니다.
 -  나중에 store에 올리지 않고 webstite에서 관리를 하려면 이를 이용하는 것도 좋은 방법일 것 같더군요.
 
 
 
해피코딩!!

안녕하세요.

SingleChildScrollView 를 이용해서 아이템들을 스크롤 하도록 ui를 구성하려고 할때 간혹 ListView 나 grid view 같은 항목을 추가 해야 할 때가 있습니다.

ListView나 GridView 같은 경우에는 크기를 지정해야 하는데, 이렇게 되면 2중으로 scroll되게 됩니다.

(물론 이런 UI를 원하는 경우도 있지만, 때로는 전체가 하나의 view 처럼 scroll되기를 기대하는 경우도 있습니다.)

하나의 View 처럼 스크롤 되게 하려면 ListView의 속성을 변경해줘야 합니다.

[Widget layout] Scaffold  - SingleChildScrollView      - Column          - CalendarTimeline          - ListView   - BottomNavigationBar

ListView를 container로 감싸고, size를 width만 적용했습니다.

Container(
    width: double.maxFinite,
    child: ListView(
      primary: false,
      shrinkWrap: true,
        children:todoItems(controller.todos)
    ),
  ),

그리고 나서 ListView에 primary 를 false 로 적용합니다.

shrinkWrap을 true로 적용합니다.

shrinkWrap은 item 개수만큼 크기를 적용해주는 기능입니다.

그래서 item 개수가 작은때는 좁게, 많은때는 넓게 적용됩니다.

SingleChildScrollView(
        child: Column(
          children: [
            Gap(W(30)),
            Stack(
              children: [
                CalendarTimeline(
                  initialDate: selectedDay,
                  firstDate: DateTime(2022, 1, 15),
                  lastDate: DateTime(today.year,today.month,today.day+15),
                  onDateSelected: (date){
                    dprint(date);
                    setState(() {
                      selectedDay = date;
                      controller.setDate(date);
                    });

                  },
                  leftMargin: 20,
                  monthColor: Colors.blueGrey,
                  dayColor: Colors.teal[600],
                  activeDayColor: Colors.white,
                  activeBackgroundDayColor: Colors.redAccent[100],
                  dotsColor: ResColors.functionalRed,
                  selectableDayPredicate: (date) => !date.isAfter(today),
                  locale: Get.locale?.languageCode??AppConfig.DEFAULT_LOCALE.languageCode, //CHECK: Must use language code not locale
                  //showYears: true,
                  //shrink: true,
                ),
                  AnimatedOpacity(
                      opacity: (selectedDay != today)?1.0:0.0,
                      duration: 200.milliseconds,
                      child: renderTodayButton())
              ],
            ),
            Obx(()=> DefaultTextStyle(
              style:TextStyle(fontFamily: "꽃내음"),
              child: Container(
                width: double.maxFinite,
                child: ListView(
                  primary: false,
                  shrinkWrap: true,
                    children:todoItems(controller.todos)
                ),
              ),
            )),
          ],
        ),),

해피코딩 !!!

안녕하세요.

플러터로 android 용 앱을 개발하다가 앱이 좀 괜찮으면 iOS로 확장하고 싶은 욕구가 생기겠죠?

그런데 처음부터 iOS를 염두해두고 프로젝트를 만들지 않았다면, 확장을 어떻게 해야 하나 할겁니다.

간단하게 확장하는 방법 정리 해봤습니다.

먼저 빌드할 플랫폼을 선택합니다.

terminal에서 다음과 같이 입력하면 되는데요.

 $ flutter config --enable-<platform>

ios 의 경우에는  flutter config --enable-ios 라고 입력 합니다.

그리고 나서 프로젝트를 재 생성 합니다.

$ flutter create .

을 입력하면 다시 프로젝트가 재 생성됩니다.

사용 예 )

~/$ flutter config --enable-ios
Setting "enable-ios" value to "true".

You may need to restart any open editors for them to read new settings.


~/github/arbot_care (karzia)$ flutter create .
⣟

Recreating project ....
  windows/runner/flutter_window.cpp (created)
  windows/runner/utils.h (created)
  windows/runner/utils.cpp (created)
  windows/runner/runner.exe.manifest (created)
  windows/runner/CMakeLists.txt (created)
  windows/runner/win32_window.h (created)
  windows/runner/Runner.rc (created)
  windows/runner/win32_window.cpp (created)
  windows/runner/resources/app_icon.ico (created)
  windows/runner/main.cpp (created)
  windows/runner/resource.h (created)
  windows/runner/flutter_window.h (created)
  windows/flutter/CMakeLists.txt (created)
  windows/.gitignore (created)
  windows/CMakeLists.txt (created)
  arbot_care.iml (created)
  web/favicon.png (created)
  web/index.html (created)
  web/manifest.json (created)
  web/icons/Icon-maskable-512.png (created)
  web/icons/Icon-192.png (created)
  web/icons/Icon-maskable-192.png (created)
  web/icons/Icon-512.png (created)
  android/app/src/main/res/mipmap-mdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-hdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-xhdpi/ic_launcher.png (created)
  android/app/src/main/kotlin/io/netplant/arbot_care/MainActivity.kt (created)
  android/arbot_care_android.iml (created)
  ios/RunnerTests/RunnerTests.swift (created)
  .idea/runConfigurations/main_dart.xml (created)
  .idea/libraries/KotlinJavaRuntime.xml (created)
  linux/main.cc (created)
  linux/my_application.h (created)
  linux/my_application.cc (created)
  linux/flutter/CMakeLists.txt (created)
  linux/.gitignore (created)
  linux/CMakeLists.txt (created)
Resolving dependencies... 
Got dependencies.
Wrote 42 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

참고로 지원 되는 플랫폼 목록은 다음과 같습니다.

enable 시킬때는 --enable-<platform> 을 사용하고 disable 시킬때는 --no-enable-<platform> 을 이용합니다.

(disable이 아니네요 ^^;;;)

해피코딩 !!

안녕하세요.

코딩을 하다보면 종종 print를 이용해서 실행(run)창에 로그를 출력하는 경우들이 종종 발생하게 되는데요.

이럴때 file 정보와 line 정보가 안보여서 불편할때가 있습니다.

요럴때 사용할 수 있는 팁입니다.!!

import 'package:flutter/foundation.dart';

dprint(message,{int level=1}){

  if(kDebugMode || level >1) {
    var a = StackTrace.current;
    final regexCodeLine = RegExp(r" (\(.*\))$");
      print("$message${regexCodeLine.stringMatch(a.toString().split("\n")[level])}");
  }
}

<사용 예제>

  @override
  Widget build(BuildContext context) {

    DatabaseProvider().initMemoryDb();

    dprint("context:width:${context.width} , height:${context.height}");
    
    :

android studio의 실행창(run) 에 다음과 같이 출력이 됩니다.

그리고 클릭하면 해당 위치로 이동이 되고요.

<출력 결과>

!!! 해피 코딩

안녕하세요.

Flutter Bug에 대한 해결책을 정리해볼까 합니다.

https://spikez.tistory.com/456

일단 문제는 위 링크에 있는 내용인데요.

화면전환시에 한프래임이 남아서 화면전환을 어색하게 만듭니다.

google map을 dispose 시키기 위해서 여러가지 방법을 사용해봤는데, 방법을 찾지 못하다가, 문제 올린 링크의 내용중에 개발자 한분(AdrienGannerie)이 임시 해결책을 제시해주셨습니다.

그래서 그 코드로 테스트 해보고 문제가 사라진것을 확인했네요 ^^

코드는 다음과 같습니다.

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class NewMap extends StatefulWidget {
  const NewMap({super.key});

  @override
  State<NewMap> createState() => _NewMapState();
}

class _NewMapState extends State<NewMap> {


  late Widget googleMap;
  bool showMap = true;

  late GoogleMapController mapController;

  @override
  void initState() {
    super.initState();
  }


  @override
  void dispose(){
    print("_NewMapState:dispose()");

    mapController.dispose();  // Map 을 Dispose 시키는 부분
    super.dispose();
  }



  @override
  Widget build(BuildContext context) {

    googleMap = GoogleMap(
      mapType: MapType.normal,
      mapToolbarEnabled: false,
      zoomControlsEnabled: false,
      myLocationEnabled: true,
      trafficEnabled: false,
      onMapCreated:  (GoogleMapController controller){
        mapController = controller;
      }, initialCameraPosition: const CameraPosition(target: LatLng(0,0)),

    );
    return PopScope(
        onPopInvoked: (bool didPop) {   //<-- 이부분이 핵심인데, pop 될때 showMap을 false로 변경하고,
            setState(() {  // 상태가 변경되어 google map이 사라지고 빈 container만 남기는것입니다.
            showMap = false; 
          });
        },
        child:showMap?googleMap:Container()
    );   
//Old version : WillPopScope 이 deprecated 되었습니다. ㅠ_ㅠ
//    return WillPopScope(
//        onWillPop: () {   //<-- 이부분이 핵심인데, pop 될때 showMap을 false로 변경하고,
//            setState(() {  // 상태가 변경되어 google map이 사라지고 빈 container만 남기는것입니다.
//            showMap = false; 
//          });
//          return Future.value(true);
//        },
//        child:showMap?googleMap:Container()
//    );
  }
}

위의 WillPopScope 부분이 핵심이 되는데요.

WillPopScope을 걸어서 back navigation 될때 map widget을 build 에서 제거 하는 형태로 문제를 해결한 것입니다.

=> WillPopScope 이 deprecated 됬고 PopScope 을 사용해야 해서 위에 코드에도 반영했습니다.

물론 위 코드를 보셔서 알겠지만, 만약 GoogleMap widget이 정상적으로 동작했다면 필요없는 코드입니다.

하지만 당장 앱의 퀄리티를 위해서 ㅠ_ㅠ 개발자가 회피코드(Workaround)를 작성할 수 밖에 없겠네요....

저는 이렇게 해서 flutter 3.2를 3.7로 업그레이드 할 수 있게 되었습니다. 

!!! 해피코딩!!