쉬운 목차

내가 보려고 만든 플러터 개발 설정 / 기능 (flutter setting, property, feature etc...)

웹 프론트 개발자가 앱을 만들기 위해 플러터 개발을 하면서 정리한 내용들 입니다. (여러 사이트에서 참고)
theme 설정부터 기능 구현하는 코드 까지 제가 보려고 정리한 내용입니다.

잘못된 정보이거나 궁금한 점이 있으시다면 아래 기재된 메일로 연락주세요.
감사합니다 😊

플러터 개발 참고 (강의 추천 / 홍보 X)

저는 직장인 내일배움카드 발급 받아서 무료로 플러터 강의 들었습니다.

개인적으로 추천하는 강의는 스파르타코딩클럽 | 앱개발 종합반 입니다.
웹 프론트 개발만 하던 저도 잘 따라가고 이해할 수 있을정도로 쉽게 잘 알려줍니다.

무료로 이정도 강의 듣고 이후 심화 기능은 공식문서나 여러 검색을 통해서 진행해보려고 합니다.

스파르타코딩클럽 내일배움카드 링크

강의 듣고 실습해본 영상 (유튜브)

Flutter ThemeData (플러터 전역 스타일 설정)

ThemeData에서 대표적으로 설정 가능한 유형
(참고 링크: velog)

TextTheme:텍스트 스타일 설정
- bodyLarge: TextField 위젯의 label 등.. 폰트
- bodyMedium: Text 위젯 폰트 (기본 폰트인듯)
- labelLarge: Button 위젯 폰트
- 예시)
```
textTheme: TextTheme(
  labelLarge: TextStyle(fontSize: 32) // 버튼 폰트가 32로 됨
)
```

Button Themes: 버튼 테마
종류: elevatedButtonTheme, outlinedButtonTheme, textButtonTheme

foregroundColor: 버튼 텍스트 색상
backgroundColor: 버튼 배경 색상
shape: 버튼 모양

예시)

elevatedButtonTheme: ElevatedButtonThemeData(
  style: ElevatedButton.styleFrom(
    foregroundColor: Colors.white, // 버튼 텍스트 색 #fff
    backgroundColor: Color(0xff72c527), // 버튼 배경 색 #72c527
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(6), // border-radius
    ),
  ),
),

inputDecorationTheme: 입력 필드 테마

예시)

inputDecorationTheme: InputDecorationTheme(
  border: OutlineInputBorder( // 전체 border 설정
    borderRadius: BorderRadius.circular(6), // border-radius 기본값: 4
  ),
),

Flutter 에러 핸들링 (에러 타입 종류)

dio interceptor onError 처리

Dio를 사용하여 api 통신할때 에러 핸들링하는 코드입니다.
이때 interceptor라고 네트워크 통신중에 가로채서 추가적인 작업을 할 수 있도록 도와주는걸 사용하려고 합니다.

var dio = Dio();
// 에러 핸들링 추가
_dio.interceptors.add(
  InterceptorsWrapper(
    onError: (error, handler) {
      if (error.type == DioExceptionType.connectionTimeout || error.type == DioExceptionType.receiveTimeout) {
        // 타임아웃 에러 처리
        print("타임아웃됨. 에러 처리");
      }          
      handler.next(error);
    },
  )
)

이때 “DioExceptionType.connectionTimeout” 대신 “DioErrorType.connectionTimeout”를 쓰면 아래와 같은 에러안내 문구를 볼 수 있습니다.

'DioErrorType' is deprecated and shouldn't be used. Use DioExceptionType instead. This will be removed in 6.0.0.
Try replacing the use of the deprecated member with the replacement.

이럴때 안내된 내용처럼 DioErrorType 대신 DioExceptionType을 쓰면 됩니다.

DioExceptionType 종류

그럼 DioExceptionType 종류는 어떤게 있을까요?

DioExceptionType.connectTimeout: 네트워크 연결이 타임아웃된 경우 발생합니다.
DioExceptionType.receiveTimeout: 서버로부터 응답을 받는데 타임아웃이 발생한 경우입니다.
DioExceptionType.sendTimeout: 요청을 서버로 보내는데 타임아웃이 발생한 경우입니다.
DioExceptionType.response: 서버가 비정상적인 응답을 반환한 경우 발생합니다.
DioExceptionType.cancel: 요청이 취소된 경우 발생합니다.
DioExceptionType.other: 기타 에러가 발생한 경우에 사용됩니다.

위를 참고해서 알맞게 사용하면 좋겠습니다.

assets 추가 -> pubspec.yaml 추가 후 업데이트

assets에 이미지 또는 html 파일 추가 후 pubspec.yaml에도 추가해줍니다.

이때 터미널에서 아래 명령어를 실행합니다.

flutter pub get

해당 명령어는 Flutter에서 프로젝트가 사용하는 패키지(dependencies)를 다운로드하고, 이를 프로젝트에 통합하는 명령어입니다.

상황에 따라 프로젝트 캐시를 초기화 하고 다시 다운 받을 수 있습니다.

flutter clean

.g.dart 파일 업데이트

json_serializable 패키지를 사용해 fromJson 및 toJson 메서드를 자동으로 생성하는 경우, .g.dart 파일은 코드 생성(Code Generation) 도구를 통해 업데이트됩니다.

flutter pub run build_runner build

위 명령어는 프로젝트 내 모든 .dart 파일의 코드 생성기를 실행하여 .g.dart 파일을 생성하거나 업데이트합니다.

build_runner는 json_serializable과 같은 코드를 자동 생성하는 패키지의 기반 도구입니다.
build_runner는 pubspec.yaml 파일의 의존성에 정의된 builders를 참고하여 .g.dart 파일을 생성하거나 업데이트합니다.

json_serializable

JSON 데이터를 다루기 위해 Dart 객체와 JSON을 상호 변환하는 fromJson 및 toJson 메서드를 자동 생성합니다.

.g.dart 파일은 직접 수정하지 않는 것을 권장합니다.
항상 코드 생성기를 통해 관리해야 유지보수가 용이합니다.