반응형
(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;
});
}
}
ㄱ
반응형
'Flutter-플러터 > 클론코딩' 카테고리의 다른 글
[클론코딩]레시피 계산기 -1 편 Json (0) | 2022.11.14 |
---|---|
플러터 계산기 클론코딩 11.7 staggered grid view package (0) | 2022.11.08 |
flutter 계산기 코드 읽기!! (0) | 2022.11.01 |
flutter bmi 계산기 남의 코드 읽기 (0) | 2022.10.27 |
todo 코드 읽기 연습 (0) | 2022.10.23 |