[flutter] 스택드 위젯을 사용하여 전기 요금 계산기 앱 화면 구성하기

15 Dec 2023

flutter

전기 요금 계산기 앱은 사용자가 전기 사용량을 입력하고, 사용량에 따른 요금을 계산할 수 있는 앱입니다. 이번에는 Flutter를 사용하여 전기 요금 계산기 앱의 화면을 구성하는 방법에 대해 알아보겠습니다.

스택드 위젯과 컬럼 위젯을 활용한 화면 구성

먼저, 전기 요금 계산기 앱의 화면을 구성하기 위해 스택드(stacked) 위젯과 컬럼(column) 위젯을 사용할 것입니다. 스택드 위젯은 위젯들을 겹쳐서 쌓을 수 있게 해주며, 컬럼 위젯은 위젯들을 세로로 정렬할 수 있게 해줍니다.

Stack(
  children: <Widget>[
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        // 화면 상단에 전기 사용량 입력 필드 추가
        TextField(
          decoration: InputDecoration(
            labelText: '전기 사용량 (kWh)',
          ),
        ),
        // 화면 하단에 계산 버튼 추가
        RaisedButton(
          child: Text('계산'),
          onPressed: _calculateBill,
        ),
      ],
    ),
    // 결과 표시를 위한 컨테이너 추가
    Container(
      alignment: Alignment.bottomCenter,
      child: Text('총 요금: ' + _totalBill.toString()),
    ),
  ],
);

사용자 입력과 요금 계산

다음으로, 사용자가 전기 사용량을 입력하고 계산 버튼을 누를 때 요금을 계산하는 기능을 구현할 것입니다.

double _electricityUsage = 0;
double _totalBill = 0;

void _calculateBill() {
  // 입력된 전기 사용량 가져오기
  double usage = double.parse(_electricityUsageController.text);

  // 전기 사용량에 따른 요금 계산
  if (usage <= 100) {
    _totalBill = usage * 0.1;
  } else {
    _totalBill = (100 * 0.1) + ((usage - 100) * 0.15);
  }

  // 화면 갱신 요청
  setState(() {});
}

위의 코드에서는 사용자가 입력한 전기 사용량에 따라 요금을 계산하는 _calculateBill 메서드를 만들었습니다. 그리고 결과를 화면에 보여주기 위해 _totalBill 값을 사용하여 화면을 다시 그리도록 했습니다.

결론

이렇게하면 Flutter를 사용하여 전기 요금 계산기 앱의 화면을 구성하고, 사용자 입력에 따른 요금 계산까지 할 수 있게 됩니다. 스택드와 컬럼을 활용하여 화면을 구성하고, 사용자 입력을 처리하여 요금을 계산하는 방법에 대해 알아보았습니다.