패스트캠퍼스 챌린지 21일차

# 강의 제목 : 누적다운로드 120만+ 1인 개발자와 함께하는 앱 개발 입문 Online

# 강의 목표 : 기초부터 운영까지 앱 개발의 전체 프로세스를 이해한다. 
                  내 이름으로 된 앱을 최대 10개까지 만들어 출시할 수 있다. 
                  앱 개발자로 성장할 수 있는 초석을 다진다. 
                  반응 얻는 앱의 특징과 노하우를 알아간다. 
                  향후 강의 없이도 나만의 앱을 개발할수 있는 실력을 가진다. 

# 강의 요약 : 프로그램 설치부터 기본 문법, 광고 다는 법, 클론코딩을 진행하며 필수 지식을 학습한다. 
                 총 10개의 다른 주제로 실제 사용화 가능한 수준의 앱을 만들어본다.
                 나의 앱을 세상에 선보이기 위한 개발자 등록 및 배포를 진행한다. 
                 강사님의 리뷰/클레임 대응사례 등 앱 성공 포인트를 참고해 1인 개발자로서의 입지를 다진다. 

 # 강의 목차 : Flutter 실전 앱 제작
                    - 앱 기능 및 디자인 설계 및 초기 구조 만들기 (미세먼지앱) - 19일차 
                    - API 사용 및 데이터 저장 (모델 객체 생성) - 20일차 
                    - API 사용 및 데이터 저장 (모델 객체 저장) - 21일차 
                    - 미세먼지 화면 만들기 1 (전체 레이아웃 작성) 
                    - 미세먼지 화면 만들기 2 (아이템 레이아웃 작성 및 데이터 UI 맵핑)
                    - 광고 추가 및 사용자 리뷰 요청           

# 강의 화면 : 

# 강의 내용 : Flutter 실전 앱 제작 (API 사용 및 데이터 저장 (모델 객체 저장))
                   - API를 통해 미세먼지 데이터를 받아 UI로 표시하기 

1. + 버튼 클릭시 API 데이터 가져오기 
# main.dart

floatingActionButton: FloatingActionButton(
  onPressed: () async{
    MiseApi api = MiseApi();
    List<Mise> data = await api.getMiseData("구로구");
    for(final d in data){
      print("${d.dataTime} ${d.pm10}");
    }
  },
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

2. 0인 데이터 삭제하기 
# main.dart 

floatingActionButton: FloatingActionButton(
  onPressed: () async{
    MiseApi api = MiseApi();
    List<Mise> data = await api.getMiseData("구로구");
    data.removeWhere((m) => m.pm10 == 0);
    for(final d in data){
      print("${d.dataTime} ${d.pm10}");
    }
  },
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

3. 구로구 미세먼지 확인

https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EA%B5%AC%EB%A1%9C%EA%B5%AC+%EB%AF%B8%EC%84%B8%EB%A8%BC%EC%A7%80

4. 수치의 4단계에 따라서 화면 표기 설계하기 
assets/img 폴더 만들고 얼굴 표정 이미지 4개 저장하기 

 

5. pubspec.yaml 파일에 이미지 폴더 add 하기 (탭/줄/칸 주의)

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/img/

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

 

# main.dart

class _MyHomePageState extends State<MyHomePage> {

  List<Color> colors = [Color(0xFF0077c2), Color(0xFF009ba9), Color(0xfffe6300), Color(0xFFd80019)];
  List<String> icon = ["assets/img/happy.png", "assets/img/sad.png", "assets/img/bad.png", "assets/img/angry.png"];
  List<String> status = ["좋음", "보통", "나쁨", "호흡기가 나가지 말래요!!!"];
  String stationName = "구로구";
  List<Mise> data = [];
  }

 

class Mise {
  int pm10;
  int pm25;
  int khai;
  String dataTime;
  double so;
  double co;
  double no;
  double o3;

  Mise({this.pm10, this.pm25, this.khai, this.dataTime, this.so, this.co, this.no, this.o3});

  factory Mise.fromJson(Map<String, dynamic> data){
    return Mise(
      pm10: int.tryParse(data["pm10Value"] ?? "") ?? 0,
      pm25: int.tryParse(data["pm25Value"] ?? "") ?? 0,
      khai: int.tryParse(data["khaiGrade"] ?? "") ?? 0,
      dataTime: data["dataTime"] ?? "",
    );
  }
}

 

# null 변수에 대한 오류 

For solutions, see https://dart.dev/go/unsound-null-safety
lib/data/mise.dart:11:14: Error: The parameter 'pm10' can't have a value of 'null' because of its type 'int', but the implicit default value is 'null'.
Try adding either an explicit non-'null' default value or the 'required' modifier.
  Mise({this.pm10, required this.pm25, required this.khai, this.dataTime, this.so, this.co, this.no, this.o3});

# 해결 방법 
Option1: Make id nullable, you can keep @required or remove it.

class CartItem {
  final String? id;

  CartItem({
    this.id,
  });
}

Option2: Give a default (non-null) value to id

class CartItem {
  final String id;

  CartItem({
    this.id="",
  });
}

Unsound null safety | Dart

Unsound null safety

# mise.dart

class Mise {
  final int? pm10;
  final int? pm25;
  final int? khai;
  final String? dataTime;
  final double? so;
  final double? co;
  final double? no;
  final double? o3;

  Mise({this.pm10="", this.pm25="", this.khai="", this.dataTime="", this.so="", this.co="", this.no="", this.o3=""});

  factory Mise.fromJson(Map<String, dynamic> data){
    return Mise(
      pm10: int.tryParse(data["pm10Value"] ?? "") ?? 0,
      pm25: int.tryParse(data["pm25Value"] ?? "") ?? 0,
      khai: int.tryParse(data["khaiGrade"] ?? "") ?? 0,
      dataTime: data["dataTime"] ?? "",
    );
  }
}

don't support null safety:

 - package:http
 - package:http_parser

For solutions, see https://dart.dev/go/unsound-null-safety
lib/data/mise.dart:11:19: Error: A value of type 'String' can't be assigned to a variable of type 'int?'.
  Mise({this.pm10="", this.pm25="", this.khai="", this.dataTime="", this.so="", this.co="", this.no="", this.o3=""});

솔루션대로 진행해보았지만, 여전히 null 에러 출력 

Add Additional Run args 에다가 "--no-sound-null-safety" 라고 커맨드를 입력한 다음 적용을 누른뒤 ok 버튼을 누른다.  라는 가이드대로 했지만 이것도 안됨 ㅠ.ㅜ

 

# 교육 소감

# 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스