Flutter 3.0 업데이트 후기(feat. dart 2.17.0)

5월 12일 오전에 Flutter 3.0으로 업데이트 되었습니다

 

주요 업데이트 내용으로는

1. Mac os, Linux os 공식지원
2. Casual game toolkit 지원
3. 다국어 텍스트 입력지원
4. silicon mac 공식지원
5. 윈도우 7/8 지원 중단
6. 모바일 : 폴더플 폰 지원, IOS 주사율에 따른 문제 해결, IOS 배포 간소화, android gradle 7.4이상 필요, 32비트 ios 지원중단
7. 웹 : 이미지 디코딩 성능 개선, 새로운 라이프사이클 도입
8. 성능 개선
9. Material design 3 지원
10. 기타 등등

으로 2.0때와 달리 크게 달라진점은 없는거 같은데

 

IOS는 테스트 해보니 전보다 조금 더 빨라진거 같기도 하고 아닌거 같기도하고..

 

다음으로 안드로이드를 테스트 해보려고 했는데..

 

회사에서 사용하던 gradle이 버전이 낮다보니 빌드가 안되어서 아침부터 버전 올리고

< 발생중인 에러.. >

 

테스트를 해봤는데 특정 패키지들 충돌이..

 

일부는 마이그레이션 진행.. 일부는 다른 패키지로 대체를 해야될것 같습니다

< 작업시간 급증으로 인한 필자의 상태 >

 

그리고 dart 2.17.0 내용을 조금 살펴봤는데

 

enum extension으로 확장해서 사용하던 부분 간소화, super 선언부 위치 변경이 가장 눈에 띄더군요

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

enum Test {
  A(2),
  B(3);

  final int num;

  const Test(this.num);

  @override
  String toString() => 'TestNum is $num';
}

extension Previous on Test {
  int get num {
    switch (this) {
      case Test.A:
        return 2;
      case Test.B:
        return 3;
    }
  }

  String toNamedString() => 'TestNum is $num';
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    debugPrint('${Test.A}, ${Test.B.index}');
    return Scaffold(
        appBar: AppBar(
          title: const Text('Dart 2.17.0 Test'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Enum Test'),
            const SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text('${Test.A.toString()}, ${Test.A.toNamedString()}'),
                Text('${Test.B.toString()}, ${Test.B.toNamedString()}'),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                CurrentSuper(
                    onPressed: () {
                      debugPrint('Current button');
                    },
                    child: const Text('Current')),
                PreviousSuper(
                    onPressed: () {
                      debugPrint('Previous button');
                    },
                    child: const Text('Previous'))
              ],
            ),
          ],
        ));
  }
}

class CurrentSuper extends TextButton {
  const CurrentSuper({Key? key, required super.onPressed, required super.child})
      : super(key: key);
}

class PreviousSuper extends TextButton {
  const PreviousSuper(
      {Key? key, required Function() onPressed, required Widget child})
      : super(key: key, onPressed: onPressed, child: child);
}

enum부분 보면 Previous extension을 사용할 필요 없이 필요한 형태로 사용하면 됩니다

 

다음으로 super 부분은 아래 TextButton 선언부를 보면 알겠지만

 

이전에는 PreviousSuper처럼 파라미터를 받아와서 super에서 맵핑(?)해서 사용했었는데

 

이제는 CurrentSuper처럼 파라미터 자체에 super를 넣을 수 있습니다

 

추가로 material 3지원 부분이 언급되어 있어서 default 기준으로 적용해봤는데 솔직히 잘 모르겠습니다

 

기본 위젯 스타일이 조금 달라졌다 다만 직접 구현하는거랑 큰 차이는 없다 정도로 정리하면 될것 같습니다..

 

뭐 조금 더 스타일링을 해보면 달라질수도 있겠지만.. 필자는 막눈이라 의미없..

혹시 적용하고 싶으신분들은 해당 api문서를 참고해주세요

(링크 : https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html)

 

deprecated API부분도 있어서 확인해보니 전에 변경된것들 리마인딩정도 인것 같았습니다

(링크 : https://docs.flutter.dev/release/breaking-changes/2-10-deprecations)

 

버튼들 그리고 snackbar, stack위젯 overflow 부분 등등

(사실 대부분 위젯들은 문서화가 잘되어 있어서 하라는대로 하면 바로 적용 가능합니다)

 

더 자세한 내용들은 아래 링크에서 확인하시면 될것 같습니다

 

(What's new in Flutter 3.0 : https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0)

 

(Introducing Flutter 3 : https://medium.com/flutter/introducing-flutter-3-5eb69151622f)

 

(Dart 2.17 : https://medium.com/dartlang/dart-2-17-b216bfc80c5d)