{"id":26833707,"url":"https://github.com/mr-won/flutter-ui","last_synced_at":"2025-03-30T15:29:43.847Z","repository":{"id":138422884,"uuid":"582211624","full_name":"mr-won/Flutter-ui","owner":"mr-won","description":"복잡한 UI 작성 실습","archived":false,"fork":false,"pushed_at":"2023-01-05T04:54:01.000Z","size":344,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T02:27:07.439Z","etag":null,"topics":["flutter-ui","flutter-ui-widgets","flutterwidgets"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mr-won.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-12-26T05:11:34.000Z","updated_at":"2023-01-07T05:39:44.000Z","dependencies_parsed_at":"2023-08-20T14:07:08.867Z","dependency_job_id":null,"html_url":"https://github.com/mr-won/Flutter-ui","commit_stats":null,"previous_names":["wonttan/flutter-ui","wonchihyeon/flutter-ui","chihyunwon/flutter-ui","mr-won/flutter-ui","chihyeonwon/flutter-ui"],"tags_count":null,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FFlutter-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FFlutter-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FFlutter-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FFlutter-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mr-won","download_url":"https://codeload.github.com/mr-won/Flutter-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246338241,"owners_count":20761346,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter-ui","flutter-ui-widgets","flutterwidgets"],"created_at":"2025-03-30T15:29:43.282Z","updated_at":"2025-03-30T15:29:43.834Z","avatar_url":"https://github.com/mr-won.png","language":"C++","readme":"# complexui\n\n## 프로젝트 개요\n\n```\n프로젝트 명 : 복잡한 ui 실습\n\n개발 툴 : Android Studio \n\n개발 언어 : Dart\n\n개발 일시 : 2022-12-26 ~ 2023-01-05\n\n개발자 : Won Chi Hyeon\n```\n\n## 화면 구성\n![image](https://user-images.githubusercontent.com/58906858/210703248-1d463b34-dc6f-41c4-87d4-7233665c07ec.png)\n\n```\n\n화면 구성은 크게 상단, 중단, 하단으로 나누고 화면 전체는 상하로 스크롤 기능 추가\n\n상단에는 메뉴 7개 배치\n\n중단에는 배너가 자동으로 좌우로 스크롤되는 슬라이더 배치\n\n하단에는 게시글이 표시되는 리스트 배치\n\n탭 메뉴 : 3개의 탭을 네비게이션으로 배치 탭 메뉴를 클릭하면 다른 화면이 표시되도록\n\n```\n\n#### 뼈대 작성\n```\n처음 뼈대 화면은 StatefulWidget으로 작성하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210294973-48607790-a7b2-4ee1-8ce5-011e8b46f623.png)\n\n#### BottomNavigationBar 위젯을 이용하여 하단 탭 구성\n```\n탭을 클릭하면 페이지가 전환되도록 하단 탭 부분을 작성하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210295475-b0c521d2-c4f2-45ad-9956-6060ed234a7f.png)\n\n#### AppBar 위젯 수정\n```\nAppBar 위젯을 머터리얼 디자인에서 앱의 통일성을 위해 수정하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210295708-08f59d2c-f132-4bc7-9334-48c27500b8b0.png)\n\n#### AppBar 오른쪽에 메뉴 추가\n```\nAppBar 상단 오른쪽에 메뉴를 추가할 수 있는 + 아이콘을 추가하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210296081-baf1f561-4eab-4793-9f96-49c16c54d483.png)\n\n#### 화면이 3개인 UI 작성\n```\nStlessWidget 클래스를 상속받은 Page1, Page2, Page3을 생성하고 \nScaffold의 body 프로퍼티에 작성한 페이지가 표시되도록 수정하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210296542-9d05c5f1-d581-497a-a09e-cc0d9e0e792e.png)\n\n### 상단 부분\n```\n첫 번째 탭에 해당하는 Page1의 상단, 중단, 하단 부분을 각각 메서드로 분리했습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210474744-f919bf79-0905-4660-938f-feed9cde2fca.png)\n\n#### 메뉴 만들기\n```\n상단 부분에 택시 아이콘과 글자를 수직으로 배치하여 메뉴를 구성하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210475077-96e4ffd2-0b08-4b32-a338-8422516da201.png)\n\n\n#### 메뉴를 한 줄에 4개 만들기\n```\nColumn부분을 Row로 감싼 후(Alt+Enter -\u003eWrap with Row 기능) Column을 3개 추가하여 메뉴를 한 줄에 4개를 만들었습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210477988-2b81f753-22b9-489f-944e-f36cb74f5fdd.png)\n\n#### 메뉴 두 줄로 만들기\n```\n첫 번째 줄 Row 위젯을 다시 Column으로 감싼 뒤 Row를 1개 추가하여 메뉴를 두 줄로 구성하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210479049-47feb03e-dd5f-44f1-bbeb-4b0438e37149.png)\n\n#### 메뉴 7개로 줄이기\n```\nOpacity 위젯으로 감싸고 투명도를 0.0을 줘서 투명하게 만들어서 메뉴를 총 7개로 구성하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210479490-13a2845e-c773-42db-8d80-2aae7cde964b.png)\n\n#### 첫 번째 메뉴 클릭 기능 추가\n```\n첫 번째 메뉴를 GestureDector로 감싸고 onTap 프로퍼티를 줘서 클릭이 가능하도록 하였습니다.\n추후에 다른 메뉴들도 클릭이 가능하게 할 수 있고 \n메뉴를 클릭했을 때 발생하는 이벤트를 작성할 수 있습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210480691-4fdc4f31-65a1-4fb5-8f52-19a1bc47b807.png)\n\n#### 전체 여백 주기\n```\n전체 메뉴의 위 아래 여백을 크기 20만큼 주었습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210481025-3d68018f-f2ed-4471-b9ef-4cd9163f7292.png)\n\n### 중단 부분\n```\n중단 부분에는 좌우로 슬라이드되는 광고를 구성할 것입니다. \nPageView 위젯을 사용해도 되지만 carousel_slider 라이브러리를 사용하면\n자동 스크롤 지원 기능 등이 지원되어 훨씬 유용하게 사용할 수 있습니다.\npub.dev 웹 사이트에서 carousel_slider를 검색합니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210481315-f33efb7c-3d11-4dd7-8d23-89c18a94a113.png)\n```\n되도록 많은 사람들이 사용하는 라이브러리를 선택한 후 carousel_slider를 클릭하면 라이브러리의 사용 방법 및 설정 밥벙을\n보여주는ㄴ 페이지로 이동하게 됩니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210481512-84e84306-2564-4b2d-872e-54f6a963aa09.png)\n```\npubspec.yaml 파일을 열고 dependencies: 항목에 carousel_slider: 버전을 추가하고 pub get 버튼을 클릭합니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210481863-e865347f-e6e2-4ff5-8934-a799fbf1406d.png)\n\n#### 중단에 슬라이더 작성\n```\n의존성 추가를 한 후에 Readme 탭에 있는 내용을 토대로 사용합니다.\n라이브러리 패키지를 임포트하고 pub.dev 웹사이트의 carousel_slider 페이지의 예제 코드를 중단 메서드에 붙여넣습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210482352-6af19c06-5e78-4c44-bc65-2ec86aeb89aa.png)\n```\n좌우로 슬라이드되는 형태가 생성되었으나 공사 중임을 알려주는 ui가 표시됩니다.\n하단에 bottom overflowed by 51 pixels 이라는 메시지가 발생하는 데 이는\n화면 크기보다 51 픽셀 더 크다는 뜻입니다.\n```\n\n#### 공사 중 표시 제거\n```\n공사 중 표시가 뜨는 이유는 화면 크기보다 51픽셀 더 크기 때문이였습니다.\n첫 번째 탭의 화면은 Column 위젯으로 구성하였고 Column이나 Row는 화면 크기를 벗어나는 ui는\n작성할 수 없습니다. 따라서 Page1의 Column 위젯을 ListView나 SingleScrollView로 감싸서\n스크롤이 가능한 화면으로 변경, 공사 중 표시를 삭제할 수 있습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210483036-157e39cb-af25-40ad-885c-126651b2d5d4.png)\n\n#### 광고 배너 슬라이더 추가\n```\n슬라이더를 원하는 대로 수정할 수 있습니다. 슬라이더에 표시할 이미지를 3장 준비하여\n리스트를 작성하였고 중단 메서드를 수정하였습니다.\n광고 이미지가 자동으로 슬라이딩 되는 배너를 작성하였습니다.\n향후에 이 이미지에 GestureDector로 감싸서 클릭 이벤트를 줘서 클릭 시 \n다른 페이지로 이동하도록 변경할 수 있습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210484199-b1ac1558-0e4e-485d-8d8e-231849746a17.png)\n\n### 하단 부분\n```\n하단에는 공지사항 같은 느낌의 글 목록을 표시할 것입니다.\n```\n\n#### ListView 위젯과 ListTile 위젯으로 하단 구현\n```\nListTile 안에 아이콘과 텍스트를 넣고 ListView를 10개 생성합니다.\n이때 ListView 안에 ListView를 넣을 때(스크롤객체 안에 스크롤 객체) SHRINKwRAP 프로퍼티를 true로 설정해줘야 합니다.\n안쪽 리스트의 스크롤을 막아서 전체 스크롤으로 작동하도록 NeverScrollableScrollPhysics 클래스의 인스턴트를 설정하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/210702788-0d473ccf-7536-4f42-8d74-de261cfab631.png)\n\n이로서 복잡한 ui 앱 프로젝트의 개발이 모두 끝이 났습니다.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-won%2Fflutter-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmr-won%2Fflutter-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-won%2Fflutter-ui/lists"}