티스토리

호기심 많은 개발자

검색하기

블로그 홈

호기심 많은 개발자

game-chanda.tistory.com/m

2022년 12월19일 시작

구독자: 4

방명록 방문하기

728x90

주요 글 목록

11. 마이프로필 -쇼핑화면 만들기 만드는 과정 소요시간 40분 프런트만 하면 얼마 안 걸리는데모듈 분리까지 해서 좀 걸렸네요..주문/배송 주문내역 컨테이너만들기 및 오류 발생 특히 이걸 만드는 게 까다로웠다.이건 전체 주문/배송 주문내역, 취소/반품/교환 내역 코드를 만든 건데Container( width: 360, height: 128, color: Colors.white, padding: EdgeInsets.all(16), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, // 박스들 사이의 간격 조정 children: [ card_widget( 'assets/image/Mypage_iocn1 img.png', // 이미.. 공감수 1 댓글수 0 2024. 12. 1.
10. 매거진 화면 완성된 ui 사진 개발사진 부분은모듈로 분리시켜서 이미지를 넣을 수있게 만들었습니다.이 코드는 추후에 firebase stroge에서 불러와서 이미지가 뜨게 만들 예정입니다.그래야 실시간 글을 올릴 수 있기 때문에 서버에 저장해야 된다고 판단하였습니다. PageView( // PageView로 변경 scrollDirection: Axis.horizontal, // 수평 스크롤 방향 설정 children: [ imageContainer('assets/image/magazine img.png'), imageContainer('assets/image/magazine img2.png'), imageContainer('assets/image/magazine img3.png'), ima.. 공감수 3 댓글수 1 2024. 11. 29.
9. 설정 페이지 만들기 설정페이지 만들기 - UI 사실 이 페이지는 프런트가 반인 거 같다. 모듈 분리만 잘해둬도 이건 그냥 다복붙하면 만들어지는 거 같습니다. 칼럼값으로 텍스트만 빼고 디자인해 둔 위젯들을 불러와서 적어주면끝.. child: Column( children: [ memberInfoEditWidget('알림 설정'), memberInfoEditWidget2('이벤트 혜택 알림', () {}), SizedBox(height: 8), memberInfoEditWidget('서비스 동의'), memberInfoEditWidget2('약관 동의 및 개인정보 처리 동의', () {}), memberInfoEditWidget2('개인정보 처리 방침', () {}), memberI.. 공감수 0 댓글수 0 2024. 11. 27.
8. 마이프로필 - 프로필 정보 추가하기 프론트엔드 만들기내가 만들 ui는 프로필 ui이다. 일단 아이정보를 받기 이전에는 등록된 정보가 없다고 떠야 되고 있다면 파이어베이스 서버에서 불러오는 작업을 할 예정이다. 제일 먼저 해야될 일 프로필 정보 프론트로 만들기밑에는 만드는 과정 관심사 밑에 버튼은 안만든 이유가 아직 피그마가 완전하지 않아서 마지막에 넣도록 하겠습니다. 이제 입력을 받을 정보 등록 하면을 만들어 보도록 하겠습니다. 이건 앞전에 만들었던 정보를 토대로 만들어서 빠르게 만들었습니다. 컨트롤러 일단 아이의닉네임,성별,생년월일,키,몸무게 를 입력받는 컨트롤러를 만들어줍니다.final TextEditingController nicknameController = TextEditingController(); // Child's Ni.. 공감수 1 댓글수 0 2024. 11. 25.
7. 마이프로필 - 로그인 유무에 따른 환경제작 로그인이 되어있지 않을때 로그인이 되어있을때 만드는 방법 - nickname 변수만들기 String _nickname = "로그인이 되어있지 않습니다"; final FirebaseAuth _auth = FirebaseAuth.instance; 로그인이 되어있지 않을때 뜰 정보를 만들어 줍니다.또한 로그인이 되어있는 상태를 알아야되기 때문에 _auth를 만들어줍니다. 마이페이지에서 정보를 불러올때nickname 부분에 로그인이 되어있지 않습니다.로 불러오게 만들어줍니다. 간단히 말하자면, Firebase에서 데이터를 불러온 후, 그 데이터를 UI 요소에 자동으로 반영되도록 만들면 됩니다. 즉, 불러온 정보가 화면에 즉시 표시되도록 구현하는 것입니다. ( 자동 반영하는 부분은 다 디자인이 다르기 때문.. 공감수 1 댓글수 0 2024. 11. 24.
6. 마이프로필 만들기 인풋필드 기능과 인풋필드 감지 인풋필드 컨트롤러에 값들이 전부 들어가게 되면저장하기 버튼이 파란색으로 변해야 된다. (코드) 닉네임과 생년월일에 해당하는 인풋필드를 디자인 후 컨트롤러를 넣어주자final TextEditingController nicknameController = TextEditingController();final TextEditingController birthDateController = TextEditingController(); 컨트롤러 두 개를 만들어 줬다. 컨트롤러와 닉네임이라는 단어를 재사용하기 위해서 인풋필드라는 위젯을 만들어주고상태 변화를 감지하기 위해 setState를 넣어준다. inputField(nicknameController, '닉네임', (value) { .. 공감수 1 댓글수 1 2024. 11. 24.
5. 모듈 분리 모듈 분리의 필요성최근 이러한 비슷한 종류의 오브젝트들을 만들면서 하나하나 다 컨테이너로 잡으니 코드가 1만 줄 2만 줄로 넘어가 버려서 아 이러면 안될거같다. 리팩토링이 한번 필요하다고 생각했습니다. 코드칼럼 : 세로줄로우 : 가로줄 위 오른쪽 사진의 코드를 잠시 보면 전체 컨테이너를 기준으로 칼럼 ( 두줄 )로우로 ( 4개의 아이콘 )이렇게 볼 수있는데 어떻게 보면 로우로 들어가는 아이콘들과 글씨는 다 똑같은 모듈입니다.그렇기 때문에 밑에 처럼 코드를 짜 줄 수 있습니다. IconCard( imagePath: 'assets/image/card img.png', .. 공감수 2 댓글수 1 2024. 11. 21.
4. 로그인화면 - 동의화면 만들기 코드 리팩토링 할 겸 동의화면에 대해서 말씀드리겠습니다.동의화면 같은 경우에는 https://holybaits-modir.notion.site/132 a2688 a39 a8092 bdefcea510 e0 fd86 서비스 이용약관 | Notion(상품, 서비스 등 이용 일반 회원용)holybaits-modir.notion.site 이런 식으로 노션으로 일단은 만들어 놨습니다.( 이 자료는 로펌을 참고해서 만들었습니다. 확실하지는 않고 흉내만 ) 완성된 화면입니다. 먼저 저희가 쓸 내용들을 bool문으로 체크를 위해서 선언해 줍니다.bool agreeToAllTerms = false; // 전체 동의bool agreeToRequiredTerms1 = false; // (필수) 약관 동의bool agree.. 공감수 2 댓글수 1 2024. 11. 2.
3. 로그인 화면 필수 요소들 - firebase 유효성검사 추가 준비 , 파이어베이스 다운로드2번까지의 인풋필드를 만들었으면 이제 유효성 검사를 추가해야된다.https://game-chanda.tistory.com/157 2. 로그인 화면 필수 요소들 - 인풋필드 만들기 ( Controller,FocusNode,initState,dispose )시작전 요약 TextEditingController()역할: 사용자가 입력한 데이터를 저장하고 관리하는 역할을 합니다.FocusNode()역할: 특정 입력 필드에 포커스를 제어하는 역할을 합니다. 즉, 현재 어떤game-chanda.tistory.com 우리는 로그인 버튼을 눌렀을때 인풋필드에 있는 내용들 즉 우리의 데이터가 전송 되어서 이게 정확한 데이터가 전달됬는지확인 할거잖아요? 그러면 로그인 버튼에 어떠한 메서드를 만.. 공감수 8 댓글수 5 2024. 10. 27.
2. 로그인 화면 필수 요소들 - 인풋필드 만들기 ( Controller,FocusNode,initState,dispose ) 시작전 요약 TextEditingController()역할: 사용자가 입력한 데이터를 저장하고 관리하는 역할을 합니다.FocusNode()역할: 특정 입력 필드에 포커스를 제어하는 역할을 합니다. 즉, 현재 어떤 입력 필드가 활성화되어 있는지를 나타냅니다.initState()이유: 위젯이 처음 만들어질 때 한 번만 호출됩니다. 이곳에서 초기 설정을 하거나 리스너를 추가해야 합니다.예시: 입력 필드에 포커스가 생겼을 때 반응하려면, 이곳에서 리스너를 추가해야 합니다.dispose()이유: 위젯이 더 이상 필요하지 않을 때 호출됩니다. 이곳에서 리스너를 제거하고 리소스를 정리합니다.예시: 포커스 리스너를 제거하여 메모리 누수를 방지하고, 기본 상태로 돌아가게 합니다. 컨트롤러 이번에 만들 것은이런 인풋필드입.. 공감수 2 댓글수 0 2024. 10. 26.
1. 로그인 화면 필수 요소들 - 로딩바 만들기 CircularProgressIndicator() CircularProgressIndicator() 설명일단 두가지 주요 형태비결정형Indeterminate: 진행 상황을 알 수 없는 경우에 사용 (기본적으로 사용). 보통 로딩바할때 사용CircularProgressIndicator(); 결정형Determinate: 진행 상황을 알 수 있는 경우에 사용 (명시적으로 value 속성을 설정).파일을 다운받거나 / 설치 또는 업데이트 진행CircularProgressIndicator( value: 0.5, // 50% 진행); 코드설명요점을 먼저 정리하면LoadingOverlay는 로딩 중임을 표시하는 위젯이고, _setLoading 메서드는 이 위젯을 화면에 표시하거나 닫는 역할을 합니다.( 사용자의 터치를 차단하고 뒤에 있는 화면을 어둡게 만들기 ).. 공감수 1 댓글수 0 2024. 10. 26.
(개발) Sign_Up 화면 만들기 UI/UX역시나 반응형으로 되어 있기 때문에이거도 인지 해야됨UI와 프론트간 대화를 하기 위해서 어떤식으로 반응형이 만들어지는지가 중요한데피그마는 그 벽을 없애주는 느낌이라 매우 좋은거 같음 프론트 엔드 home: Scaffold( body: SafeArea( child: SingleChildScrollView( child: Column(간단한 이론 ( 블로그에서는 한번만 설명 할 것이다. ) scaffold 기본적인 시각적 레이아웃 구조를 제공합니다. 앱 바(AppBar), 바닥 탐색 바(BottomNavigationBar), 서랍(Drawer), 본문(Body) 등 다양한 요소를 쉽게 추가할 수 있게 해주는 컨테이너 역할 SafeArea 같은 경우엔 디바이스에 어플이 가려지지 않게 .. 공감수 1 댓글수 0 2024. 4. 14.
(개발) Agree_Page 동의화면 만들기 UI/UX 제작소요 12일 ( 디자인 틀 제작 및 약관 동의 화면) 피그마 반응형 제작 - UI UX 김00 프론트 엔드Column body 부분은 수직 정렬로 설정 상단바 부분은 상단바에 적지 않고 Column부분에 적어줌( 즉 Scaffold 부분에 넣은 것이 아니라 body 부분에 넣었다는 이야기 ) 밑에 줄 만드는 부분은 width: double.infinity, 전체 부분을 차지하는 코드를 적어 반응형 제작 그후 패딩 값 주고 Row 값 주고뒤로가기 버튼은 직접 만들 었기 때문에 back_icon 이라는 이름을 정해주고 코드에 넣기 밑에는 상단바를 만들어 준 코드 ( 상단바에 안집어 넣고 바디에 넣은 이유는 유지보수를 더 용이하게 하기 위해서임 )Container( // 앱 바 - .. 공감수 1 댓글수 0 2024. 4. 11.
(분석) 남성 취미 플랫폼 - Modir 시작하기 사실 이 프로젝트를 하고 있지만 수십번 아이디어를 갈아 엎었다하지만 이번엔 4학년 마지막 이기도 하고 학생때 해볼 수 있는 마지막 기회라 내가 할 수 있는 모든 기획을 넣고 만들고 있다. 인원 백엔드 개발자프론트엔드 개발자일정관리 / 마케팅브랜딩 / 디자인UI,UX시작하기 전 우리 팀이 필수로 적은내용들 아이디어 구상 3개월아이디어 구상 후 화면정의서 > 기능 정의서 > WBS 작성 > 사업계획서 수정 중 UI 시작 2월 25일 앞으로 코드 리뷰를 간단하게 리뷰 할 생각이다. 또한 나의 시행착오 플러터 버전, 내 생각이 다 맞는 줄 알았음 ui ux가 쉽다고 생각했음, 디자인은 이름만 정하면 나오는 줄 알았음, 컬러는 그냥 말하면 다 찍을 수 있는 줄 알았음 팀 프로젝트를 하면서.. 공감수 1 댓글수 0 2024. 4. 11.
(개발) firebase 초기세팅 파이어베이스에서 프로젝트 생성 플러터 프로젝트를 위해서 기본 세팅 curl -sL https://firebase.tools | bashnpm install -g firebase-tools 이 둘 중 하나를 플러터 터미널에 설치( 안될 시 node.js 다운 ) 드라이브 아무 때나 해도 환경변수 아마도 알아서 잡아줌 그 이후 플러터 터미널에 적어주면 설치 완료 가볍게 firebase login을 치니나와주는 오류 컴퓨터 초기화 했더니 다 날아갔습니다. 가볍게 powersell 관리자 권한 실행 후Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser붙여 넣기 해결~ 다시 플러터로 돌아가 firebase login 치면 로그인 뜨는데 Y.. 공감수 1 댓글수 0 2024. 1. 16.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.