[TAVE/Study] Do it! Flutter 4장 플러터 위젯 사용법②

210920 월

덧셈 계산기 앱 만들기

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static const String _title = 'Widget Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: WidgetApp(),
    );
  }
}

class WidgetApp extends StatefulWidget {
  @override
  _WidgetExampleState createState() => _WidgetExampleState();
}

class _WidgetExampleState extends State<WidgetApp>{
  String sum = '';
  TextEditingController value1 = TextEditingController();
  TextEditingController value2 = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget Example'),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(15),
                child: Text(
                '결과 : $sum',)
                style: TextStyle(fontSize: 20),
              ),
              Padding(
                padding: EdgeInsets.only(left:20, right:20),
                child: TextField(keyboardType: TextInputType.number, controller: value1),
              ),
              Padding(
                padding: EdgeInsets.only(left:20, right:20),
                child: TextField(keyboardType: TextInputType.number, controller: value2),
              ),
              Padding(
                padding: EdgeInsets.all(15),
                child: ElevatedButton(
                    child: Row(
                      children: <Widget>[
                        Icon(Icons.add),
                        Text('더하기')
                      ],
                    ),
                    style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.amber)),
                    onPressed: () {
                      setState(() {
                        int result = int.parse(value1.value.text) + int.parse(value2.value.text);
                        sum = '$result';
                      });
                    }
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

👉🏻 onPressed: 버튼이 눌리면 발생하는 이벤트

👉🏻 Padding: 위젯 사이의 간격을 벌린다. EdgeInsets로 옵션을 지정한다. all, only가 있다.

👉🏻 TextEditingController: 텍스트필드를 다룬다.

👉🏻 keyboardType: 사용자에게 보일 키보드를 지정한다. ex) 덧셈이니까 숫자 키워드 나타남

👉🏻 setState: 위젯의 상태를 갱신한다. State 클래스를 상속받은 클래스에서만 호출할 수 있다.

 

 

뺄셈, 곱셈, 나눗셈 기능 추가하기

 

class _WidgetExampleState extends State<WidgetApp>{
  List _buttonList = ['더하기', '빼기', '곱하기', '나누기'];
  List<DropdownMenuItem<String>> _dropDownMenuItems = new List.empty(growable: true);
  String? _button Text;

  String sum = '';
  TextEditingController value1 = TextEditingController();
  TextEditingController value2 = TextEditingController();

  @override
  void initState() {
    super.initState();
    for(var item in _buttonList) {
      _dropDownMenuItems.add(DropdownMenuItem(value: item, child: Text(item)));
    }
    _buttonText = DropdownMenuItems[0].value;
  }

👉🏻 상태를 초기화하는 initState 함수를 이용한다.

✍🏻 _dropDownMenuItems를 비워두었다가 list에 있는 요소를 for문을 이용해 넣어준다.

              Padding(
                padding: EdgeInsets.all(15),
                child: ElevatedButton(
                    child: Row(
                      children: <Widget>[Icon(Icons.add), Text(_buttonText)],
                    ),
                    style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.amber)),
                    onPressed: () {
                      setState(() {
                        var value1Int = double.parse(value1.value.text);
                        var value2Int = double.parse(value2.value.text);
                        var result;
                        if (_buttonText == '더하기') {
                          result = value1Int + value2Int;
                        } else if (_buttonText == '빼기') {
                          result = value1Int - value2Int;
                        } else if (_buttonText == '곱하기') {
                          result = value1Int * value2Int;
                        } else {
                          result = value1Int / value2Int;
                        }
                        sum = '$result';
                      });
                    }
                ),
              ),
              Padding(
                padding: EdgeInsets.all(15),
                child: DropdownButton(items: _dropDownMenuItems, onChanged: (String? value){
                  setState(() {
                    _buttonText = value;
                  });
                }, value: _buttonText,),
              )

👉🏻 DropdownButton(펼침 버튼): items는 표시할 아이템 목록, onChanged는 아이템이 바뀔 때 처리할 이벤트이다. items에는 위의 List를 넣어준다. onChanged에는 사용자가 선택한 _buttonText값이 나오게 한다.

👉🏻 setState 함수에 사칙연산 과정을 넣어준다.