[Flutter] 230113 - 난수 생성기

수강 강의: https://url.kr/inflearn
진도: 45강 / 127강

---

이론

• const : 절대 변경되지 않는 값

  Flutter를 리로드 할 때, 한번 그린 위젯은 다시 그리지 않고 기억하여 build를 다시 실행하지 않는다. 따라서 const로 만들어서 사용하면 랜더링을 효율적으로 할 수 있음

  const를 못 쓰는 위젯은 어떤 것일까?

  ex) ElevatedButton
  => 안에 setState가 있기 때문에 사용 불가능
  근데 ElevatedButton안의 Text 위젯에는 const를 쓸 수 있음.

  즉, 상태를 변경해주지 않는 것에는 const를 사용할 수 있고 그 반대는 불가능하다.

---

0. 프로젝트 미리보기

1) 기본 숫자들로 화면을 구성함
2) 숫자를 이미지로 바꿔주기 (String -> .jpg)
3) 생성하기 버튼을 누르면 난수가 생성됨

1. 화면 구성 단계

크게 top, body, bottom으로 분리하여 구성한다.

1-1. ElevatedButton 크기 설정하기

ElevatedButton의 크기를 설정하기 위해 SizedBox로 감싸주고 width, height로 조정해줬다.
SizedBox 뿐만 아니라 Container, Row로도 할 수 있지만 Container 같은 경우에는 기능이 많기 때문에 어떤 목적으로 썼는지 잘 모르지만 SizedBox를 쓰면 너비 높이 조절을 하기 위해 썼다는 목적을 한번에 알 수 있기 때문에 SizedBox를 쓰는 편이 더 좋다

1-2. Padding

위젯을 Padding 으로 감싸줘서 각 화면 가장자리를 띄워줬다.

1-3. const 폴더

color를 정리해주기 위해서 const 폴더에 color.dart를 따로 만들어서 color값들을 분리하고 homeScreen에서는 color들의 이름만 가져와서 사용해줬다.

2. 숫자를 이미지로 바꿔주기 (String -> .jpg)

2-1. MAP 함수 이용하기

간단한 예시로, Map을 이용해서 String을 이미지 파일로 바꿔줄 수 있었다.

final number = 123;
print(number.toString().split('').map((x) => '$x.jpg').toList());
/// (출력) [1.jpg, 2.jpg, 3.jpg]

그런데 여기서 우리가 만들어야 하는 것은 123, 456, 789 이므로

void main()
{
  final numbers = [
    123,
    456,
    789,
  ];
  
  print (
    numbers.map(
    (x) => x.toString().split('').map(
          (y) => '$y.jpg',
        ).toList(),
    ).toList(),
  );
}
// (출력) [[1.jpg, 2.jpg, 3.jpg], [4.jpg, 5.jpg, 6.jpg], [7.jpg, 8.jpg, 9.jpg]]

이렇게 바꿀 수 있다.
이를 적용하면

123.toString()
	.split('')
	.map((x) => Image.asset(
		'asset/img/$x.png',
		height: 70,
		width: 50,
		))
	.toList()

가 된다.

2-2. 코드 가독성 높이기

123,456,789 경우의 코드를 각각 쓰면 숫자만 다른 코드가 줄줄이 써있게 된다.
더러운 코드를 줄여버리자.

children: [123, 456, 789]
	.map((x) => Row(
		children: x
			.toString()
			.split('')
			.map((y) => Image.asset(
				'asset/img/$y.png',
				height: 70,
				width: 50,
				))
			.toList(),
		))
	.toList(),

3. 난수 생성하기

3-1. Rand

Rand를 이용해서 1000 미만의 숫자들을 랜덤으로 생성해준다.
그리고 List에 받아오고, 그전에 만들어져 있던 123, 456, 789 리스트를 대체하여 사용한다.

3-2. Set

List를 사용하면 매우 낮은 확률로 중복 값이 나올 수 있다.
따라서 Set을 사용한다.

3-3. While

Set으로 바꿔주고 for문을 그대로 사용하면 숫자가 두 개만 나오는 경우가 있다.
따라서 for문을 while (newNumbers.length != 3) 으로 대체해준다.

=> 강의 보면서 이런 에러가 날거라는 생각도 못했는데 의외의 에러가 있었다
에러 고치는 것도 중요한데 코드 짜는 단계에서 에러 예상하고 미리 잡아내는게 중요한듯

4. 마무리

프로그램은 코드를 정리하는 것 까지가 프로그래밍이다.