comFFuny comFFuny

프로필 스크린 우선 프로필 스크린을 만들기 전에 screens 폴더를 만들어 주고 fee_screen을 refactor로 옮겨준다. 또 profile_screens.dart를 생성해준다. StatelessWidget로 만들어 주고 Container을 Scaffold로 변경해준다. 그리고 생성됐는지 확인하기 위해 backgroundcolor을 black로 만든후 실행해본다. 정상 작동하는것을 알 수 있다. 그리고 appbar를 만들어 줄건데 이번엔 appbar옵션에서 하는것이 아닌 커스텀으로 직접 만들어 보자. Column으로 만들어 준후 children 안에 Row를 넣어준다. 그 안에 children에 text로 username과 우측 메뉴 버튼을 IconButton으로 만들어 준다. Text는 cen..

온라인 이미지 보여주기 asset 를 이용하는게 아닌 온라인 이미지를 보여주기 post의 Container를 CachedNetworkImage를 사용하는데 내장함수가 아니라 라이브러리를 가져와야 한다. pub.dev 에서 cached_network_image 를 찾아서 installing에서 dependencies 하단의 부분을 복사해서 pubspec.yaml에 dependencies 부분에 붙여넣어준다. 강의에선 nullsafety전이라 2.2.0+1을 사용하지기 때문에 이 버전을 사용해보자(만일 null safety가 나온다면 pubspec.yaml의 상단에 sdk의 2.12.0을 2.7.0으로 바꿔본다. 2.70으로 낮추면 다른 dart 파일들의 Key? key에서 ?들을 제거해줘야 한다.). 붙여..

피드스크린 만들기 리스트 뷰로 피드스크린 페이지 만들기 지난 번에 만든 feed_screen에 appBar 밑에 body에 ListView.builder을 만들어 준다. 그 안에 itemBuilder을 채워줘야 하는데 따라 가보면 (context, index){}의 형식으로 채워줘야 한다. 이것을 하단에 메소드로 만들어도 되고 바로 써줘도 된다. 지금은 메소드로 만들어 줘 보자. Widget로 feedListBuilder을 만들어 주고, return에 Container을 준다. color에는 Colors.accents를 준다. 이게 리스트로 되어있어 색이 순서대로 되어있고,[index]를 넣어서 숫자가 바뀌면 색이 바뀌게 나온다. 그래서 그안에 색을 반복 시키기 위해서 index % Colors.acce..

기초부터 다시 시작 프로젝트부터 생성을 해보자. 생성을 한 후, avd manager에서 에뮬레이터를 생성 한 후 처음 상태로 실행해보자. 여기까진 다른 글들을 찾아가면서 하면 금방 할 수 있다. 다른 디버깅 방법으로는 핸드폰을 직접 연결해서 하는 방법인데, 지금은 선없이 연결하려고 해본다. 우선 핸드폰에 플레이 스토어에서 ip address를 검색한 후 ip tools 라는 어플을 다운 받는다. 다른 ip를 볼 수 있는 앱이면 괜찮다. 실행 후 Internal IP를 찾는다. 그리고 adb가 없으면 설치 한후 cmd 창에서 스마트폰을 연결한 상태로 adb tcpip 5555를 해주고 adb connect Internal IP:5555를 해주면 열린다. 이렇게 같은 와이파이안에있으면 작동을 하게된다.(그..

디버깅 방법 안드로이드 스튜디오에서 에디터부분의 좌측의 숫자 옆에 클릭하면 빨간 점이 생기는데 해당부분에서 멈춰서 하단에 디버그를 봐가면서 디버깅을 할 수 가 있음. 또는 print를 해서 콘솔창에서 확인하는 방법도 있다. firebase 안드로이드 세팅 https://pub.dev/packages/firebase_auth/versions/0.14.0+9 pub.dev에서 read me의 세팅에 따라서 build.gradle 2곳에 해당부분을 복사해서 넣어주면 된다. 최신버전으로 넣어줘도 된다. 그리고 installing에서 해당 버전의 부분을 복사해서 pubspec.yaml에 dependencies에 붙여넣어준 뒤 pub get을 해준다. 새로운 프로젝트를 만들어 주면 된다. 그리고 설정에서 안드로이드..

가입 페이지 만들기 screens에 signup_page.dart를 만들어주고 signin_page를 그대로 복사해온후 클래스명을 리네임해준다. signin_page에서 bool으로 바꿔줘도 되지만 새로 만들어준 이유는 하나로 만들었을때 깨끗해 보이지 않아서 그냥 두개를 만들어준것이다. flag로 바꿔줘도 상관없다. 그리고 signin과 signup 페이지의 각 페이지로 이동 하는 부분을 pushReplacement 해서 해당 페이지로 이동 하게 해준다. class _SignInPageState extends State { @override Widget build(BuildContext context) { return Scaffold( resizeToAvoidBottomInset: false,//키보드 ..

검색 창 대신 팔로/언팔로 하는 목록 만들기 기존 검색 페이지는 서버쪽의 일이 더 많이 필요한것으로 보임. 그래서 유저 목록을 보여주고 팔로/언팔로를 보여주는 페이지를 만들 거임. screen 폴더에 search_page.dart를 만들어주고 stateless 위젯으로 만들어 준다. return에는 SafeArea로 만들어 주고 child에 ListVies.builder를 넣어준다. 거기에는 (context, index)를 받아서 사용하고 return에 _item을 넣어준다. 그안에 유저 정보를 Stirng 으로 받는 users[index]로 넣어준다. 그 users 에 대한 부분은 상단에 선언해준다. final List users = List.generate(10, (i) => 'user $i'); _..

탭 버튼 아래 탭 애니메이션 먼저 나중에 grid로 바꾸겠지만 애니메이션 구현을 위해 색으로 먼저 진행 한다. 2개의 탭의 위치를 먼저 정해준다. _gridMargin = 0; 으로 하여 내가 올린 이미지 위치는 0에서 시작하고 _myImgGridMarigin = size.width; 로 하여 내가 태깅된 이미지 탭 부분은 사이즈 밖에서 시작한다. SliverToBoxAdapter를 생성해서 사용한다. 왜냐하면 CustomScrollView를 사용하는데 그 안에 Sliver을 사용해야 하는데 Sliver가 아닌 위젯들을 Sliver로 사용할 수 있게 해주는 위젯이 SliverToBoxAdapter이다. 상단 사이드 메뉴처럼 스택으로 왔다갔다 하게 할 것이다. 그 안에 AnimatedContainer을 2..