kakao앱 만들기 (2) - 친구 목록 화면

✅ 친구 목록 화면 만들기

 

1️⃣ User 샘플 데이터 만들기

class User {
  final String backgroundImage;
  final String name;
  final String intro;

  User(
      {required this.backgroundImage, required this.name, required this.intro});
}

final String _urlPrefix =
    "http://raw.githubusercontent.com/flutter-coder/ui_images/master/messenger";

User me = User(
  backgroundImage: "${_urlPrefix}_me.jpg",
  name: "김철수",
  intro: "고통없이는 얻는 것도 없다",
);

List<User> friends = [
  User(
    backgroundImage: "${_urlPrefix}_man_1.jpg",
    name: "홍길동",
    intro: "아버지라 불러도 되겠습니까",
  ),
  User(
    backgroundImage: "${_urlPrefix}_woman_1.jpg",
    name: "정도전",
    intro: "앞이 보이겠습니까",
  ),
  User(
    backgroundImage: "${_urlPrefix}_man_2.jpg",
    name: "박태수",
    intro: "지금 어디에 와 있을까",
  ),
  User(
    backgroundImage: "${_urlPrefix}_woman_2.jpg",
    name: "김상중",
    intro: "그런데 말입니다.",
  ),
  User(
    backgroundImage: "${_urlPrefix}_man_3.jpg",
    name: "김두한",
    intro: "4딸라",
  ),
  User(
    backgroundImage: "${_urlPrefix}_woman_3.jpg",
    name: "심영",
    intro: "내가 고자라니",
  ),
  User(
    backgroundImage: "${_urlPrefix}_man_4.jpg",
    name: "교강용",
    intro: "더 이상의 자세한 설명은 생략한다.",
  ),
  User(
    backgroundImage: "${_urlPrefix}_woman_4.jpg",
    name: "김환희",
    intro: "뭣이 중한디",
  ),
  User(
    backgroundImage: "${_urlPrefix}_man_5.jpg",
    name: "뚱이",
    intro: "아뇨, 뚱인데요?",
  ),
  User(
    backgroundImage: "${_urlPrefix}_woman_5.jpg",
    name: "김주원",
    intro: "이게 최선입니까 확실해요?",
  ),
];

- _urlPrefix에 선언한 경로에서 이미지 값을 불러 옴

 

 

 

2️⃣ FriednScreen 기본 뼈대 만들기

import 'package:flutter/material.dart';

class FriendScreen extends StatelessWidget {
  const FriendScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("친구"),
      ),
    );
  }
}

 

 

 

3️⃣ ProfileCard 위젯 뼈대

import 'package:flutter/material.dart';
import 'package:flutter_kakao/models/user.dart';

class ProfileCard extends StatelessWidget {
  const ProfileCard({required this.user, Key? key}) : super(key: key);
  final User user;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      child: ListTile(
        leading: CircleAvatar(
          radius: 20,
          backgroundImage: NetworkImage(
            user.backgroundImage,
          ),
        ),
        title: Text(
          user.name,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
        ),
        subtitle: Text(
          user.intro,
          style: TextStyle(
            fontSize: 12,
          ),
        ),
      ),
    );
  }
}

- user를 DI로 정의해서 user.dart에서 선언한 값을 불러오도록 적용함

 

 

 

4️⃣ FriendScreen에 ProfileCard 활용하기

import 'package:flutter/material.dart';
import 'package:flutter_kakao/components/profile_card.dart';
import 'package:flutter_kakao/models/user.dart';

class FriendScreen extends StatelessWidget {
  const FriendScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          const SizedBox(height: 10),
          ProfileCard(user: me),
          Divider(
            height: 1,
            color: Colors.black12,
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: Row(
              children: [
                Text("친구"),
                const SizedBox(width: 6),
                Text("${friends.length}"),
              ],
            ),
          ),
          Expanded(
            child: ListView(
              children: List.generate(
                friends.length,
                (index) => ProfileCard(user: friends[index]),
              ),
            ),
          )
        ],
      ),
      appBar: AppBar(
        title: Text("친구"),
      ),
    );
  }
}

- 세로(Column)로 내 프로필과 친구 프로필 목록을 정렬

- Text("${friends.length}") :  user.dart에 선언했던 friends의 length(길이)값을 보여줌

Expanded(
        child: ListView(
          children: List.generate(
            friends.length,
            (index) => ProfileCard(user: friends[index]),
          ),
        ),
      )

- List를 세로로 확장(Expanded)으로 정렬

- friends의 길이만큼 0부터 오름차순으로 호출

🔎 List.generate
: length의 길이만큼 0부터 index -1까지 범위의 각 인덱스를 오름차순으로 호출하여 만든 값으로 리스트를 생성함