seong

전체를 SigleChildScrollView로 감싸주어서 항목이 늘어날 때 마다 늘어나게 해준다. 사진 및 닉네임, 리뷰들이 있는 부분, 소개 두 부분으로 나누어서 만든다. 이전에 만들었던 페이지와 똑같게 패딩 값은 마지막에 준다. 1. ProfileHeader import 'package:finalproject_front/constants.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class ProfileHeader extends StatelessWidget { const ProfileHeader({ Key? key, }) : super(key: key); @override Widget b..

1. 구조 먼저 잡기 - 전체적인 구조는 Column으로 사용 . - 패딩 값은 마지막에 준다. 1. 제일 위 profile부분 전문가로 전환하는 버튼은 icon,text를 같이 쓰고있어서 InkWell을 썻다. import 'package:finalproject_front/constants.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Profile extends StatelessWidget { const Profile({ Key? key, }) : super(key: key); @override Widget build(BuildContext context) { return Row(..

appBar, bottomNavigation둘다 없다. Body만 가지고 있다. Scaffold에 Stack로 구성을 해도될것 같다. Background이미지로 gif로 주고, Positioned로 로그인 버튼들의 위치를 임의로 잡아준다. 만드는 도중에 로그인 버튼들을 내가 직접 만들려고 했지만, 다른 사람들을 찾아보니 모두 image로 사용을했었다. 일단 우선 image로 만들어서 넣고 InkWell로 버튼화 시켜주었다. 아이콘 등 마음에 안들지만.. 우선 시간이 없으니 먼저 초안으로 만들어 놓고 추후 수정 해보자. 전체 코드 import 'package:flutter/material.dart'; import 'package:flutter/src/widgets/container.dart'; import..

이 페이지에서는 회원가입 할 때 만든 것들을 거의다 재사용 해서 만들 수 있는 부분이다. 재사용 할 것 - appBar, FormField, 로그인하기 버튼 appBar는 비슷한 페이지가 여러개 있다. 그래서 전역 components로 넣어줄 예정이다. body부분은 Form위젯을 사용하고, ListView로 내부를 구성했다. 아래 카카오톡, 애플 로그인은 추후 oauth 방식 로그인을 한다, 지금은 임의로 그려주었다. 이미지는 구글에 이미지를 다운 받아 ClipRRect로 잘라주었다. 전체 코드 import 'package:finalproject_front/controller/user_controller.dart'; import 'package:finalproject_front/domain/user.d..

관심사 선택에 Dropdown Button 으로 구현할 생각이다. pub.dev에 있는 라이브러리를 사용. https://pub.dev/packages/dropdown_button2 의존성을 추가해 주고 시작 동작 원리 DropDown버튼은 선택된 상태 값으로 rebuild해서 보여주기 때문에 Stateful위젯으로 만든다. 1. 아이템을 보여줄 리스트, 선택 아이템을 담아줄 리스트를 선언 2. 버튼을 클릭 3. List 중 항목 선택 4. 선택된 항목들을 바탕으로 update를 한다. 5. update된 리스트를 rebuild를 해서 사용자에게 보여준다. 전체 코드 import 'package:dropdown_button2/dropdown_button2.dart'; import 'package:flut..

아래의 페이지다. Appbar가 없기 때문에 SafeArea를 주고 Column으로 모두 선언한 후 SizedBox로 간격을 벌려서 만들 생각이다. 초안은 기본 위젯에 익숙해지려고 기본 위젯들로만 구성중이지만, 여러가지 위젯들을 얼른 공부해야겠다.. 기본 위젯만 사용해서 그렇게 오래 걸리지 않았다. 아래 두 부분을 처음 해봐서 익숙하지 않아서 그런지 각각 만들려고 했다. 처음 만들고 이후에 1개만 만들고 컴포넌트로 따로 빼주고 재사용 했다. 전체 코드 import 'package:finalproject_front/pages/sign/join_division_page/components/division_button.dart'; import 'package:flutter/cupertino.dart'; imp..

고급기술은 나중에 입히고 기본적인 위젯들로만 구성해서 만들어서 백엔드와 속도를 맞춘다. 전체 적인 구조는 Scaffold - Appbar,Body,BottomNavigation 세가지로 구성 Appbar - Row : Icon, Logo,Divider Body - Column : Image(ClipRRect), TextButton1,2,3 BottomNavigation - Row : Divider, Icon1,2,3,4,5 1. 기본 틀 잡기 피그마에서 container의 높이를 임의로 지정을 해주었다. - 36 넓이는 모두 차지하게 해주고 padding값으로 추후에 조정을 해준다. 2. Appbar 먼저 만들기 AppBar _appBar() { return AppBar( elevation: 1, bac..

한 문단에 글자들을 각각 여러 스타일을 적용하고 싶을때 rich를 사용해 TextSpan()들의 모음으로 완성한다. TextSpan로 하나의 문장에 여러가지 TextSpan들을 합쳐서 만들었다. Text.rich( TextSpan( children: [ TextSpan(text: "안녕", style: TextStyle(color: Colors.blue)), TextSpan(text: "하세요", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.green)), TextSpan(text: "Text공부중입니다.", style: TextStyle(fontSize: 10, color: Colors.red)), ], ), ),