본문 바로가기

Flutter-플러터/클론코딩

플러터 계산기 코드 11.6

반응형

(15) Flutter Tutorial - Build a Calculator UI in 20 minutes | Part 1 - YouTube

 

 

클론코딩 성공 

 

배운것

 

1. 계산기에 들어갈 버튼을 "위젯" 으로 만들었다.

그러면 코드가 한결 심플해진다.  

 

2. calculate (btnText); 위 위젯 버튼이 눌러지면 실행되는 함수이다.

 

클릭된 버튼의 텍스트는 = btnText =""; = numberButton ('btnText' ,Colors.black, Colors.white,),

 

btnText= opreation = 연산자와 같도록 실행된다. 

 

그 다음  opreation이 각 String타입 +,-,x,/ 연산자에 맞게 그 결과가 도출되게 만들었다. 

 

 

아쉬운 것 

아무래도 코딩 학습용 계산기이다보니 

현재 출시되어 있는 계산기보다 불편한 점이 많다. 

 

 

 

 Widget numButton(String btnText, Color btnColor, Color txtColor) {
    return ElevatedButton(
      onPressed: () {
        calculate(btnText);
      },
      child: Text(
        btnText,
        style: TextStyle(
          fontSize: 25,
          color: txtColor,
        ),
      ),
      style: ElevatedButton.styleFrom(
        fixedSize: Size(
          70,
          70,
        ),
        shape: CircleBorder(),
        primary: btnColor,
      ),
    );
  }

 

 

 int firstnumber = 0;
  int secondnumber = 0;
  String reuslt = '';
  String text = '';
  String operation = "";

  void calculate(String btnText) {
    if (btnText == "C") {
      reuslt = "";
      text = "";
      firstnumber = 0;
      secondnumber = 0;
    } else
    if (btnText == "+" || btnText == "-" || btnText == "x" ||btnText == '/'
    ) {
      firstnumber = int.parse(text);
      reuslt = "";
      operation= btnText;
    } else if (operation =="+") {
      reuslt = (firstnumber+secondnumber).toString();
    } if (operation == "-") {
      reuslt = (firstnumber - secondnumber).toString();
    }if (operation == "x") {
      reuslt = (firstnumber*secondnumber).toString();
    } if (operation =="/") {
      reuslt= (firstnumber ~/ secondnumber).toString();
    } else {
      reuslt = int.parse(text+btnText).toString();
    } setState(() {
      text =reuslt;
    });


  }

 

 

 

import 'package:flutter/material.dart';
import 'package:test1/Calculator.dart';

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

class Myapp extends StatelessWidget {
  const Myapp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),

      home: const Calculator(),
    );
  }
}

 

import 'package:flutter/material.dart';

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

  @override
  State<Calculator> createState() => _CalculatorState();
}

class _CalculatorState extends State<Calculator> {
  Widget numButton(String btnText, Color btnColor, Color txtColor) {
    return ElevatedButton(
      onPressed: () {
        calculate(btnText);
      },
      child: Text(
        btnText,
        style: TextStyle(
          fontSize: 25,
          color: txtColor,
        ),
      ),
      style: ElevatedButton.styleFrom(
        fixedSize: Size(
          70,
          70,
        ),
        shape: CircleBorder(),
        primary: btnColor,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text('Calculaotr'),
        backgroundColor: Colors.black,
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 5),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Padding(padding: EdgeInsets.all(10.0)),
                SizedBox(
                  height: 10,
                ),
                Text(
                  text,
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 80,
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                numButton("C", Colors.grey, Colors.black),
                numButton("+-", Colors.grey, Colors.black),
                numButton(
                  "%",
                  Colors.grey,
                  Colors.black,
                ),
                numButton(
                  "/",
                  Colors.orange,
                  Colors.white,
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                numButton("7", Colors.grey, Colors.black),
                numButton("8", Colors.grey, Colors.black),
                numButton(
                  "9",
                  Colors.grey,
                  Colors.black,
                ),
                numButton(
                  "x",
                  Colors.orange,
                  Colors.white,
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                numButton("4", Colors.grey, Colors.black),
                numButton("5", Colors.grey, Colors.black),
                numButton(
                  "6",
                  Colors.grey,
                  Colors.black,
                ),
                numButton(
                  "-",
                  Colors.orange,
                  Colors.white,
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                numButton("1", Colors.grey, Colors.black),
                numButton("2", Colors.grey, Colors.black),
                numButton(
                  "3",
                  Colors.grey,
                  Colors.black,
                ),
                numButton(
                  "+",
                  Colors.orange,
                  Colors.white,
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () {},
                  child: Text(
                    '0',
                    style: TextStyle(
                      fontSize: 35,
                      color: Colors.white,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                    shape: StadiumBorder(),
                    primary: (Colors.grey[850])!,
                  ),
                ),
                numButton(
                  '.',
                  (Colors.grey[850])!,
                  Colors.white,
                ),
                numButton(
                  '=',
                  Colors.orange,
                  Colors.white,
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
          ],
        ),
      ),
    );
  }

  int firstnumber = 0;
  int secondnumber = 0;
  String reuslt = '';
  String text = '';
  String operation = "";

  void calculate(String btnText) {
    if (btnText == "C") {
      reuslt = "";
      text = "";
      firstnumber = 0;
      secondnumber = 0;
    } else
    if (btnText == "+" || btnText == "-" || btnText == "x" ||btnText == '/'
    ) {
      firstnumber = int.parse(text);
      reuslt = "";
      operation= btnText;
    } else if (operation =="+") {
      reuslt = (firstnumber+secondnumber).toString();
    } if (operation == "-") {
      reuslt = (firstnumber - secondnumber).toString();
    }if (operation == "x") {
      reuslt = (firstnumber*secondnumber).toString();
    } if (operation =="/") {
      reuslt= (firstnumber ~/ secondnumber).toString();
    } else {
      reuslt = int.parse(text+btnText).toString();
    } setState(() {
      text =reuslt;
    });


  }


}

728x90
반응형