[flutter] 스택드 위젯을 사용하여 로또 번호 생성기 앱 구성하기

15 Dec 2023

flutter

Flutter는 Google에서 개발한 모바일 앱 개발 프레임워크로, 다양한 위젯을 이용하여 멋진 사용자 인터페이스를 구축할 수 있습니다. 이번에는 스택드(Stacked) 위젯을 사용하여 간단한 로또 번호 생성기 앱을 만들어보겠습니다.

스택드(Stacked) 위젯 소개

스택(Stack)은 위젯을 말 그대로 ‘쌓는’ 역할을 합니다. 스택드(Stacked) 위젯은 이러한 스택(Stack) 위젯을 수직으로 배치할 때 유용하게 사용할 수 있는 위젯으로, 다양한 위젯을 겹쳐서 표시할 수 있습니다.

로또 번호 생성기 앱 구성하기

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

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

class LottoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('로또 번호 생성기'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '이번주 당첨 번호',
                style: TextStyle(fontSize: 20),
              ),
              SizedBox(height: 20),
              LottoNumbers(),
            ],
          ),
        ),
      ),
    );
  }
}

class LottoNumbers extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<int> numbers = [];
    var random = Random();
    for (var i = 0; i < 6; i++) {
      numbers.add(random.nextInt(45) + 1);
    }
    return Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: numbers
            .map((number) => Text(
                  number.toString(),
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ))
            .toList(),
      ),
    );
  }
}

위의 예제 코드는 스택드(Stacked) 위젯을 사용하여 구현한 간단한 “로또 번호 생성기” 앱의 예시입니다.

마치며

스택드(Stacked) 위젯을 사용하면 여러 위젯을 겹쳐서 화면에 표시할 수 있어 다채로운 사용자 경험을 제공할 수 있습니다. 이를 응용하여 흥미로운 앱을 개발해보시기 바랍니다.

참고: Flutter 공식문서