앱바 및 별도의 위젯은 선택사항입니다. 아래 UI가 화면에 구현되어있으면 됩니다.
Column, Row 반복 사용으로 구현하면 코드가 너무 길어질 것 같아서 고민하던 중에, 안드로이드의 RecyclerView와 비슷한 위젯이 없을까 찾아보다 ListView 위젯을 발견해서 사용해보았습니다.
안드로이드와 다르게 따로 adapter를 구현하지 않아도 listView를 사용할 수 있다는 점이 좋은 것 같습니다…
다음의 UI를 플러터를 통해 그려보세요!
이미지는 Image.network 위젯을 사용해서 해결해보세요.
앱바 및 별도의 위젯은 선택사항입니다. 아래 UI가 화면에 구현되어있으면 됩니다.
Column, Row 반복 사용으로 구현하면 코드가 너무 길어질 것 같아서 고민하던 중에, 안드로이드의 RecyclerView와 비슷한 위젯이 없을까 찾아보다 ListView 위젯을 발견해서 사용해보았습니다.
안드로이드와 다르게 따로 adapter를 구현하지 않아도 listView를 사용할 수 있다는 점이 좋은 것 같습니다…
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) 연락처 앱 기반 작성