[Flutter] Random - 랜덤으로 숫자 받기

이번 포스트에서는 진행하고 있는 프로젝트에서 사용했던 컴포넌트에 대해 설명해 보겠습니다.

이번 포스트에서는 빈 화면에 버튼을 누르면 숫자를 랜덤으로 받아 볼 수 있는 작업을 진행해 보겠습니다.

간단하게 설명해 보자면, 버튼을 누르면 로또 번호가 뽑히 듯이 숫자가 하나씩 노출되는 것입니다.

이제 코드로 구현해 보겠습니다.

 

# UI 

먼저 "숫자를 생성하세요잉!" 이라는 텍스트 밑에 랜덤 숫자 생성이라는 동그란 버튼을 누르게 되면,

텍스트가 생성된 숫자: XX 이렇게 바뀌도록 UI 를 구성해 보았습니다.

 

# 코드

저는 숫자는 0 부터 100 사이에 랜덤한 정수로 조건을 지정하였습니다.

class RandomNumberScreen extends StatefulWidget {
  @override
  _RandomNumberScreenState createState() => _RandomNumberScreenState();
}

class _RandomNumberScreenState extends State<RandomNumberScreen> {
  int? randomNumber;

먼저, RandomnumverScreen 을 StatefulWidget 으로 상속 받도록 하였습니다.

여기서 StatefulWidget 이란 무엇일까요?

상태 정의가 있는 위젯으로 UI 가 동적으로 변경될 수 있으며 상태가 상호작용에 따라 업데이트 되는 위젯입니다.

 

그 후에

randomNumber라는 변수를 선언한 뒤 생성된 랜덤 숫자를 저장합니다.

int 에 ? 를 붙여 주면서 숫자가 없을 수도 있음을 나타냅니다.

 

 void generateRandomNumber() {
    setState(() {
      randomNumber = Random().nextInt(101); // 0부터 100 사이의 랜덤 정수
    });
  }

setState(() { ... }): 이 메서드는 Flutter에게 상태가 변경되었음을 알리고, UI를 다시 그려 줍니다.

nextInt(101) 메서드를 이용하여 0부터 100까지의 랜덤 정수를 생성합니다.

여기서 101은 최대값을 의미하며, 이 숫자는 포함되지 않습니다. 따라서 생성되는 숫자는 0부터 100까지의 정수입니다.

 

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('랜덤 숫자 생성기'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              randomNumber != null ? '생성된 숫자: $randomNumber' : '숫자를 생성하세요잉!',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: generateRandomNumber,
              child: Text('랜덤 숫자 생성'),
            ),
          ],
        ),
      ),
    );
  }

위 코드를 하나 하나 설명해 보겠습니다.

 

randomNumber != null ? '생성된 숫자: $randomNumber' : '숫자를 생성하세요잉!',

삼항 연산자를 이용하여,

randomNumber가 null이 아닐 경우 생성된 숫자를 표시하고, null일 경우 "숫자를 생성하세요잉!"라는 메시지를 표시하도록 코드를 구성해 주었습니다.

 

ElevatedButton(
              onPressed: generateRandomNumber,
              child: Text('랜덤 숫자 생성'),
            ),

그 후 랜덤 숫자 생성이라는 텍스트가 써 있는 ElevatedButton 을 생성해 주고,

위에 선언하였던 generateRandomNumber 즉, 0 부터 100 까지의 정수를 출력해 주는 함수를 불러와 주면 됩니다.

그런다면 버튼을 누를 때마다 새로운 랜덤한 숫자가 생성되겠죠?

 

# 전체 코드

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RandomNumberScreen(),
    );
  }
}

class RandomNumberScreen extends StatefulWidget {
  @override
  _RandomNumberScreenState createState() => _RandomNumberScreenState();
}

class _RandomNumberScreenState extends State<RandomNumberScreen> {
  int? randomNumber;

  void generateRandomNumber() {
    setState(() {
      randomNumber = Random().nextInt(101); // 0부터 100 사이의 랜덤 정수
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('랜덤 숫자 생성기'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              randomNumber != null ? '생성된 숫자: $randomNumber' : '숫자를 생성하세요잉!',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: generateRandomNumber,
              child: Text('랜덤 숫자 생성'),
            ),
          ],
        ),
      ),
    );
  }
}

이렇게 코드를 완성해 보았습니다.

---

시뮬레이터 상에서 랜덤한 숫자를 확인해 볼 수 있습니다! ^___^