길었던 문법을 짧게 줄여 간소화할 수 있도록 변경되었습니다.

// With shorthands
Column(
  mainAxisAlignment: .start,
  crossAxisAlignment: .center,
  children: [ /* ... */ ],
),

// Without shorthands
Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [ /* … */ ],
),

// With shorthands
Padding(
  padding: .all(8.0),
  child: Text('Hello world'),
),

// Without shorthands
Padding(
  padding: EdgeInsets.all(8.0),
  child: Text('Hello world'),
),

Badge.count maxCount 속성 추가

배지에 표시될 수 있는 개수의 최대치를 정하여 n+ 개로 표시할 수 있도록 개선하였습니다. 알림이 100개인 경우, maxCount를 99로 지정하면, 99+로 표시됩니다.

SliverMainAxisGroup 헤더 오버 스크롤 성능 개선

참고: https://api.flutter.dev/flutter/widgets/SliverMainAxisGroup-class.html

그룹 헤더 위로 오버 스크롤 되던 이슈를 개선했습니다.

iOS 26 완전 지원

iOS26 부터는 UIScene life cycle이 필수 입니다. 그렇지 않으면 launch 되지 않습니다.

수동 migration

UIScene: https://docs.flutter.dev/release/breaking-changes/uiscenedelegate#migration-guide-for-flutter-apps

migration 기능 활성화 설정(v3.38 ~ 명령어 실행 가능)

Flutter tooling이 iOS Scene 기반 lifecycle을 지원하도록 옵션을 켭니다.

flutter config --enable-uiscene-migration

Android Sdk Version

flutter.compileSdkVersion (API 36) flutter.targetSdkVersion (API 36) flutter.minSdkVersion (API 24) or higher

IDEs Widget Previews

현재 바라보고 있는 .dart 페이지의 UI를 즉시 확인할 수 있습니다.

lint 추가

더 이상 사용되지 않는 요소를 감지해 줌으로써, 최신 버전에 대응하도록 개선하였습니다.

linter:
  rules:
      - remove_deprecations_in_breaking_versions

Dart environment

flutter 3.38부터는 dart 3.10.0 이상 지원함으로, 충돌 가능성을 낮추기 위해 아래와 같이 범위를 사용하는 것을 권장드립니다.

environment:
  sdk: ">=3.10.0 <4.0.0"

참고 문서: https://blog.flutter.dev/whats-new-in-flutter-3-38-3f7b258f7228

@docImport 으로 문서에서 import 하지 않아도 패키지를 그대로 사용할 수 있습니다.

참고 문서: https://dart.dev/tools/doc-comments/references

null-aware

null-aware 문법 중 ?<expression> syntax가 추가 되었습니다. 값을 연산, 접근/할당 시 null 값을 안전하게 처리합니다.

/// a의 값이 null이라면 할당하지 않습니다.
int? a;
var b = [4, 5];
var list = [1 , 2, 3, ?a, ...b]; // [1, 2, 3, 4, 5]

참고 문서: https://dart.dev/language/collections#null-aware-element

Label

goto 유사 문법인 Label 에 break 와 continue control flow statement가 추가 되었습니다.

조건문 혹은 루프 문에서 특정 위치에서 break/continue 하기 위함입니다.

outerLoop: for (var i = 0; i < 5; i++) {
  for (var j = 0; j < 5; j++) {
    if (i + j > 5) break outerLoop;
  }
}

참고 문서: https://dart.dev/language/loops#labels

Record

(…) 형태를 record literal 이라고 합니다.

final buttons = [ 
    (
        label: "Button I", 
        icon: const Icon(Icons.upload_file), 
        onPressed: () => print("Action -> Button I"), 
    ),
    ( 
        label: "Button II", 
        icon: const Icon(Icons.info), 
        onPressed: () => print("Action -> Button II"),
     ),
];

위와 같이 buttons 가 있을 때,

리스트 전체인 buttons 는 List<({String label, Icon icon, void Function() onPressed})> 타입을 갖으며 단일 요소로는 ({String label, Icon icon, void Function() onPressed}) 타입을 갖습니다.

위와 같이 암묵적인 타입을 갖겠지만, 리스트 타입을 명시적으로 지정해주면 코드 수정에 더 용이할 것 같습니다.

typedef ButtonItem = ({String label, Icon icon, void Function()? onPressed});
final List<ButtonItem> buttons = [
  // ...
];

그러나 이렇게 보면 이전의 타입을 명시하여 작성했던 코드처럼 보입니다. 맞습니다. 결국 타입을 명시하지 않고 간결하게 작성하도록 개선된 것입니다.

즉, 타입을 명시하지 않은 경우, 아래와 같은 단점을 갖게 됩니다.

참고 문서: https://dart.dev/language/records#records-as-simple-data-structures

Implicit downcast

Dart v2.9 이후 부터 런타임 오류 가능성으로 인해, 암묵적 downcast를 권장하지 않습니다.

analysis_options.yaml에 아래와 같이 추가하여 더 엄격한 prevent가 가능합니다.

analyzer:
  language:
    strict-casts: true

Before

dynamic value = "hello";
String text = value; // OK, 암묵적 downcast 허용

After

dynamic value = "hello";
String text = value; // ❌ 오류: implicit downcast from dynamic
String text2 = value as String; // ✅ 명시적 cast 필요

참고 문서: https://dart.dev/language/type-system#implicit-downcasts-from-dynamic

trailing comma

새롭게 추가된 trailing comma로 인해, 만일 설정해 놓은 코드의 max length를 넘어간다면 comma가 자동 생성되어 줄바꿈이 되며,

이전 코드의 length와 현재 코드의 length의 길이 합이 최대 길이보다 작으면 줄바꿈을 위해 작성했던 comma가 삭제되고, 강제로 이전 코드 라인으로 줄 변경이 이뤄집니다.

만일 comma대로 개행이 되길 원한다면 pubspec.yaml 파일에서 dart sdk의 최소 버전을 v3.6.0 이후로 지정해 줍니다.

environment:
  sdk: ">=3.6.0 <4.0.0"

참고 문서: https://github.com/dart-lang/dart_style/issues/1253

Dart v3.8 이후 부터 analysis_options.yaml 파일에서 아래와 같이 comma를 보존한다는 옵션을 작성한다면,

개행을 위해 명시적으로 작성했던 comma가 사라지지 않지만 comma로 구분하지 않고 이어 작성했던 코드도 comma가 생성되어 강제 개행이 됩니다.

formatter:
  trailing_commas: preserve

> <details>
<summary><span style="color:blue">Example</span></summary>
>
> Before use
>```dart
runApp(
    ShowCaseWidget(builder: (context) {
        return MultiProvider(
          providers: getProviders(),
          child: const MyApp(),
        );
      }),
  );

After use

/// builder 라인이 comma 보존 옵션에 의해 개행됩니다.
runApp(
    ShowCaseWidget(
      builder: (context) {
        return MultiProvider(
          providers: getProviders(),
          child: const MyApp(),
        );
      },
    ),
  );

page width

analysis_options.yaml 에서 최대 코드 길이를 설정하는 옵션이 새롭게 추가 되었습니다.

formatter:
  page_width: 100 

top-level에서 동작하기 때문에 IDE의 max length와 setting.json의 설정 보다도 위에서 동작합니다. 단, 코드 길이 가이드 라인은 IDE에서 조정해야 변경됩니다.

참고 문서: https://dart.dev/tools/dart-format#configuring-formatter-page-width

switch (state)

이전 버전에서는 값 기반 비교였지만 이후 부터는 객체 패턴도 매치가 가능해졌습니다.

sealed class State {}

class Loading extends State {}
class Success extends State {}
class Error extends State {}

void main() {
  State state = Loading();

  switch (state) {
    case Loading():
      print('loading...');
    case Success():
      print('successful!');
    case Error():
      print('error!');
  }
}

:final

아래와 같이 사용합니다.

ClassName(:final fieldName)

named field가 있는 객체에서 필드를 추출할 때 사용됩니다.

class Person {
  final String name;
  final int age;
  Person(this.name, this.age);
}

void main() {
  Person p = Person('h', 25);

  switch (p) {
    case Person(:final name, :final age):
      print('$name, $age');
  }
}
/// result: h, 25

UI관련하여 내용을 살펴보겠습니다.

Icon badge

Stack 위젯으로 우측 상단에 notification을 표시하는 것을 간소화 하여 아래와 같이 표현할 수 있게 되었습니다.

https://api.flutter.dev/flutter/material/Badge-class.html

FilledButton

배경색 채움 및 border-radius가 100인 버튼을 생성하려면 그림자가 기본으로 내장되어 있는 ElevatedButton, border-radius가 0인 InkWell과 같은 위젯에서 수정했어야 됐지만 FilledButton으로 간단하게 표현이 가능하게 되었습니다.

https://api.flutter.dev/flutter/material/FilledButton-class.html

SegmentedButton

flutter_advanced_segment 패키지를 사용해, segment버튼을 표현할 수 있었지만 애니메이션 효과가 요구되지 않는다면, 그룹 버튼 중 일부 선택 (ex. 모드 선택) 등을 간편하게 아래와 같이 작성할 수 있게 되었습니다.

https://api.flutter.dev/flutter/material/SegmentedButton-class.html

Divider

/// indent: 좌측으로 부터의 간격
/// endIndent: 우측으로 부터의 간격
/// thickness: divider 두께
/// height: divider 높이
///
/// 만일, 위 아래 간격이 8이며, divier 두께가 4이고 싶다면 height는 20로 작성합니다.
const Divider(height: 20, thickness: 20, indent: 5, endIndent: 0, color: Colors.black)

https://api.flutter.dev/flutter/material/Divider-class.html

DropdownMenu

드롭다운을 클릭 시, TextField가 활성화 됩니다. requestFocusOnTap 속성을 false로 하면 TextField가 비활성화 됩니다.

https://api.flutter.dev/flutter/material/DropdownMenu-class.html

참고 문서: https://blog.flutter.dev/whats-new-in-flutter-3-7-38cbea71133c

그를 위한 것이, WidgetsBindingObserver 입니다.

https://api.flutter.dev/flutter/widgets/WidgetsBindingObserver-class.html

Methods

didChangeAccessibilityFeatures()
- 접근성 설정 변경 감지 
- 접근성 기능 활성화/비활성화 감지
- 테마 변경 감지 (다크 모드/라이트 모드)

didChangeAppLifecycleState(AppLifecycleState state)
- 앱 활성화/비활성화 감지
- 앱 종료 감지
- 앱 상태 관리

didChangeLocales(List<Locale>? locales)
- 언어 변경 감지
- 지역별 리소스 관리
- 다국어 지원

didChangeMetrics()
- 디바이스 방향 변경 감지
- 디바이스 해상도 변경 감지
- 화면 크기 변경 감지

didChangePlatformBrightness()
- 시스템 테마 변경 감지
- 밝기 모드 변경 감지
- 테마 및 스타일 변경 감지

didChangeTextScaleFactor()
- 텍스트 크기 변경 감지

didHaveMemoryPressure() 
- 메모리가 부족한 상태 감지

didPopRoute()
- 화면 이동 감지(이전 화면으로 돌아가는 경우)

didPushRoute(String route) 
- 화면 이동 감지

didPushRouteInformation(RouteInformation routeInformation) 
- 새로운 라우트 정보 푸시 감지

didRequestAppExit() 
- 앱 종료 감지

Code

class ExamplePage extends StatefulWidget {
    @override
      State<ExamplePage> createState() => _ExamplePageState();
}

// with WidgetsBindingObserver 를 추가
class _ExamplePageState extends State<ExamplePage> with WidgetsBindingObserver {
    @override
    void initState() {
        super.initState();
        // 앱의 생명주기를 관찰할 수 있도록 WidgetsBinding에 현재 인스턴스를 등록
        WidgetsBinding.instance.addObserver(this);        
    }

    // 위 Methods에서 사용하려는 메서드 override
    @override
    void didChangeMetrics() {
          // 기능 작성
    }

      @override
    void dispose() {
        // 메모리 누수를 방지하기 위해 해제
        WidgetsBinding.instance.removeObserver(this);
        super.dispose();
      }
}

참고 문서: https://velog.io/@dev_seonhan/Flutter-WidgetsBindingObserver

각 패키지마다 사용 목적이 다르며, 어떤 패키지를 설치 할 것인지는 만드려는 앱에 따라 다릅니다.

• flutter_riverpod: Flutter 앱에 Riverpod 을 사용할 경우의 기본 패키지.
• riverpod: Flutter 에 관련된 모든 클래스가 완전히 제거된 Riverpod 패키지.
• hooks_riverpod : flutter_hooks 와 Rivperpod 를 함께 사용하는 패키지.
  

ref.watch

provider 의 값을 얻어서 변화를 모니터링 할 때 사용합니다.

값이 변경되면, widget 을 re_build 하거나 값을 구독하고 있는 위치에 상태 값을 전달합니다.

상태 변화를 화면에 즉각 반영해야 할 때 사용합니다.

final counterProvider = StateProvider((ref) => 0);

class HomeView extends ConsumerWidget {
  const HomeView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // ref를 사용하여 provider 구독
    final counter = ref.watch(counterProvider);

    return Text('$counter');
  }
}

ref.listen

watch 와 동일하게 변화를 모니터링 하지만, widget 을 re_build 하거나 다른 곳에 상태값을 전달하지는 않습니다.

상태 변경이 있을 때, 커스텀한 어떠한 행위를 취해야 할 경우 사용합니다.

아래와 같이 상태 변화 시, SnackBar 등을 호출 할 때, 사용할 수 있습니다.

final counterProvider = StateNotifierProvider<Counter, int>((ref) => Counter(ref));

class HomeView extends ConsumerWidget {
  const HomeView({Key? key}): super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    ref.listen<int>(counterProvider, (int? previousCount, int newCount) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Value is ${current.state}')),
      );
    });

    return Scaffold(...);
  }
}

ref.read

어떤 부가적인 효과 없이 provider 의 상태 값을 가지고 올 때 사용합니다.

read 는 일반적으로 사용자 상호작용으로 발생가능한 트리거 함수 내부에서 주로 사용합니다.

주로, provider 내부의 callback 함수에 접근할 때 사용합니다.

final counterProvider =
    StateNotifierProvider<Counter, int>((ref) => Counter(ref));

class HomeView extends ConsumerWidget {
  const HomeView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // counterProvider의 increment() 메소드를 호출합니다.
          ref.read(counterProvider.notifier).increment();
        },
      ),
    );
  }
}

설치

https://pub.dev/packages/hooks_riverpod

hooks_riverpod

flutter pub add hooks_riverpod

g.dart를 생성하기 위한 패키지

flutter pub add riverpod_generator

generator를 사용하기 위한 패키지

flutter pub add build_runner

annotation 패키지

flutter pub add riverpod_annotation

적용

flutter pub get

generator commaned

dart run build_runner build --delete-conflicting-outputs

코드

• 기본 구조

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

class HooksRiverpodEx extends HookConsumerWidget { const HooksRiverpodEx({super.key});

@override Widget build(BuildContext context, WidgetRef ref) { return Container(); } }

- main.dart
```dart
void main() {
  runApp(const ProviderScope(child: MyApp()));
}

• counter_provider.dart

  import 'package:riverpod_annotation/riverpod_annotation.dart';
  

part 'counter_provider.g.dart';

@riverpod class Counter extends _$Counter { // state로 관리 int fetchItem(int value) { // 초기화 당시 실행될 로직 return state = value; }

@override int build() { return fetchItem(0); }

// state값 0으로 초기화 void reset() { state = 0; }

// state값 1 증가 void increase() { state++; } }

변수를 생성하여 사용하는 것이 아닌, provider를 통해 상태를 생성하고,

이 상태를 앱 전반에 걸쳐 읽거나 변경할 수 있습니다.
<br>

- hooks_riverpod_ex.dart
FloatingActionButton 버튼을 통해 counter 값을 1씩 증가시킵니다.
```dart
class HooksRiverpodEx extends HookConsumerWidget {
  const HooksRiverpodEx({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var viewModel = ref.watch(counterProvider);

    return Scaffold(
      body: SafeArea(
          child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(viewModel.toString()),
            ElevatedButton(
                onPressed: () {
                  ref.read(counterProvider.notifier).reset();
                },
                child: const Text('초기화')),
          ],
        ),
      )),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ref.read(counterProvider.notifier).increase();
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

참고

비동기인 경우, 아래와 같이 데이터 결과, 로딩, 에러를 한번에 보여주는 위젯을 제공합니다.

viewModel.when(
            data: (data) {
              return ListView.builder(
                itemCount: data.length,
                itemBuilder: (context, index) {
                  var item = data[index];
                  return ListTile(
                    dense: true,
                    title: Text('item1'),
                    shape: Border(bottom: BorderSide(width: 1)),
                  );
                },
              );
            },
            error: (error, stack) => Center(
              child: CustomErrorWidget(
                error: error,
              ),
            ),
            loading: () => const LoadingIndicator(),
          )

참고 문서: https://pub.dev/packages/hooks_riverpod

https://velog.io/@udong85/Flutter-Riverpod-%EB%A1%9C-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%ED%95%98%EA%B8%B0-1

https://anpigon.tistory.com/349

Method 혹은 Class로 분리하여 가독성을 높일 뿐만이 아니며 성능 향상에도 도움을 줄 수 있도록 코드를 작성하실 것입니다.

상황에 따라 어떤 방식으로 작성하는 것이 좋을지, 각, Method와 Class로 분리할 때의 장단점에 대해 알아보겠습니다.

Method 방식

장점

• 간단한 UI 변경 사항이나 재사용 로직을 구현할 때 빠르고 직관적입니다.

• 부모 위젯의 context에 쉽게 접근할 수 있어, 부모 위젯의 상태를 직접 참조하거나 수정하기 용이합니다.

단점

• 복잡한 UI 구조에서 메서드를 사용하면 코드가 지저분해지고, 가독성이 떨어질 수 있습니다.

• 메서드는 새로운 위젯을 생성하지 않기 때문에, Flutter의 위젯 트리에서 독립적인 엔티티로 관리되지 않습니다. 따라서 성능 최적화 측면에서 위젯 트리의 재구성이 필요한 상황에서 비효율적일 수 있습니다.
  
  

Class 방식

장점

• 복잡한 UI 구성 요소를 위젯으로 분리함으로써, 코드의 가독성과 유지보수성이 크게 향상됩니다.

• 독립된 위젯으로 관리되므로, Flutter의 위젯 트리에서 재사용과 성능 최적화 측면에서 이점을 가집니다. 특히, const 생성자를 사용할 경우 위젯의 재빌드를 효율적으로 줄일 수 있습니다.

• 동일한 UI 구성 요소를 쉽게 재사용할 수 있습니다.

단점

• 단순한 UI 변경이나 작은 구성 요소에 대해 별도의 위젯을 만드는 것은

• 오버엔지니어링*으로 여겨질 수 있으며, 개발 과정을 불필요하게 복잡하게 만들 수 있습니다.

• 부모 위젯의 상태에 접근하기 위해서는 콜백 함수나 InheritedWidget, Provider 같은

• 상태 관리 라이브러리를 사용*해야 될 수 있으며, 이는 추가적인 구현이 필요합니다.

어떤 상황에 어느 방법으로 사용할지 알아보겠습니다.

SingleChildScrollView with Column

장점

• 복잡한 레이아웃 구성이 가능합니다. Column 내부에 다양한 위젯과 레이아웃을 조합하여 복잡한 UI를 구성할 수 있습니다.

• 스크롤 가능한 영역 내에서 정적인 요소들이 함께 있을 경우 유용합니다. 예를 들어, 스크롤 영역의 상단이나 하단에 고정된 버튼이나 텍스트가 있는 경우 등입니다.

단점

• 모든 위젯이 한 번에 렌더링됩니다. 자식 위젯이 많은 경우, 앱의 성능에 부정적인 영향을 미칠 수 있습니다.

• 메모리 사용량이 많아질 수 있으며, 대규모의 아이템 목록을 다루는 경우, 비효율적일 수 있습니다.
  
  

ListView

장점

• 대량의 데이터를 다룰 때, 최적화되어 있습니다.

• 화면에 보이는 항목만 렌더링*하여 성능과 메모리 사용량을 개선합니다.

• 아이템 재사용을 통해 스크롤 성능이 매우 우수합니다. 스크롤 시에도 부드러운 사용자 경험을 제공합니다.

• 내장된 스크롤 기능을 사용하기 때문에 추가적인 스크롤 위젯을 사용할 필요가 없습니다.

단점

• 내부에 복잡한 레이아웃을 구성하기 어렵습니다. 모든 자식이 리스트의 항목으로 구성되어야 하며, 복잡한 레이아웃을 위해서는 ListView.builder 등을 사용하여 커스텀 위젯을 구현해야 합니다.

• ListView의 헤더나 푸터 같은 고정된 요소를 추가하기 위해서는 ListTile 등을 활용하거나, ListView.builder의 itemCount를 조정하여 직접 구현해야 합니다.

그 중, 가장 크게 눈에 띄었던 것은 WillPopScope 였습니다.

WillPopScope 과 같이 보여지며, 아래의 메시지를 보여주었습니다.

'WillPopScope' is deprecated and shouldn't be used. Use PopScope instead. This feature was deprecated after v3.12.0-1.0.pre.

어떠한 이유로 더 이상 사용하지 않도록 변경을 했는지에 대한 설명은 공식문서에 표기되어 있지 않지만,

추측하건대, API의 일관성과 명확성을 높이기 위함과 새로운 위젯으로 기존 위젯보다 더 많은 기능을 제공하거나, 기존 문제를 해결할 수 있다는 기능적 개선이라는 점에서

PopScope 는 WillPopScope의 기능을 포함하면서도 추가적인 이점이 있을 수 있습니다.

마이그레이션한 버전은 아래와 같습니다.

• Before

  Flutter v 3.10.6
  Dart v 3.0.6
  DevTool v 2.23.1

• After

  Flutter v 3.16.8
  Dart v 3.2.5
  DevTool v 2.28.5

  
  

위의 메시지와 같이, 이제는 WillPopScope를 PopScope로 대체하여 사용해야 합니다.

• Before

  WillPopScope(
  onWillPop: () async {
    // 뒤로 가기 버튼을 눌렀을 때의 로직
    return true; // 또는 false;
  },
  child: Scaffold(
    // ...
  ),
  );

• After

  PopScope(
  canPop: false,    // onPopInvoked가 작동하기 위해선 false 되어야 합니다.
  onPopInvoked: (didPop) async {
  if (didPop) {
    return;
  }
  // 뒤로 가기 버튼을 눌렀을 때의 로직
  },

  
  
  참고 문서: https://stackoverflow.com/questions/77529904/willpopscope-is-deprecated-in-flutter

go_router 패키지는 선언적 Navigation을 지원하여 더 간결하고 직관적인 라우팅 방식을 제공합니다.

앱 내에서 페이지 간의 이동을 더 쉽게 관리할 수 있을 뿐더러, 고유한 URL 패턴과 딥 링크가 화면 간 탐색을 Handling 해줍니다.

기본 셋팅

var goRouter = GoRouter(routes: [
  GoRoute(
    path: '/',
    builder: (context, state) => const MainPage(),
  ),
   GoRoute(
    path: '/goRouterPage',
    builder: (context, state) => const GoRouterPage(),
  ),
]);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routerConfig: goRouter,
    );
  }
}

parameters을 전달하는 경우.

기존의 웹 기반 라우팅 라이브러리와 같은 방식으로 제공하고 있어서 사용방법이 유사합니다.

• state.params URL 경로의 일부로 동적으로 전달되는 값 입니다.

• state.queryParams URL의 쿼리문인 물음표(?)를 기점으로 이후에 위치하며, URL의 쿼리 문자열 부분에서 사용되는 키-값 입니다. 만일 ?filter=hodu 에서 filter는 key이고 hodu는 value에 해당하는 값 입니다. 페이지 혹은 데이터를 필터링하는 것에 자주 사용됩니다.

GoRoute(
    path: '/home/:userId?filter=hodu',
    builder: (context, state) =>
        MainHomePage(
            userId: state.params['userId'],
            filter: state.queryParams[filter]
        )
)

어디로든 페이지 이동하고 싶은 경우.

GoRouter.of(context).go('경로') 혹은 context.go('경로') 로 이동이 가능합니다.

ElevatedButton(
    child: const Text(''),
    onPressed: () => GoRouter.of(context).go('/'), // 혹은 context.go('/')
)

bottomNavigation이 필요한 경우.

ShellRoute로 UI Shell을 Rendering 하기 때문에 UI Shell(bottomNavigation)이 탐색 시에도 그대로 유지됩니다.

var goRouter = GoRouter(routes: [
  ShellRoute(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const HomePage(),
      ),
      GoRoute(
        name: RouterName.flutterHooks.name,
        path: '/flutterHooks',
        builder: (context, state) => const FlutterHooksExPage(),
      ),
    ],
    builder: (context, state, child) {
      return Scaffold(
        body: child,
        bottomNavigationBar: BottomNavigationBar(currentIndex: 0, items: const [
          BottomNavigationBarItem(label: 'home', icon: Icon(Icons.heart_broken)),
          BottomNavigationBarItem(label: 'home2', icon: Icon(Icons.ac_unit_outlined)),
        ]),
      );
    },
  ),

일반적인 함수처럼 사용됩니다. 아래와 같이 메서드를 인자로 받아 사용합니다.

useCallback(T callback, [List<Object?> keys = const <Object>[]])

예시

a와 b의 값을 각각 증가시켜 합을 반환하는 useCallback을 사용한 sumATOB 예시입니다.

class UsecallbackEx extends HookWidget {
  const UsecallbackEx({super.key});

  @override
  Widget build(BuildContext context) {
    var a = useState(0);
    var b = useState(0);

    var sumATOB = useCallback((a, b) {
      return a + b;
    }, [a, b]);

    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
          child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(sumATOB(a.value, b.value).toString()),
            const SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ElevatedButton(
                    onPressed: () {
                      a.value++;
                    },
                    child: const Text('a')),
                ElevatedButton(
                    onPressed: () {
                      b.value++;
                    },
                    child: const Text('b')),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(a.value.toString()),
                const SizedBox(width: 60),
                Text(b.value.toString()),
              ],
            )
          ],
        ),
      )),
    );
  }
}

Hook은 useMemoized 함수를 통해 계산 비용이 높은 함수의 반환 값을 저장하고, 동일한 인자로 함수가 재호출 될 때, 이전에 저장한 값을 재사용하여 성능을 최적화 하는데 도움을 줍니다.

함수가 반환하는 값을 기억하여 불필요한 재계산을 방지합니다.

예시

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

class SquareCalculatorWidget extends HookWidget {
  const SquareCalculatorWidget({super.key});

  @override
  Widget build(BuildContext context) {
    // 사용자 입력을 저장하는 변수.
    final inputController = useTextEditingController();

    // 입력 값에 따라 제곱 값을 계산하고 기억합니다.
    final square = useMemoized(() {
      final input = int.tryParse(inputController.text);
      if (input == null) return 0; // 입력이 유효하지 않으면 0을 반환합니다.
      return input * input; // 입력 값이 있다면 제곱 값을 계산합니다.
    }, [inputController.text]); // inputController.text가 변경될 때만 useMemoized가 실행됩니다.

    return Scaffold(
      appBar: AppBar(
        title: const Text('Square Calculator'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: inputController,
              decoration: const InputDecoration(
                labelText: 'Enter a number plz',
              ),
              keyboardType: TextInputType.number,
            ),
            const SizedBox(height: 20),
            Text(
              'Square: $square',
              style: const TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

참고 문서: https://www.youtube.com/watch?v=WFF8Y2-E_NA

useEffect는 StatelessWidget 및 StatefulWidget 의 initState 부터 dispose 까지를 사용이 가능하도록 만들어진 함수입니다.

• initState 처럼 사용.
• 매번 useEffect를 호출.
• 특정 변수의 변동사항이 있을 경우 호출.

등의 상황에 따라 useEffect를 다양한 방법으로 호출할 수 있습니다.

initState 처럼 사용한 경우.

import 'dart:developer';

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

class BasicEx extends StatelessWidget {
  const BasicEx({super.key});

  @override
  Widget build(BuildContext context) {
    // StatelessWidget 및 StatefultWidget의 initState와 동일하게 실행됩니다.
      useEffect(() {
        log('initState 효과');
        return; // 혹은 return (){};
    }, []);

    return Container();
  }
}

매번 useEffect를 호출하는 경우.

이런 경우 메서드를 호출하는거나 다름이 없습니다.

import 'dart:developer';

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

class BasicEx extends StatelessWidget {
  const BasicEx({super.key});

  @override
  Widget build(BuildContext context) {
      // useEffect가 void useEffect(void Function()? Function() effect, [List<Object?>? keys]) 타입 입니다.
    // keys값을 입력하지 않으면 매 순간 useEffect를 호출하게 됩니다.
    useEffect(() {
      log('메서드 하나 만드시는 것과 동일한 효과를 지닙니다.');
      return;
    });

    return Container();
  }
}

특정 변수의 변동사항이 있을 때 호출되는 경우.

Flutter의 flutter_hooks 라이브러리 사용 시, 매개변수로 받아온 값에 대한 변동이 생길 경우에 useEffect 메서드를 실행하도록 코드를 작성하는 와중에,

useState 함수로 매개변수의 값을 초기화한 변수의 값을 Text 위젯에 넣어 표기되도록 하려 했으나, 값의 변화가 반영이 되지 않는 이슈를 발견하게 되었습니다.

이유를 찾고보니 Flutter의 flutter_hooks 라이브러리에서 제공하는 use 로 시작되는 함수들은 대부분 객체가 빌드 사이클 동안 유지된다고 합니다.

이는 React의 hook 모델을 따르며, 위젯이 재빌드 될 때마다 상태나 객체가 초기화 되지 않도록 설계되었습니다.

아래의 데모는 위의 값이 매개변수로 보낼 값 및 증가되는 값, 아래 값이 매개변수로 받는 값 입니다.

StatelessWidget 으로 작성된 경우.

매개변수를 그대로 가져오기 때문에 값의 변동대로 표기됩니다.

class BasicCounterEx extends StatelessWidget {
  const BasicCounterEx({super.key, required this.outCounter});
  final int outCounter;

  @override
  Widget build(BuildContext context) {
    var counter = outCounter;

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(counter.toString()),
        ],
      ),
    );
  }
}

매개변수값을 useState 함수에 초기화 한 경우.

use 로 시작되는 메서드들은 대부분 빌드 사이클 동안 객체가 유지 되기 때문에, 재빌드 되더라도 var counter의 값은 outCounter의 초기화 값 그대로 유지됩니다. outCounter의 값은 변경되어 전달되기 때문에 변동이 있을 때마다 useEffect가 실행됩니다.

class SendCounterEx extends HookWidget {
  const SendCounterEx({super.key, required this.outCounter});
  final int outCounter;

  @override
  Widget build(BuildContext context) {
    // use로 시작되는 메서드들은 대부분 빌드 사이클 동안 객체가 유지됩니다.
    // 따라서 outCounter의 값이 변경되어 매개변수값을 전달하여 재빌드 되더라도 
    // counter의 값은 outCounter의 초기화 값 그대로 표기되어 변경되지 않고 보여집니다.
    var counter = useState(outCounter);

    useEffect(() {
      log('sendCounter useEffect 발동 ${counter.value}');
      return;
      // outCounter의 변경이 있을 경우 재빌드 합니다.
      // useEffect도 재실행 됩니다.
    }, [outCounter]);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(counter.value.toString()),
        ],
      ),
    );
  }
}

매개변수 값이 변경될 때마다 useEffect 실행 및 변동 값 표기 반영한 경우.

class SendCounterEx extends HookWidget {
  const SendCounterEx({super.key, required this.outCounter});
  final int outCounter;

  @override
  Widget build(BuildContext context) {
    useEffect(() {
      log('sendCounter useEffect 발동');
      return;
      // outCounter의 값이 변경되어 들어올때마다 useEffect가 실행됩니다.
      // build 메서드가 재빌드 됩니다.
    }, [outCounter]);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(outCounter.toString()),
        ],
      ),
    );
  }
}

전체 소스 코드

class UseEffectExPage extends HookWidget {
  const UseEffectExPage({super.key});

  @override
  Widget build(BuildContext context) {
    final counter = useState(1);

    // useEffect가 void useEffect(void Function()? Function() effect, [List<Object?>? keys])
    // 이므로 keys에 배열로 들어간다.
    // keys 안의 값은 build 메서드 위젯 안에서의 값은 넣을 수 있지만
    // 값의 변동사항이 생기더라도 useEffect가 호출되지 않는다.
    // class 멤버 변수인 경우에만 변동사항이 있을 경우 호출되는 것 같다.
    useEffect(() {
      log('useEffect 발동');
      return;
      // outCounter의 변경이 있을 경우 재빌드 합니다.
      // useEffect도 재실행 됩니다.
    }, []);

    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
          child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(counter.value.toString()),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {
                counter.value++;
              },
              child: const Text('increase counter'),
            ),
            const SizedBox(height: 50),
            SendCounterEx(outCounter: counter.value),
            // BasicCounterEx(outCounter: counter.value),
          ],
        ),
      )),
    );
  }
}

class SendCounterEx extends HookWidget {
  const SendCounterEx({super.key, required this.outCounter});
  final int outCounter;

  @override
  Widget build(BuildContext context) {
    // use로 시작되는 메서드들은 대부분 빌드 사이클 동안 객체가 유지됩니다.
    // var counter = useState(outCounter);

    // useEffect(() {
    //   log('sendCounter useEffect 발동 ${counter.value}');
    //   return;
    // }, [outCounter]);

    useEffect(() {
      log('sendCounter useEffect 발동');
      return;
    }, [outCounter]);

      // return Center(
    //  child: Column(
    //   mainAxisAlignment: MainAxisAlignment.center,
    //   children: [
    //     Text(counter.value.toString()),
    //   ],
    // ),
    );
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(outCounter.toString()),
        ],
      ),
    );
  }
}

참고 문서: https://www.youtube.com/watch?v=66ACBjV58YQ

먼저, Hook이란 갈고리 라는 뜻을 의미합니다. 일반적으로 프로그래밍에서 '원래 존재하는 어떤 기능에 갈고리를 거는 것 처럼 끼어 들어가 같이 수행하는 것' 을 의미합니다.

React에서 'state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행 되도록 만든 것' 의 의미로 사용됩니다.

이처럼 React에서 사용되는 hooks라는 기능에서 영감을 받아, flutter에 맞도록 구현된 패키지 입니다.

flutter에서는 대표적으로 StatelessWidget과 StatefulWidget이 있습니다.

상태관리를 사용할 경우에는 StatefulWidget을 사용하고, 그렇지 않은 경우에는 StatelessWidget을 사용합니다. (상태관리 라이브러리를 별도로 사용하는 경우에는 StatelessWidget을 사용할 것 입니다.)

또한, 애니메이션 처리를 한다거나, 라이프사이클을 필요로 할때 StatefulWidget을 사용합니다.

이러한 것을 HookWidget으로 모든 것을 사용할 수 있도록 하였습니다.

장점

• 라이플 사이클을 전혀 고려하지 않아도 자동으로 처리를 해줍니다.
• UI와 상태관리에 초점을 맞춰서 개발을 할 수 있습니다.
• 보일러 플레이트 코드를 없애주기 때문에 고민없이 사용할 수 있습니다.

이처럼 아래와 같이 기존의 코드를 간략하게 사용할 수 있습니다.

before

class Example extends StatefulWidget {
    final Duration duration;

    const Example({key? key, required this.duration}) : super(key: key);

    @override
    _ExampleState createState() => _ExampleState();

    class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
        AnmiationController? _controller;

        @override
        void initState() {
            super.initState();
            _controller = AnimationController(vsync: this, duration: widget.duration);
        }

        @override
        void didUpdateWidget(Example oldWidget){
            super.didUpdateWidget(oldWidget);
            if(widget.duration != oldWidget.duration) {
                _controller!.duration = widget.duration;
            }
        }

        @override
        void dispose(){
            _controller!.dispose();
            super.dispose();            
        }

        @override
        Widget build(BuildContext context){
            return Container();
        }
    }
}

After

class Example extends HookWidget {
    const Example({Key? key, required this.duartion}) : super(key: key);

    final Duration duration;

    @override
    Widget build(BuildContext context){
        /* useAnimationController의 메서드로 인해 
         애니메이션 컨트롤러의 생성부터 update, dispose까지 모두 처리가 가능합니다. */
        final controller = useAnimationController(duration: duration);
        return Container();
    }
}

참고 문서: https://pub.dev/packages/flutter_hooks https://www.youtube.com/watch?v=GBVBLKESogU https://thinkmath2020.tistory.com/3536

이 SDK 버전에는 SDK 개발자의 메모가 포함되어 있습니다. SDK 개발자가 신고한 내용은 다음과 같습니다.

A critical security vulnerability was discovered in reCAPTCHA Enterprise for Mobile. The vulnerability has been patched in the latest SDK release. Customers will need to update their Android application with the reCAPTCHA Enterprise for Mobile SDK, version 18.4.0 or above. We strongly recommend you update to the latest version as soon as possible.

라이브러리를 만든 개발자가 남긴 메시지를 보여주고 있습니다.

아래 참고 문서에 따르면, 이는 마지막 버전의 Firebase 인증이 recaptcha:18.1.2 를 사용하기 때문에 발생하는 것이라고 합니다.

이를 해결하기 위한 2가지 방법은 아래와 같습니다.

해결 방안

1. recaptcha_enterprise_flutter 라이브러리 추가. https://pub.dev/packages/recaptcha_enterprise_flutter/install

   
   

2. implementation 'com.google.android.recaptcha:recaptcha:18.4.0' 을 build.gradle 파일의 종속성 섹션에 reCaptcha 버전을 재정의.

참고 문서: https://stackoverflow.com/questions/77798636/critical-security-vulnerability-in-recaptcha-enterprise

https://github.com/GoogleCloudPlatform/recaptcha-enterprise-mobile-sdk

“iproxy” cannot be opened because the developer cannot be verified

시스템 설정의 개인정보 및 보안에서 무시하기가 있어서 클릭을 해도, 여전히 실행이 되지 않았습니다.

그러던 중, 참고 문서의 조언으로 flutter sdk 폴더를 들어가서 아래와 같은 명령어를 실행해주고 앱을 다시 실행해보니, 정상적으로 잘 작동했습니다.

1. 터미널에서 flutter sdk 들어가기

   cd flutter/bin/cache/artifacts/usbmuxd

   
   

2. 아래 명령어 실행으로 해당 속성 삭제하기

   sudo xattr -d com.apple.quarantine iproxy

   
   
   

참고 문서: https://stackoverflow.com/questions/71359062/iproxy-cannot-be-opened-because-the-developer-cannot-be-verified

이 연산자는 코드를 더 간결하게 만들어 줍니다.

before

var people = People();
people.name = 'hodu';
people.age = 10;
people.height = 160.5;

after

var people = People();
    ..name = 'hodu';
    ..age = 10;
    ..height = 160.5;

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/me/Documents/projects/android/app/build.gradle' line: 66

* What went wrong:
A problem occurred evaluating project ':app'.
> path may not be null or empty string. path='null'

위 에러는 key.properties 파일 경로를 찾지 못해서 나오는 것 이었습니다.

해결방안

android 폴더 하위에 key.properties 파일을 생성하여 필요한 내용을 작성하여 디버깅 하였더니, 정상적으로 실행되었습니다.

참고 문서 https://young-duck.tistory.com/54

E/flutter (20728): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] 
Unhandled Exception: PlatformException(error, Attempt to invoke virtual method 
'void android.app.Activity.startActivity(android.content.Intent)'
on a null object reference, null, java.lang.NullPointerException:
Attempt to invoke virtual method 'void android.app.Activity.startActivity(android.content.Intent)' on a null object reference

에러가 발생하는 이유

1. 테스트용 결제 환경 playstore등의 설치 환경이 애뮬레이터에서 제공되어 있지 않습니다.

2. 결제 서비스 제한 일부 인앱 결제 서비스 제공업체는 애뮬레이터에서의 인앱 결제를 제한합니다. 보안 및 불법 결제 방지를 위한 조치입니다.

3. 결제 테스트 제한 외부 앱(카드사 / 간편결제 앱)으로 이동해 결제 테스트하는 것이 제한됩니다. 이동이 가능하더라도 애뮬레이터에서는 공동 인증서(구 공인인증서) 설정이 안되니, (일반결제가 아니고서야) 인증 자체가 안됩니다.
   
   

임시 해결 방안

코드에 인앱결제가 포함되어 있다면 실기기에서 실행이 잘 되겠지만, 애뮬레이터에서 실행하고 싶다면, 애뮬레이터 빌드 시, 인앱결제 코드가 실행되지 않도록 방지할 수 있습니다.

1. 라이브러리 추가 https://pub.dev/packages/device_info_plus

2. 코드 작성

   import 'package:device_info/device_info.dart';
   import 'package:flutter/services.dart';
   

Future makeInAppPurchase() async { DeviceInfoPlugin deviceInfo = DeviceInfoPlugin(); if (!await deviceInfo.isPhysicalDevice) { // 애뮬레이터 또는 시뮬레이터에서 실행 중인 경우 예외 처리 throw PlatformException( code: 'NOT_SUPPORTED', message: '인앱 결제는 실제 디바이스에서만 지원됩니다.', ); }

// 인앱 결제 코드 실행 }

```

참고 문서: https://github.com/iamport/iamport_flutter/issues/24

즉, Lint 설정을 통해 규칙적인 코딩 스타일을 만들 뿐 아니라, 런타임 에러를 줄일 수 있습니다.

팀 단위로 프로젝트를 진행하게 될 경우, 개개인의 코드 스타일이 소스에 녹여 들어가게 되는데요.

그것이 결과물에 영향을 주진 않지만, 협업의 일정 부분 영향을 주게 됩니다.

자신의 코드 스타일에 대해서는 소스가 한눈에 들어와 지지만, 협업하는 개발자 분의 소스는 코드 스타일이 달라 눈에 잘 들어와 지지 않고 집중해서 봐야 되는 경우가 생깁니다.

그렇기에, Lint의 코드 룰을 설정하여 개발 스타일 온도차를 최대한 줄여, 퍼포먼스를 높일 수 있도록 도와주어, 팀 협업 강화 등의 다양한 이점을 얻을 수 있습니다.

[요약]

• 코드의 일관성 유지 코드 스타일 가이드라인을 적용하고 일관된 코드 작성을 촉진합니다. 이는, 팀 내에서 동일한 코드 스타일을 따르고, 가독성이 높은 코드를 유지할 수 있도록 도와줍니다.

  
  

• 잠재적인 버그 감지 잠재적인 버그를 찾아내고 경고 또는 오류 메시지를 통해 개발자에게 알려줍니다. 이로, 런타임 에러를 방지하고 안전한 코드를 작성할 수 있습니다.

  
  

• 성능 개선 비효율적인 코드 패턴을 식별하고 개선 방법을 제안하여 앱의 성능을 향상시킬 수 있습니다. 불필요한 연산 혹은 메모리 누수와 같은 문제를 감지하고 최적화 할 수 있습니다.

  
  

• 팀 협업 강화 팀 내에서 코드 리뷰를 용이하게 만들어줍니다. 모든 개발자가 동일한 Lint 규칙을 따르면 코드 리뷰 프로세스가 원활해 지고 코드 품질이 향상됩니다.
  
  

[Lint 적용]

1. 프로젝트를 생성하게 되면 pubspec.yaml 파일에서 기본적으로 flutter_lints가 적용되어 있습니다.

2. analysis_options.yaml 파일에서 아래의 코드를 추가해줍니다. exclude는 lint적용을 제외시킬 파일을 적어둔 곳 입니다.

   linter:
   rules:
    - prefer_const_constructors
    - always_declare_return_types
    - avoid_types_on_closure_parameters
    - avoid_annotating_with_dynamic
    - avoid_escaping_inner_quotes
    - avoid_function_literals_in_foreach_calls
    - avoid_private_typedef_functions
    - combinators_ordering
    - curly_braces_in_flow_control_structures
    - omit_local_variable_types
    - annotate_overrides
    - sort_constructors_first
    - unawaited_futures
    - directives_ordering
    - unnecessary_final
    - unnecessary_parenthesis
    - conditional_uri_does_not_exist
    - prefer_single_quotes
    - await_only_futures
    - always_use_package_imports
    - avoid_empty_else
    - comment_references
    - prefer_void_to_null
    - use_key_in_widget_constructors
    - no_wildcard_variable_uses
   

analyzer: strong-mode: # implicit-casts: false # implicit-dynamic: false exclude: - lib/.freezed.dart - lib/.g.dart - lib/generated - lib/firebase_options.dart errors: invalid_annotation_target: ignore todo: ignore

```

3. Lint가 적용되기 위해 IDE를 종료하고 다시 켜주세요. 터미널에 flutter analyze 를 작성하면 lint가 어디에서 적용되지 않고 있는지 체크할 수 있습니다.