[소셜차트] 앱 제작기 #6. Profile & Notice Screen Layout

이전 작업

2022.10.24 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #5. Model and Firestore 1%

[소셜차트] 앱 제작기 #5. Model and Firestore 1%

뭔가 로그인에 불만이 있거나 문제가 있는 양반들을 위한 ReportScreen을 제작했어. DB model도 만들고 firestore에 데이터가 잘 들어가는 것도 확인했고, 이번에는 비교적 간단한 Profile 이랑 Notice Screen Layout을 만들거야. 이미 이야기 했듯이 난 React native로 미리 해놓은 게 있어서 그걸 참고할 거야.

미리 만들어 본 React native 앱 프로파일.

상단에 배경 화면과 사용자 화면을 배치하고 프로필 수정과 계정 설정 버튼을 넣어둘거야. 그리고 그 아래에는 사용자 별칭과 소개 등등을 넣어둘거고 그 아래는 아직 데이터가 없으니가 대강 더미 데이터로 채울거고.👇

Flutter Profile Screen

ListView 상단에 유저 이미지(현재는 더미) 그리고 정보를 넣었고 그 아래 Horizontal ListView를 추가했어. 그리고 그 아래는 유저가 작성한 InsightCard를 pagination 할거야. horizontal ListView 그릴 때 hasSize 에러가 막 나와서 보니까 Vertical이랑은 다르게 height 설정 안해서 그래. 대부분 중첩된 layout 할때 많이 볼 수 있는 에러인데 Column안에서 listview를 쓴다거나 할 때 Expanded 위젯을 사용하는 것도 같은 이유.

import 'package:flutter/material.dart';
import 'package:socialchart/customWidgets/InsightCard/InsightCard.dart';
import 'package:socialchart/customWidgets/UserProfile.dart';

List<int> test = [1, 2, 3, 4, 5, 6, 7];

class ScreenProfile extends StatelessWidget {
  const ScreenProfile({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Profile Screen"),
          backgroundColor: Colors.white,
          elevation: 0,
          titleTextStyle: TextStyle(color: Colors.black),
        ),
        body: Container(
          color: Colors.black12,
          child: ListView.builder(
            // shrinkWrap: true,
            itemCount: test.length + 1,
            itemBuilder: ((context, index) {
              switch (index) {
                case 0://첫번째는 고정된 UserProfile
                  return UserProfile();
                  break;

                default://나머지는 InsightCart
                  return const InsightCard();
                  break;
              }
            }),
          ),
        ));
  }
}

데이터 작업은 양이 많으니까 Notice 스크린 layout 작업을 먼저 했어. Notice는 뭐 간단해 내가 팔로우하고 있는 사람이나 차트에 글 올라오면 알려주는 곳이야. 그래서 생각보다 심플해. 그냥 ListView인데 안쪽은 ListTile로 채웠어. ListTile 안쓰고 하려면 Row,Column 난장판일텐데 이런게 있어서 얼마나 다행인지 ㅋㅋㅋㅋ ListTile은 계속 최대한 써봐야겠어. 편해편해~ ㅋ

Notice Screen

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ScreenNotice extends StatelessWidget {
  const ScreenNotice({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Notice Screen")),
      body: Center(
        child: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Card(
              child: ListTile(//ListTile 없었으면 어쩔!
                leading: CircleAvatar(
                  child: Text("B"),
                ),
                title: Text("Title"),
                subtitle: Text("subtitle"),
                onTap: () => {print("pressed")},
              ),
            );
          },
        ),
      ),
    );
  }
}

이제 복잡하게 해놨던 layout들도 쪼개서 작은 위젯으로 만들어주면 일단은 끝. 이제 data 이어붙이는 작업을 해야하는데 휴~~ 이거 걱정이네 ㅎㅎ React native에서는 별 생각없이 React Query로 Component 안에서 불러다 썼는데;;;; 음.... Flutter는 어찌해야 하나... ㅎㅎㅎ 뭐 이리저리 해보면 되겠지 ㅋㅋㅋㅋㅋ 이제 앱 제작 한 20% 온 거 같은데 지치면 안되지 ㅋㅋㅋ 안녕~