추천시스템 앱 개발/프론트엔드(Flutter)11 [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/플러터] 새 프로젝트 만들기 - 폴더명 변경 앱 프로젝트 폴더명 변경상위, 하위 폴더명을 동일하게 'movie_rec'으로 하니 헷갈린다.하위에 있는 앱 프로젝트 폴더의 이름을 'movie_rec_app'으로 변경한다.해당 폴더에 마우스를 대고 오른쪽 버튼을 클릭하면 컨텍스트 메뉴가 뜬다.여기서 'Rename'을 누르고, 파일명을 변경해준다.다음과 같이, 앱 프로젝트 폴더는 'movie_rec_app'으로 변경되었다.최상위 폴더는 'movie_rec'으로, 이제는 헷갈리지 않고 작업할 수 있다. 2024. 10. 7. [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/플러터] 앱개발 - Dart 문법 Dart 언어를 알아야 하는 이유 우리는 앱 개발을 하기 위해 Flutter를 이용한다고 했다. 앞서 설명했듯, Flutter는 프레임워크이다. 이때 사용되는 프로그래밍 언어가 Dart이다. (Dart 역시 Flutter와 마찬가지로 구글(Google)에서 만들었다.) Dart 언어 기본 문법 목차 앱 개발을 위한 기본 문법을 간략하게만 요약해보자면 아래와 같다. 1. 변수 및 데이터 타입: Dart에서의 변수 선언과 데이터 타입 지정 방법 2. 조건문과 반복문: if문, switch문, for문, while문 등의 사용법 3. 함수: Dart에서 함수를 어떻게 선언하고 활용하는지에 대한 내용 4. 클래스와 객체: 객체지향 프로그래밍의 핵심인 클래스와 객체에 대한 내용 5. 컬렉션 타입: List, Se.. 2024. 4. 21. [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. [Flutter/플러터] 앱개발 환경설정 - 시스템 요구사항 Flutter 공식 홈페이지에서 요구하는 Flutter 시스템 요구사항은 아래와 같다. 중요한 내용만 요약했으며, 핵심만 알고싶은 사람은 4번을 보면 된다. 1. Mac OS 시스템 요구 사항 1-1. Mac OS 하드웨어 요구 사항 요구 사항 최소 사양 권장 사항 x86_64 CPU 코어 4 8 메모리(GB) 8 16 디스플레이 해상도(픽셀) WXGA(1366x768) FHD(1920x1080) 사용 가능한 디스크 공간(GB) 36 56 1-2. Mac OS 소프트웨어 요구사항 운영 체제 macOS 10.14(Mojave) 이상 Apple Silicon Mac(M 시리즈)에 설치할 때 Rosetta 번역 환경을 설치(일부 구성요소에는 Rosetta 필요) sudo softwareupdate --ins.. 2023. 12. 31. 이전 1 2 다음 반응형
