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

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

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

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

 # 강의 목차 : Flutter 실전 앱 제작
                    - 앱 기능 및 디자인 설계 및 초기 구조 만들기 (일기앱)
                    - 일기 작성 화면 만들기 
                    - 일기 작성 화면 만들기 (이모티콘 추가)
                    - 달력 화면 만들기 
                    - 통계, 더보기 화면 만들기 (17일차)
                    - Splash 스크린 추가하기                  

# 강의 화면 : 

# 강의 내용 : Flutter 실전 앱 제작 (통계, 더보기 화면 만들기)
                  - 날씨 아이콘 및 배경을 많이 선택했는지 구현하기 

# main.dart

  
 List<Diary> allDiaries = [];
 
 ...................
  
    void getAllDiary() async{
    allDiaries = await dbHelper.getAllDiary();
    setState((){
    });
  }
  
  
  ..................
  onTap: (idx){
          setState(() {
            selectIndex = idx;
          });
          if(selectIndex == 2){
            getAllDiary();
          }
        },
  ..................
  
  Widget getChartPage(){
    return Container(
      child: ListView.builder(itemBuilder: (ctx, idx){
      if (idx == 0) {
        return Container(
          child: Row(
            children: List.generate(statusImg.length, (_idx) {
              return Container(
                child: Column(
                  children: [
                    Image.asset(statusImg[_idx], fit: BoxFit.contain,),
                    Text("${allDiaries
                        .where((element) => element.status == _idx).length}개")
                  ],
                ),
              );
            }),
          ),
        );
      }
      return Container();
      },
        itemCount: 5,
      ),
    );
  }
}

# 실행 결과

 

# 교육 소감
오늘은 통계 페이지에서 기존에 사용했던 status 상태는 몇개를 사용했는지, 배경화면은 어떤걸 몇개 사용했는지 수치로 작성하는 부분을 구현하였다. 위에는 각각의 어떤 상태를 많이 선택했는지 수치로 보여주고, 아래는 배경이 몇번 사용했는지 수치로 보여준다. Widget getChartPage() 함수에 ListView를 작성해주고, ListView를 사용시 몇개의 itemCount 를 사용하는 숫자를 반드시 작성해주어야 한다. idx ==0 일 경우 Container() 함수에 Row 는 List.generate(StatusImg.length)를 구현해주고, Image.asset에 statusImg[_idx]를 통해 어떤 감정을 선택했는지 이미지를 보여주기 위해 구현해주었다. 또한 전체 리스트를 가져와야하므로, List<Diary> allDiaries 변수를 추가하고, getTodayDiary를 복사하여 getAllDiary를 구현하여 현재 작성된 모든 일기를 가져오는 기능을 추가해준다. Text에는 allDiaries.where((element) => element.status == _idx).length 를 통해 몇개의 이미지가 있는지 갯수를 출력한다. 

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

https://bit.ly/3FVdhDa

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