도전하기

다음의 UI를 플러터를 통해 그려보세요!
이미지는 Image.network 위젯을 사용해서 해결해보세요.

• 앱바 및 별도의 위젯은 선택사항입니다. 아래 UI가 화면에 구현되어있으면 됩니다.
  
• Column, Row 반복 사용으로 구현하면 코드가 너무 길어질 것 같아서 고민하던 중에, 안드로이드의 RecyclerView와 비슷한 위젯이 없을까 찾아보다 ListView.build를 발견해서 사용해보았습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    var sf = "스나이퍼팩토리 ";
    List<String> text = [sf+"홈페이지", sf+"인스타그램", sf+"네이버블로그", sf+"티스토리", sf+"카카오톡채널", sf+"유튜브", "젭(ZEP) PW:sfac"];
    Widget gether = Column(
                      children: [
                        Row(
                          children: [
                            Padding(
                              padding: const EdgeInsets.all(20.0),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(20.0),
                                child: Image.network(
                                  width:50,
                                  height:50,
                                    'https://gongd.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fae9c8e1c-59ed-4933-8e94-7bbbadb5bb2e%2FUntitled.png?id=2f756889-33cb-4eb6-9b2a-6b02d2ef36c3&table=block&spaceId=f1b22865-ad87-4ce2-a68e-4d7c57ebefa7&width=1990&userId=&cache=v2',
                                ),
                              ),
                            ),
                            Expanded(
                              flex: 5,
                              child: Text("게더"),
                            ),
                            Expanded(
                              flex: 2,
                              child: Stack(
                                alignment: Alignment.center,
                                children: [
                                  Container(
                                    width: 70,
                                    height: 40,
                                    decoration: BoxDecoration(
                                      border: Border.all(color: Colors.black),
                                      borderRadius: BorderRadius.all(Radius.circular(15))
                                    ),
                                  ),
                                  Text("추가하기")
                                ],
                              )
                            ),
                          ],
                        ),
                        Padding(
                          padding: const EdgeInsets.only(left: 20.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Text("메타버스 교육의 효과를 경험해보세요."),
                            ],
                          ),
                        )
                      ],
                    );

    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: ListView.builder(
            itemCount: text.length + 1,
            itemBuilder: (context, index) {
                if (index == 0) return gether;
                return Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(20.0),
                        child: Image.network(
                          width:50,
                          height:50,
                            'https://gongd.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fae9c8e1c-59ed-4933-8e94-7bbbadb5bb2e%2FUntitled.png?id=2f756889-33cb-4eb6-9b2a-6b02d2ef36c3&table=block&spaceId=f1b22865-ad87-4ce2-a68e-4d7c57ebefa7&width=1990&userId=&cache=v2',
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 5,
                      child: Text(text[index-1]),
                    ),
                    Expanded(
                      flex: 1,
                      child: Row(
                        //mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Icon(Icons.more_horiz,),
                        ],
                      ),
                    ),
                  ],
              );
            },
          ),
        ),
      )
    );
  }
}

---

주간평가

평가과제1) 연락처 앱 기반 작성

1. 연락처에 저장될 친구들은 총 5명으로, 이름과 번호는 다음과 같다.

• 이테디, 010-1000-2000
• 김스틴, 010-9000-8000
• 이주노, 010-3000-3000
• 임헬렌, 010-2000-8000
• 염해리, 010-1000-1000

2. 이미지는 네트워크로 (CDN 방식으로) 아래 URL에 랜덤이미지를 사용하여라

• https://picsum.photos/100/100
• 사용한 위젯은 다음과 같다. (다른위젯사용가능)
• Text, ListTile, Icon, Column, ???...
  
• class 개념도 추가로 공부해 연락처에 저장될 친구들을 객체로 만들어 사용했습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class Friend {
  String name;
  String phone;
  Friend(this.name, this.phone);
}

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

  @override
  Widget build(BuildContext context) {
    List<Friend> friends = [
      Friend('이테디', '010-1000-2000'), Friend('김스틴', '010-9000-8000'), 
      Friend('이주노', '010-3000-3000'), Friend('임헬렌', '010-2000-8000'), 
      Friend('염해리', '010-1000-1000'), 
    ];

    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: ListView.builder(
            itemCount: friends.length,
            itemBuilder: (context, index) {
                return ListTile(
                  leading: ClipRRect(
                    borderRadius: BorderRadius.circular(20.0),
                    child: Image.network(
                      width:50,
                      height:50,
                        'https://fastly.picsum.photos/id/970/100/100.jpg?hmac=tv6Z9pRPZU9RsVaBnUPa-aXUxqZJHD6tkWujltTdtak',
                    ),
                  ),
                  title: Text(friends[index].name),
                  subtitle: Text(friends[index].phone),
                  trailing: Icon(Icons.phone),
              );
            },
          ),
        ),
      )
    );
  }
}

---

코드를 모두 작성한 뒤에 예시 위젯을 발견해버렸습니다......
ListView......살아남을수잇을까요?..............................