Flutter chapter-03-08 그림 맞추기 완료

우리는 이제 List의 사용법을 익혔고, 이를 바탕으로 랜덤으로 이미지가 출력되는 것 까지 구현해야 된다.

이를 만들기 위해 Library를 사용할 것이며, 어떻게 사용하는지 익히도록 하자.

위 소스코드를 보면 impot 'dart:math'라는 문구를 볼 수 있을 것이다.

이는 math 클래스를 가져와 사용할 것이며 math 클래스 안의 함수들을 사용할 수 있게 해 준다.

해당하는 클래스 안에 어떤 동작들이 있는지를 보려면 해당하는 문서를 참조하면 된다.

https://api.dart.dev/stable/2.10.4/dart-math/Random-class.html

Random class - dart:math library - Dart API

 

1. 노출 순서

- 처음 노출될 때 변수 안의 값이 노출된다.

- 새로고침 버튼을 클릭 시 onPressed 함수가 호출되며 함수 안의 내용이 적용이 된다.

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

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

class LotteryTicket extends StatefulWidget {
  const LotteryTicket({Key? key}) : super(key: key);

  @override
  _LotteryTicketState createState() => _LotteryTicketState();
}

class _LotteryTicketState extends State<LotteryTicket> {
  List <String> logNames = ['apple-logo', 'facebook', 'google'];
  var firstIcon = 'apple-logo';
  var secondIcon = 'facebook';
  var thirdIcon = 'google';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Row(
            children: [
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image(
                        image: AssetImage('images/icons8-$firstIcon-200.png')),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          int randomNumber = Random().nextInt(3);
                          print('사용될 랜덤 숫자 : $randomNumber');
                          firstIcon = logNames[randomNumber];
                        });
                      },
                      child: const Text('새로고침'),
                    )
                  ],
                ),
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image(
                        image: AssetImage('images/icons8-$secondIcon-200.png')),
                    ElevatedButton(
                        onPressed: () {
                          setState(() {
                            secondIcon = logNames[Random().nextInt(3)];
                            print("secondIcon button");
                          });
                        },
                        child: const Text('새로고침'))
                  ],
                ),
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image(
                        image: AssetImage('images/icons8-$thirdIcon-200.png')),
                    ElevatedButton(
                        onPressed: () {
                          setState(() {
                            thirdIcon = logNames[Random().nextInt(3)];
                          });
                          print(thirdIcon);
                          print("thirdIcon button");
                        },
                        child: const Text('새로고침'))
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}