[프로젝트] 랜덤숫자 생성
들어가기 앞서...
레이아웃을 만들어 보겠다.
1. 미리보기
본문으로...
1. 레이아웃 만들기!
1) 생성하기! 버튼의 크기를 가로 사이즈의 최대로 먹게 해주자!
SizedBox 위젯을 사용할 것이다.
ElevatedButton 버튼의 크기를 크게 만드는 방법은 여러가지 방법이 있을 수 있다.
// 1) Container 사용
Container(width: double.infinity, child: ElevatedButton())
// 2) SizedBox 사용
SizedBox(width: double.infinity, child: ElevatedButton())
풍기는 뉘앙스가 중요하다!
Container 는 패딩, 마진, 높이, 길이, 생상 여러가지 매개변수를 넣을 수 있어, 여러가지가 가능한 뉘앙스이고
SizedBox 는 width , height 만 넣을 수 있어서 크기 조정 여백을 의미 하는구나~ 하는 뉘앙스이다.
SizedBox가 Container 보다 조금 더 랜더링이 빠를것이고, 어떤 목적으로 우리가 사용했는지 알기 쉽다.
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('랜덤함수 생성기'),
IconButton(
onPressed: () {},
icon: Icon(
Icons.settings,
),
),
],
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('123'),
Text('223'),
Text('332'),
],
)),
// 무한대값 double.infinity
SizedBox(
width: double.infinity,
child: ElevatedButton(onPressed: () {}, child: Text('생성하기!')))
],
),
),
2. 디테일 적용 해보자!
1) 상수생성!
상수 폴더 (Constant)를 생성해, Color 를 선언해서 import 해 사용해주도록 하겠다.
import 'package:flutter/material.dart';
const Color PRIMARY_COLOR = Color(0xFF2D2D33);
const Color RED_COLOR = Color(0xFFEA4955);
const Color BLUE_COLOR = Color(0xFF549FBF);2) 여백 적용!
SafeArea(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child : Column(
...
)
)
)
3. Map 함수 적용!
map 연습!
final number = 123;
print(number.toString().spilit('').map((x) => '$x.jpg).toList()); // [1.jpg, 2.jpg, 3.jpg]
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]]
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [123, 456, 789]
.map((x) => Row(
children: x
.toString()
.split('')
.map((y) => Image.asset(
'asset/img/random_number/$y.png',
height: 70.0,
width: 50.0,
))
.toList()))
.toList(),
),
),
4. 조건에 맞는 padding 적용!
Dart asMap().entries() 활용
마지막 인덱스값을 가져와서 마지막 인덱스에는 padding 0 으로 넣기
asMap().entries연습
void main() {
final numbers = [
123,
456,
789
];
// 인덱스의 값이 key 가 되고,
// 실제 값이 value 가 된다.
print(numbers.asMap().entries); // (MapEntry(0: 123),MapEntry(1: 456),MapEntry(2: 789),)
print(numbers.asMap().entries.toList()[0].key); // 0
print(numbers.asMap().entries.toList()[0].values); // 123
print(numbers.asMap().entries.toList()[1].key); // 1
print(numbers.asMap().entries.toList()[1].values); // 456
}Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [123, 456, 789].asMap().entries // key 값과 value 값 접근 가능해짐
.map((x) => Padding(
padding: EdgeInsets.only(bottom: x.key == 2 ? 0: 16.0),
child: Row(
children: x
.toString()
.split('')
.map((y) => Image.asset(
'asset/img/random_number/$y.png',
height: 70.0,
width: 50.0,
))
.toList()),
))
.toList(),
),
),5. 난수 생성하기!
1) 버튼 클릭시 Random() 함수 가져오는 클래스 가져오기
import 'dart:math';
...
onPressed: () {
final rand = Random();
print(rand.nextInt(1000)); // 1000까지 숫자를 랜덤으로 출력한다.
}onPressed: () {
final rand = Random();
final List<int> newNumbers = [];
for (int i = 0; i < 3; i++) {
final number = rand.nextInt(1000);
newNumbers.add(number);
}
setState(() {
randomNumbers = newNumbers;
});
},하지만 중복되는 숫자가 나올 가능성이 잇다.
그러니 중복이 불가능하게, List -> Set 으로 변경, for -> while 문을 변경을해주자
onPressed: () {
final rand = Random();
final Set<int> newNumbers = {};
// length 가 무조건 3개가 아닐떄까지 반복 시킨다. (Set에 담기 3개 의 value 가 중복이 아닐때까지)
while(newNumbers.length != 3) {
final number = rand.nextInt(1000);
newNumbers.add(number);
}
setState(() {
randomNumbers = newNumbers.toList();
});
},
6. Navigation 이용해서 페이지 이동!
나중에 이렇게 길게 Navigator 를 적고 그렇지는 않지만, 우선은 이렇게도 배워보는것이다.
SettingsScreen() 클래스로 이동이 가능해진다.
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context){
return SettingScreen();
})
);
},
끝으로...
- 레이아웃을 만들수 있고, asMap().entries 로 키값과 벨류값 접근을 해 분기처리도 가능해졌다.
- Navigator 사용가능하다.
