[Flutter] 중복되는 코드 하나로 줄이기(.map)으로

Expanded(
                  child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                      children: 123
                          .toString()
                          .split('')
                          .map(
                            (x) => Image.asset(
                              'asset/img/$x.png',
                              height: 70.0,
                              width: 50.0,
                            ),
                          )
                          .toList()),
                  Row(
                      children: 456
                          .toString()
                          .split('')
                          .map(
                            (x) => Image.asset(
                              'asset/img/$x.png',
                              height: 70.0,
                              width: 50.0,
                            ),
                          )
                          .toList()),
                  Row(
                      children: 789
                          .toString()
                          .split('')
                          .map(
                            (x) => Image.asset(
                              'asset/img/$x.png',
                              height: 70.0,
                              width: 50.0,
                            ),
                          )
                          .toList()),
                ],
              )),

 

 

1. 패턴 파악

 - Row가 3개 있다.

 

2. 다른 것 파악

 - 숫자만 다름

 

3. 다른 것만 빼기

 

4. 나머지 같은 부분에서 mapping하기

(위의 경우 Row부터 mapping하기)

 

 

 

---

 

하나씩 단계별로 수행 한 결과를 보자

 

 

다른 것을 뺸다.

 

 Expanded(
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        123,
                        456,
                        789,
                      ]

 

 

나머지 같은 부분에서 mapping하기

(위의 경우 Row부터 mapping하기)

 

.map(
                            (x) => Row(
                              children: x
                                  .toString()
                                  .split('')
                                  .map(
                                    (y) => Image.asset(
                                      'asset/img/$y.png',
                                      height: 70.0,
                                      width: 50.0,
                                    ),
                                  )
                                  .toList(),
                            ),
                          )
                          .toList() //map의 괄호가 끝나는 부분 toList
                      )),

 

 

 

---

 

중복을 최소화 한 코드

 

 

Expanded(
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        123,
                        456,
                        789,
                      ]
                          .map(
                            (x) => Row(
                              children: x
                                  .toString()
                                  .split('')
                                  .map(
                                    (y) => Image.asset(
                                      'asset/img/$y.png',
                                      height: 70.0,
                                      width: 50.0,
                                    ),
                                  )
                                  .toList(),
                            ),
                          )
                          .toList() //map의 괄호가 끝나는 부분 toList
                      )),

 

아주 간단히 map으로 중복을 최소화 했다.