[Flutter/Dart] 팀 소개 어플 만들기(2) : ListView.separated(), ListTile

원문 포스팅 🔗

ListView.separated()

ListView.separated() 활용해서 팀원 카드 만들기

어제 작업한 화면에서 리스트뷰를 눌렀을 때 각 상세 페이지로 접근되는 화면을 구현했다.

그전에 어제 실패한 팀원 정보의 리스트화..
일단 팀원분이 별도의 dart 파일을 생성하셔서 리스트를 만들어주셨고, 나는 그걸 활용해서 메인페이지를 수정했다.

import 'dart:convert';
import 'dart:html';

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
// ignore: unused_import
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

import 'main.dart';

class Profile {
  Profile({
    required this.photo,
    required this.name,
    required this.mbti,
    required this.blog,
    required this.mytype,
    required this.role,
  });
  String photo;
  String name;
  String mbti;
  String blog;
  String mytype;
  String role;
}

class ProfileService extends ChangeNotifier {
  List<Profile> profileList = [
    Profile(
        photo:
            '...',
        name: 'ㅇㅇㅇ',
        mbti: 'INTP',
        blog: '...',
        mytype: '공부는 마라톤',
        role: '팀장'),
  ];

  int get length => profileList.length;
}

일단 팀원 카드에 들어갈 항목은 총 5개(사진, 이름, MBTI, 한마디, 역할)이지만, 상세페이지에 들어갈 항목들이 또 있으니까 한군데 다 몰아넣기 ㅋㅋㅋㅋㅋㅋ

여튼 저 프로필 클래스로 나도 메인을 수정했다.

프로필이 리스트로 선언되어 있고, 총 길이도 프로필의 수로 지정되어 있으니까 나는 저걸 활용만 하면 되게 되었다.(멋진 팀원님..)

일단 ListView itemCount는 프로필 길이로 설정했고, 여백을 누르면 상세페이지 접근이 안되는건 구글링과 챗GPT 덕에 해결할 수 있었다.

본 강의 들어가기 전에 플러터를 활용한 앱개발 종합반 강의를 들었는데 그때 구글 책 api로 불러오는 코드를 활용했다.

내가 저 ListView.separated를 GestureDetector로 묶어서 Navigator.push 했다가 안되서 GestureDetector >> ListTile 로 변경해서 작업했는데 되는거다... 진자... 좀만 더 빨리 기억해낼껄....

Expanded(
  child: Consumer<ProfileService>(
  	builder: (context, profileService, index) {
    return ListView.separated(
      itemCount: profileService.profileList.length,
      itemBuilder: (context, index) {
      final profile = profileService.profileList[index];
      
      return ListTile(
      	contentPadding: EdgeInsets.only(left: 2),
        onTap: () {
        Navigator.push(
        	context,
            MaterialPageRoute(
            	builder: (context) => DetailPage(
                index: index,
                ),
            ),
      );
      },
      title: Feed(profile: profile),
    );
    },
      // 각 Feed 들을 구분하기 위해서 Divider 추가
    separatorBuilder: (context, index) {
    	return Divider();
    },
    );
  }),
)

여튼간에 검색의 노예로 시간을 보내다가 드디어 성공했을때의 기쁨이란..!!

아 중간에 너무 모르겠어서 팀원분들께 같이 고민해달라고 했었는데, 한 팀원분께서 버튼으로 만들어도 되지않냐고 하셨는데 진자 나는 그 생각 안해봤다... 멋지다...

ElevatedButton(
    style: ButtonStyle(
    backgroundColor:
      MaterialStateProperty.all<Color>(Colors.white),
),

버튼으로 작업해도 Style 만 수정해주면 사용해도 무방할 것 같음!!

내일은 상세페이지 사진 맞추는거랑 메모 적은거 저장하고 불러오는 기능 작업할거임~!!

그리고 깃 쓰는거 어렵다..
근데 그래도 몇번하니까 손에 익긴 함;;