랜덤 숫자 생성기

레이아웃 설정

먼저 구현 하고싶은 레이아웃대로 설정해주기

 

 

 

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

나머지 부분들을 숫자 부분이 차지할 것이기에 Expanded로 묶어준다

 

 

 

Container(
            width: double.infinity,
            child: ElevatedButton(onPressed: () {}, child: Text("생성")),
          ),

double.infinity 이용해 버튼 너비를 무한히 늘려줄 수 있다

 

Container 아닌 SizedBox로 묶어줘도 되지만

그럴 경우 버튼 색상 바꾸는 등의 다른 기능은 구현하지 못하고, 단지 너비와 길이 사이즈를 조절할 수 있다

 

하지만 Container를 사용하면 추후 여러 개의 Container를 사용했을 때 이 Container가 무슨 기능을 하는 지 한 눈에 알아보기 어렵다

성능 차이는 아주 미세하게 SizedBox가 좋다고 한다

 

 

 

color.dart 파일 생성해 자주 사용하는 색상 정의해준다

home_screen.dart에서 원하는 색상 넣어주기

 

 

 

컬럼을 padding으로 묶어주기

EdgeInsert는 여러 기능이 있는데 그 중 all을 사용해 상하좌우 여백을 똑같이 20.0씩 넣어주었다

 

 

색상과 여백 설정 후 결과

 

 

숫자 이미지 중 흰색이 있어서 잘 보이게끔 배경색을 변경해줬다

이미지를 map(), toString(), split()을 이용해 편리하게 가져와준다

숫자 이미지의 아래 위 간격이 너무 좁아서 Padding을 주었다

 

 

 

column에 정의되어 있던 숫자들을 _HomeScreenState class에 List로 만들었다

생성 버튼을 누르면 어떤 기능을 수행할 것인지 onPressed 함수에 기능을 작성한다

 

랜덤 수를  생성할 때 중복 값 생성을 방지하기 위해 List 대신 Set으로 생성한다

 

만약 for문으로 작성하게 되면 for(int i=0; i<3; i++){} 이렇게 되는데 이러면 난수가 중복일 때에 중복되어 걸러진 값을 뺀 2개 수만 보여지기 때문에 while문으로 작성한다

while(newNums.length != 3){}으로 진행하면 중복되지 않는 3개의 수가 들어갈 때까지 코드가 진행된다

생성 버튼을 누르면 난수가 중복 제거된 채로 잘 생성된다

 

 

 

각 화면 부분별로 알아보기 쉽게 코드 정리까지 완!

 

 

 

home_screen.dart

Navigation 해주기

먼저 이동을 원하는 스크린(settings_screen.dart)를 생성해주었다

 

아이콘 버튼 눌렀을 때 SettingsScreen으로 넘어가게 해준다

Navigator.of(context).push()는 list의 add 개념과 비슷하다

 

75번 줄(return 문)은 push를 원하는 screen을 넣어주면 된다

왼쪽 홈 화면에서 상단 아이콘(newpaper)을 눌러주면 SettingsScreen으로 이동한다

 

 

 

숫자 이미지들을 가져오고 패딩, 색상 등 설정해준다

 

 

 

버튼 설정

버튼 색상은 ElevatedButton.styleFrom()을 이용한다

 

 

 

슬라이더 설정

maxNum변수는 아래와 같이 미리 정의해둔다

class _SettingsScreenState extends State<SettingsScreen> {
  double maxNum = 10000;

슬라이더는 value와 onChanged 두 개의 매개변수를 꼭 받아야 한다

최소값, 최대값을 각각 10000, 1000000으로 정의해주었다

 

값을 슬라이더에 넣어주고 값이 변경될 때마다 값을 저장해주어야 한다

onChanged가 될 때마다(setState가 불릴 때마다) value를 maxNum에 저장해 주어야 한다

value가 저장되면 빌드가 다시 실행되게 한다

maxNum에 해당되는(value안에 들어오는) 값으로 노브가 그려짐

 

 

 

저장버튼을 누르면 홈스크린으로 이동하기

settings_screen.dart

Navigator.of(context).pop()을 이용하면 간단히 뒤로 가기(홈스크린으로 이동) 할 수 있다

pop() 안에 maxNum.toInt()를 한 것은 받은 maxNum을 정수형으로 받아 값을 저장해가기 위함

 

 

 

지정한 숫자를 홈스크린에 전달해주기

home_screen.dart

SettingsScreen에서 지정한 res값이 null이 아니면 maxNum 값으로 가져와 새로 빌드해준다

 

 

 

홈스크린에서 상단바 newpaper 아이콘을 누르면 세팅스크린으로 넘어가고

최대 값을 슬라이더로 지정하고(위 예시에서는 1000) 저장 버튼을 누르면

홈스크린으로 돌아가고 생성 버튼을 누르면

세팅스크린에서 지정해 준 최대 값(1000) 이하의 값이 랜덤으로 생성된다

 

 

 

settings_screen.dart

세팅스크린에서 값 지정해주고 홈스크린에서 값을 생성하다가 다시 세팅스크린으로 돌아가면 지정한 값이 아니라 코딩으로 박아준 maxNum 값으로 초기화되어 있다

다시 세팅스크린으로 돌아가도 지정해줬던 값으로 보여지게끔 하고싶다면 initState()를 사용할 수 있다

 

initState()는 위 예시에서는 _SettingsScreenState가 재생성되는 경우에만 initState를 실행한다

initState()는 빌드가 실행되기 전 실행된다

그러므로 maxNum값이 초기화(1000)되지 않는 것이다

 

 

 

num_row.dart

중복되어 쓰이는 숫자 이미지 가져오는 코드를 따로 dart 파일로 저장해주었다

이처럼 필요한 곳에 더 보기 쉽게 사용해 줄 수 있다

 

 

 

끝 !