이전 기사에 이어 난수 생성기 앱을 만들지만 이번에는 기능을 추가하는 방법을 살펴 보겠습니다.
(Flutter) 예쁜 숫자를 위한 난수 생성기 앱 만들기 (1)
'추천 관련글,
(Flutter) 난수 생성기 앱 만들기 (1) / Flutter 앱 프로젝트
목차 난수 생성기 앱 만들기 이번에는 난수 생성기를 만들어 보겠습니다. 디자인 넘버가 예쁜 제너레이터를 만들기 위해서는 그 넘버에 디자인이 들어간 유저가 있어야 합니다.
parkjh7764.tistory.com
버튼을 클릭하면 난수 생성
변화하는 수치변수로 관리 분리
이전에 임의로 입력된 숫자는 이제 버튼을 클릭하면 임의로 변경되는 숫자이므로 상태로 별도로 관리됩니다.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: (
1234,
5678,
9012,
3456,
),
)
맨 위에 있는 randomNum은 무엇입니까? 변하기 쉬운난수에 해당하는 부분을 생성하여 삽입하고 향후 변수를 사용합니다.
class _HomeScreenState extends State<HomeScreen> {
List<int> randomNum = (
1234,
5678,
9012,
3456,
);
키를 누르면 난수 생성
- 임의로() 클래스를 사용하려면 ‘dart:math’ 가져오기가 필요합니다.
- .넥스트인트() : 난수의 최대값 지정 가능
난수를 인쇄해 보세요.
import 'dart:math';
onPressed: () {
final random = Random();
print(random.nextInt(100));
},
setState()로 생성할 때 randomNum을 재정의합니다.
- 5개의 for 루프를 거쳐 5행의 난수가 생성됩니다.
- nextInt(1000000)의 숫자 아래에 난수를 생성합니다.
- 배열 변수에 추가된 숫자는 위에서 선언한 randomNum에 기록됩니다.
onPressed: () {
final random = Random();
final List<int> newNum = ();
for (int i = 0; i < 5; i++) {
final number = random.nextInt(1000000);
newNum.add(number);
setState(() {
randomNum = newNum;
});
}
},
위의 randomNum 선언 부분
randomNum으로 숫자 분할 후 이미지 매칭 부분
중복 난수 제거
- 자동으로 중복 제거 문장()당신이 사용할 수있는
- 그러나 이전과 같이 for 문을 사용하면 중복 값이 발생할 때마다 제거되므로 숫자의 열 수가 줄어듭니다. 그것을 방지하기 위해 동안(newNum.Length != 5)5열이 아닌 경우 루프가 계속 실행되도록 설정합니다.
onPressed: () {
final random = Random();
final Set<int> newNum = {};
while(newNum.length != 5){
final number = random.nextInt(1000000);
newNum.add(number);
setState(() {
randomNum = newNum.toList();
});
}
},
전체 코드 – home_screen.dart 파일
// ignore_for_file: prefer_const_constructors
import 'dart:math';
import 'package:app_random_number_generaotr/constant/color.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
List<int> randomNum = ();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: primary_color,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 16,
),
child: Column(
children: (
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: (
Text(
' ⚡ NUMBER MAKER',
style: TextStyle(
color: white_color,
fontSize: 25,
),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.android_sharp,
color: green_color,
),
)
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: randomNum
.asMap()
.entries
.map(
(x) => Padding(
padding: EdgeInsets.only(bottom: x.key == 3 ? 0 : 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: x.value
.toString()
.split('')
.map((x) => Image.asset(
'asset/img/$x.png',
width: 40,
height: 60,
))
.toList(),
),
),
)
.toList(),
),
),
SizedBox(
width: double.infinity,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: red_color,
),
onPressed: () {
final random = Random();
final Set<int> newNum = {};
while (newNum.length != 5) {
final number = random.nextInt(1000000);
newNum.add(number);
setState(() {
randomNum = newNum.toList();
});
}
},
child: Text('랜덤숫자 생성'),
),
)
),
),
),
),
);
}
}
코드 최적화 – home_screen.dart 파일
// ignore_for_file: prefer_const_constructors
import 'dart:math';
import 'package:app_random_number_generaotr/constant/color.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
List<int> randomNum = ();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: primary_color,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 16,
),
child: Column(
children: (
_Hearder(),
_Body(randomNum: randomNum),
_Footer(onPressed: onRandomNumberGenerator),
),
),
),
),
);
}
void onRandomNumberGenerator() {
final random = Random();
final Set<int> newNum = {};
while (newNum.length != 5) {
final number = random.nextInt(1000000);
newNum.add(number);
setState(() {
randomNum = newNum.toList();
});
}
}
}
class _Hearder extends StatelessWidget {
const _Hearder({super.key});
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: (
Text(
' ⚡ NUMBER MAKER',
style: TextStyle(
color: white_color,
fontSize: 25,
),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.android_sharp,
color: green_color,
),
)
),
);
}
}
class _Body extends StatelessWidget {
final List<int> randomNum;
const _Body({required this.randomNum, Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: randomNum
.asMap()
.entries
.map(
(x) => Padding(
padding: EdgeInsets.only(bottom: x.key == 3 ? 0 : 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: x.value
.toString()
.split('')
.map((x) => Image.asset(
'asset/img/$x.png',
width: 40,
height: 60,
))
.toList(),
),
),
)
.toList(),
),
);
}
}
class _Footer extends StatelessWidget {
final VoidCallback onPressed;
const _Footer({
required this.onPressed,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: red_color,
),
onPressed: onPressed,
child: Text('랜덤숫자 생성'),
),
);
}
}