[flutter] RaisedButton을 사용해 점수 계산하기

07 Dec 2023

flutter

Flutter는 모바일 애플리케이션을 개발하기 위한 UI 프레임워크입니다. RaisedButon은 클릭하면 특정 동작을 수행하는 버튼을 생성할 수 있는 위젯입니다. 이번에는 RaisedButton을 사용하여 점수 계산기를 만들어 보겠습니다.

점수 계산기 앱 구성하기

점수 계산기 앱은 세 개의 버튼과 점수를 표시하는 텍스트 위젯으로 구성됩니다. 버튼은 각각 점수에 1, 5, 10을 더하는 기능을 가지고 있습니다.

Imported 패키지 확인하기

점수 계산기를 작성하기 전에 material.dart 패키지를 import 해야 합니다. 다음과 같이 import 문을 작성하세요.
```
import 'package:flutter/material.dart';
```

앱 위젯 작성하기

Flutter에서는 기본적으로 앱 위젯을 작성하여 앱을 구성합니다. MaterialApp 위젯을 사용하여 앱에 필요한 기본 설정을 지정할 수 있습니다. 다음과 같이 앱 위젯을 작성하세요.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '점수 계산기',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '점수 계산기'),
    );
  }
}

홈 페이지 위젯 작성하기

홈 페이지 위젯은 StatefulWidget을 사용하여 점수를 관리하고 버튼 동작을 처리합니다. 먼저, MyHomePage 위젯을 생성하세요.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

상태 관리 위젯 작성하기

상태 관리를 위해서는 State 클래스를 생성해야 합니다. State 클래스의 인스턴스는 StatefulWidget에 의해 만들어지고 유지됩니다. 다음과 같이 상태 관리 위젯을 작성하세요.
```
class _MyHomePageState extends State<MyHomePage> {
  int _score = 0;

  void _incrementScore(int value) {
    setState(() {
      _score += value;
    });
  }
}
```

홈 페이지 위젯 완성하기

홈 페이지 위젯은 다음과 같이 RaisedButton과 점수를 표시하는 Text 위젯을 사용하여 완성할 수 있습니다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '점수:',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              '$_score',
              style: TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
              ),
            ),
            RaisedButton(
              child: Text('+1'),
              onPressed: () => _incrementScore(1),
            ),
            RaisedButton(
              child: Text('+5'),
              onPressed: () => _incrementScore(5),
            ),
            RaisedButton(
              child: Text('+10'),
              onPressed: () => _incrementScore(10),
            ),
          ],
        ),
      ),
    );
  }

점수 계산기 앱은 이제 완성되었습니다! 각 버튼을 클릭하면 해당하는 점수가 텍스트 위젯에 반영됩니다. 이를 통해 RaisedButon 위젯을 사용하여 간단한 점수 계산기를 만들 수 있다는 것을 확인했습니다.

이 문서는 Flutter의 RaisedButon을 사용하여 점수 계산기를 구현하는 방법을 설명했습니다. 자세한 내용은 Flutter 공식 문서를 참조하세요.