Flutter9 [Flutter/플러터] 영화추천 화면 만들기 - 영화 선택 페이지 3 3. 영화 선택 페이지3-2. 영화 선택 페이지 - 기능 별 코드 설명3-2-8. progressBar로 영화 선택 바 구현하기Widget progressBar(BuildContext context, List selectedMovies) { return Padding( padding: const EdgeInsets.all(15), child: Stack( alignment: Alignment.center, children: [ LinearProgressIndicator( value: selectedMovies.length / 10, backgroundColor: Colors.grey[300], color: main.. 2025. 3. 6. [Flutter/플러터] 영화추천 화면 만들기 -영화 선택 페이지 2 이전 글: 영화 선택 페이지 1 [Flutter/플러터] 영화추천 화면 만들기 -영화 선택 페이지 13. 영화 선택 페이지3-1. 영화 선택 페이지 - 기본 구조기본 구조를 먼저 살펴보고, 구체적인 내용은 이어서 설명하고자 한다.영화 선택 페이지의 구조는 위 그림과 같다.한 페이지(화면)가 'Scaffoldwork-master.tistory.com 3. 영화 선택 페이지3-2. 영화 선택 페이지 - 기능 별 코드 설명3-2-5. 영화 선택 기능 구현하기영화 선택 기능은 selectMovieTile 위젯으로 만들었다.일부 코드 라인 별 설명은 이미지 내 주석으로 작성했다.GridView.builder: 동적으로 그리드 구성.GridView.builder를 사용해 동적으로 여러개의 영화 목록을 그리드(격자.. 2024. 10. 13. [Flutter/플러터] 영화추천 화면 만들기 -영화 선택 페이지 1 3. 영화 선택 페이지3-1. 영화 선택 페이지 - 기본 구조기본 구조를 먼저 살펴보고, 구체적인 내용은 이어서 설명하고자 한다.영화 선택 페이지의 구조는 위 그림과 같다.한 페이지(화면)가 'Scaffold'라는 것으로 만들어져 있다.Scaffold는 친절하게도 화면의 상단(appBar), 본문(body), 하단 버튼(bottomNavigationBar)으로 구분이 되어있다. 그래서 각 부분을 원하는 형태로 채워넣기만 하면 된다.먼저 상단에는 '앱 이름' 혹은 '해당 페이지의 기능'을 쓰는게 일반적이다.가장 중요한 본문은 'Column'으로 만들었고, 크게 3 영역으로 구분했다.Padding으로 감싸진 Text에는 '재미있게 본 영화를 선택해주세요.'라고 유저에게 요청할 내용이 담겨있다.progress.. 2024. 10. 12. [Flutter/플러터] 영화추천 화면 만들기 - main.dart 영화추천 화면 만들기디자인-프로토타입 2. 디자인 - 프로토타입2. 디자인 - 앱의 기본 UI 2. 디자인 - 앱의 기본 UI 1. 기획 1. 기획 실제 개발을 해보니 가장 중요한게 기획이었다. 기획 과정에서 문제를 명확하게 정의하고 앱을 만들어야 나중에 고생을 덜 한다.work-master.tistory.com앞서 영화추천 앱의 디자인을 간단하게 만들어봤다. 우선은 이대로 만들어본다. 1. 화면 구조lib└ main.dart└ pages └ select_movie_page.dart └ select_score_page.dart └ movie_rec_page.dart└ widgetslib 폴더 하위에 pages 폴더와 widgets 폴더를 만든다.pages 폴더 하위에 화면 별 파일을.. 2024. 10. 9. [Flutter 오류] Set the 'program' value in your launch config (eg 'lib/main.dart') then launch again 1. 오류 내용Set the 'program' value in your launch config (eg 'lib/main.dart') then launch again이 오류는 Flutter 프로젝트에서 앱을 실행할 때, 실행할 파일(main.dart 등)이 명시되지 않아서 발생하는 문제다. 'launch.json' 설정 파일에 program 경로를 지정하지 않았거나, 잘못된 경로로 설정돼서 그렇다.2. 해결 방법오른쪽 아래 알림창의 톱니바퀴 버튼을 누르면 'launch.json' 파일로 이동한다.여기서 'main.dart' 파일의 실제 경로를 입력한다. 2024. 10. 8. [Flutter/플러터] 새 프로젝트 만들기 새 프로젝트 만들기처음 flutter를 설치하며, flutter_application_1 앱을 만들었었다.이번엔 기획했던 것과 같이 '영화 추천' 앱을 만들기 위한 새로운 프로젝트를 생성하려고 한다.1). 'Shift' + 'Command' + 'P' 키를 누르면 중앙 상단에 팔렛트 검색창이 활성화 된다.(windows에서는 Command 대신 Ctrl 키 사용)2). 'flutter'를 검색하면 나오는 'New Project'를 클릭한다.3). 그다음 표시되는 창에서 'Application'을 클릭한다.필자는 development 하위에 앱 프로젝트를 만들고 관리한다. 하지만 본인이 원하는 폴더 위치에 만들어도 상관없다.4). 파일 경로 창에서 'flutter_application_1'의 상위 폴더인 .. 2024. 6. 16. [Flutter/Android 오류] R8 - missing_rules 1. 오류 내용 ERROR: Missing classes detected while running R8. Please add the missing classes or apply additional keep rules that are generated in ~/build/app/outputs/mapping/release/missing_rules.txt. R8이라는 Andorid 앱 최적화 과정에서 클래스가 누락되어 발생하는 오류이다. ERROR: R8: Missing class com.google.android.gms.safetynet.SafetyNet (referenced from: void com.google.firebase.appcheck.safetynet.internal.SafetyNetAppChe.. 2024. 1. 20. [Flutter/플러터] 앱개발 환경설정 - Flutter 설치(Windows OS) 3. Windows OS 환경 3-1. VScode 설치 1). 홈페이지에 접속하여 '다운로드' 버튼을 눌러 프로그램을 다운로드 한다.(24.1.1일 기준, 1.85.1버전) 2). 다운로드 폴더에 들어가서 .exe 파일을 실행시킨다. 3). 위 그림과 같이 순서대로 설치하면 된다. 4). 설치완료 후 바탕화면에 VScode 아이콘이 생성된다. 3-2. Flutter 설치 1). VScode 왼쪽 탭에서 'Extension' 버튼을 클릭한다. 2). 'flutter'를 검색한다. 3). 하단에 검색 된 항목들이 보이는데, 'flutter'를 클릭한다. 4). 오른쪽에 파란색 'install' 버튼을 클릭한다.(이때 Dart도 같이 설치된다.) 5). 'Shift' + 'Ctrl(Control)' + 'P.. 2024. 1. 17. [Flutter/플러터] 앱개발 환경설정 - Flutter 설치(Mac OS) 1. Flutter 설치 방법환경설정은 Flutter 공식 홈페이지 권장 방법을 따른다.Flutter 팀에서는 Visual Studio Code 1.75 이상과 VS Code용 Flutter 확장 프로그램을 설치할 것을 권장합니다.이 조합을 사용하면 Flutter SDK 설치가 단순화됩니다. - Flutter 공식 홈페이지 여기서 VScode(Visual Studio Code)는 Microsoft에서 개발한 통합 개발 환경(IDE)이다.(IDE가 궁금한 사람을 위해 하단에 설명을 추가했다.) 앱 개발을 위해서는 Windows, Mac OS 모두 IDE가 필요하다. 따라서, Flutter 설치 순서는 다음과 같다.1). IDE인 VScode(Visual Studio Code)를 설치2). Flutter .. 2024. 1. 2. 이전 1 다음 반응형
