덧셈 계산기 만들기(TextField, TextEditingController, 키보드 유형, DropdownButton,

플러터가 제공하는 키보드 유형

키보드 유형	설명
text	기본 텍스트
mutiline	멀티라인 텍스트, 메모 같이 여러줄을 입력할 때 사용
number	숫자 키보드 표시
phone	전화번호 전용
datetime	날짜 입력
emailAddress	@표시 등 이메일 입력
url	주소입력창

 

 

---

덧셈 계산기 만들기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  static const String _title = 'Widget Example!!';

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

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

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

class _WidgetsAppState extends State<WidgetsApp> {

  String sum ='';

  // TextField를 다루기 위해 사용
  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('flutter!!'),
              ),

              Padding(
                padding: EdgeInsets.all(15),
                child: Text(
                  '결과 : $sum',
                  style: TextStyle(fontSize: 20),
                ),
              ),

              Padding(
                padding: EdgeInsets.only(left:20, right:20),
                //                                ↱숫자 입력용 키보드   ↱ 컨트롤러 연결(입력값을 value1에 넣음)
                child: TextField(keyboardType: TextInputType.number, controller: value1,), // 사용자로부터 입력받을 거임
              ),

              Padding(
                padding: EdgeInsets.only(left: 20, right: 20),
                child: TextField(keyboardType: TextInputType.number, controller: value2,),
              ),
              // ignore: deprecated_member_use
              Padding(
                padding: const EdgeInsets.all(15),
                // ignore: deprecated_member_use
                child: RaisedButton(
                  child: Row(
                    children: <Widget>[
                      Icon(Icons.add),
                      Text('더하기'),
                    ],
                  ),
                  color: Colors.amber,
                  onPressed: (){
                    setState(() {
                      int result = int.parse(value1.value.text) + int.parse(value2.value.text);
                      sum = '$result';
                    });
                }),
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

---

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

DropDown버튼 만들기

더하기, 빼기, 곱하기, 나눗셈 코드추가

 

전체코드⬇︎ 

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  static const String _title = 'Widget Example!!';

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

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

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

class _WidgetsAppState extends State<WidgetsApp> {

  String sum ='';

  List _buttonList = ['더하기', '빼기', '곱하기', '나누기'];
  List<DropdownMenuItem<String>> _dropDownMenuItems = [];
  String? _buttonText;

  // TextField를 다루기 위해 사용
  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;
  }


  @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('flutter!!'),
              ),

              Padding(
                padding: EdgeInsets.all(15),
                child: Text(
                  '결과 : $sum',
                  style: TextStyle(fontSize: 20),
                ),
              ),

              Padding(
                padding: EdgeInsets.only(left:20, right:20),
                //                                ↱숫자 입력용 키보드   ↱ 컨트롤러 연결(입력값을 value1에 넣음)
                child: TextField(keyboardType: TextInputType.number, controller: value1,), // 사용자로부터 입력받을 거임
              ),

              Padding(
                padding: EdgeInsets.only(left: 20, right: 20),
                child: TextField(keyboardType: TextInputType.number, controller: value2,),
              ),
              // ignore: deprecated_member_use
              Padding(
                padding: const EdgeInsets.all(15),
                // ignore: deprecated_member_use
                child: RaisedButton(
                  child: Row(
                    children: <Widget>[
                      Icon(Icons.add),
                      Text(_buttonText!),
                    ],
                  ),
                  color: 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: (value){
                    setState(() {
                      _buttonText = value as String?;
                    });
                  },
                  // 드랍다운 버튼에서 첫메뉴 or 선택된 메뉴를 보여줌
                  value: _buttonText,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}