'...'는 컬렉션을 펼쳐주는 연산자 이다.
리스트나 맵을 펼쳐서 다른 리스트나 맵을 포함시킬때 사용한다.
다른 컬렉션 안에 컬렉션을 삽입할때 사용
var item = [1, 2, 3]; var item1 = [0, ...list]; // 0, 1, 2, 3nullable list
var item = [1, 2, 2, 3, 3, 4, 5]; var new = {..item, 6, 7}; // 1, 2, 3, 4, 5, 6, 7
nullable list
var item; var item1 = [0, ...?test]; // 0
Stack(
children: [
Positioned(
top: 308.h,
left: 20.w,
child: Text('이메일(아이디)', style: White(14.sp, FontWeight.w600))),
Positioned(
top: 333.h,
left: 12.w,
child: GlassContainer(
width: 320.w,
height: 40.h,
margin: EdgeInsets.symmetric(horizontal: 8),
color: Color(0x3300287C),
borderGradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.5),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.10, 0.60, 0.40, 0.0],
),
blur: 12,
borderRadius: BorderRadius.circular(10),
borderWidth: 1.0,
elevation: 0,
child: Align(
alignment: Alignment.center,
child: Text(
'example@example.com,',
style: White(14.sp, FontWeight.w600),
),
),
),
),
Positioned(
top: 393.h,
left: 20.w,
child: Text('이름', style: White(14.sp, FontWeight.w600))),
Positioned(
top: 418.h,
left: 12.w,
child: GlassContainer(
width: 320.w,
height: 40.h,
margin: EdgeInsets.symmetric(horizontal: 8),
color: Color(0x3300287C),
borderGradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.5),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.10, 0.60, 0.40, 0.0],
),
blur: 12,
borderRadius: BorderRadius.circular(10),
borderWidth: 1.0,
elevation: 0,
child: Align(
alignment: Alignment.center,
child: Text(
'김이름',
style: White(14.sp, FontWeight.w600),
),
),
),
),
Positioned(
top: 478.h,
left: 20.w,
child: Text('성별', style: White(14.sp, FontWeight.w600))),
Positioned(
top: 503.h,
left: 12.w,
child: GlassContainer(
width: 320.w,
height: 40.h,
margin: EdgeInsets.symmetric(horizontal: 8),
color: Color(0x3300287C),
borderGradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.5),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.10, 0.60, 0.40, 0.0],
),
blur: 12,
borderRadius: BorderRadius.circular(10),
borderWidth: 1.0,
elevation: 0,
child: Align(
alignment: Alignment.center,
child: Text(
'남성',
style: White(14.sp, FontWeight.w600),
),
),
),
),
Positioned(
top: 563.h,
left: 20.w,
child: Text('생년월일', style: White(14.sp, FontWeight.w600))),
Positioned(
top: 588.h,
left: 12.w,
child: GlassContainer(
width: 320.w,
height: 40.h,
margin: EdgeInsets.symmetric(horizontal: 8),
color: Color(0x3300287C),
borderGradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.5),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.10, 0.60, 0.40, 0.0],
),
blur: 12,
borderRadius: BorderRadius.circular(10),
borderWidth: 1.0,
elevation: 0,
child: Align(
alignment: Alignment.center,
child: Text(
'1996.01.01',
style: White(14.sp, FontWeight.w600),
),
),
),
),
Positioned(
top: 648.h,
left: 20.w,
child: Text('가입일', style: White(14.sp, FontWeight.w600))),
Positioned(
top: 673.h,
left: 12.w,
child: GlassContainer(
width: 320.w,
height: 40.h,
margin: EdgeInsets.symmetric(horizontal: 8),
color: Color(0x3300287C),
borderGradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.5),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.10, 0.60, 0.40, 0.0],
),
blur: 12,
borderRadius: BorderRadius.circular(10),
borderWidth: 1.0,
elevation: 0,
child: Align(
alignment: Alignment.center,
child: Text(
'2024.04.01',
style: White(14.sp, FontWeight.w600),
),
),
),
)
],
);반복되는 컨테이너와 텍스트 때문에 쓸데없이 코드만 길어져서
가독성이 매우 떨어진다.
class MyInfomation extends StatefulWidget {
const MyInfomation({super.key});
@override
State<MyInfomation> createState() => _MyInfomationState();
}
class _MyInfomationState extends State<MyInfomation> {
Map<String, dynamic> list = {
'이메일(아이디)': 'example@example.com',
'이름': '김이름',
'성별': '남성',
'생년월일': '1996.01.01',
'가입일': '2023.04.01',
};
@override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned(
top: 296.h,
left: 8.w,
child: CustomContainer2(
width: 344.w,
height: 428.h,
),
),
...list.entries.map((entry) {
int index = list.keys.toList().indexOf(entry.key);
return Positioned(
top: 308.h + (index * 84.h),
left: 20.w,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
entry.key,
style: White(14.sp, FontWeight.w600),
),
SizedBox(height: 8.h),
GlassContainer(
width: 320.w,
height: 40.h,
color: Color(0x3300287C),
borderGradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.5),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
Colors.white.withOpacity(0.2),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.10, 0.60, 0.40, 0.0],
),
blur: 12,
borderRadius: BorderRadius.circular(10.r),
borderWidth: 1.0,
elevation: 0,
child: Center(
child: Text(
entry.value,
style: White(14.sp, FontWeight.w600),
),
),
),
],
),
);
}).toList(),
],
);
}
}
'list.entries.map((entry) { ... }):'
-
list.entries는 맵의 키-값 쌍의 목록을 제공하는데 각 키-값 쌍은 MapEntry타입이다.
-
'map'함수는 각 MapEntry를 순회하며, 이를 입력으로 받아 새로운 리스트를 생성한다.
int index = list.keys.toList().indexOf(entry.key);
- 각 'entry'는 MapEntry타입으로, 'entry.key' 는 현재 항목의 키이다.
- 'list.keys' 는 맵의 모든 키를 제공하며, 이를 'toList()' 메서드 리스트로 변환한다.
- indexOf(entry.key)는 해당 키가 리스트에서 몇 번째에 위치하는지 인덱스를 반환합니다. 이를 통해 현재 항목의 인덱스를 계산한다.
