الرئيسية Flutter اله حاسبة بسيطة بـ Flutter

اله حاسبة بسيطة بـ Flutter

أبريل 21, 2022

 اله حاسبة بسيطة  بـ Flutter


في هذا الدرس سنقوم بعمل تطبيق بسيط ( اله حاسبة ) بتقنية فلاتر ولغة الدارت :


تحميل الكود على الـ Github




نقوم بانشاء مشروع فلاتر جديد  ( تعلم انشاء مشروع فلاتر من هنا ) 
في ملف main.dart نقوم بكتابة الكود 


import 'package:calcuter_app/screen/cal_secreen.dart';
import 'package:flutter/material.dart';

void main() {
runApp(CalculatorApp());
}

class CalculatorApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Calculator App',
theme: ThemeData(primarySwatch: Colors.blueGrey),

home: Scaffold(
appBar: AppBar(
title: Text('Flutter Calculator'),
),

backgroundColor: Colors.white60,

body: CalculatorScreen(),
),
); // MaterialApp
}
}



 ثم نقوم بأنشاء مجلد في مجلد lib في المشروع الذي تم انشاءة كما الصورة اعلاه نقوم بتسمية المجلد Screen هذا المجلد سوف يضم جميع الشاشات التي سنسخدمها في المشروع نقم بانشاء نقوم بانشاء ملف درات cal_screen.dart  نضع فيه الاكواد 


import 'package:flutter/material.dart';

import '../widget/button.dart';

class CalculatorScreen extends StatefulWidget {
@override
_CalculatorScrennsState createState() => _CalculatorScrennsState();
}

class _CalculatorScrennsState extends State<CalculatorScreen> {


late int _firstNumber ;
late int _scondeNumber;
String _textDisplay = '';
String _result = '0' ;
String? _operation;
late String _histroy = '';

void btnClick(String value){

if(value == "EC"){ // لحذف الجميع من الشاشة والعدد الاول والثاني والنتيجة
_textDisplay = '';
_result ='';
_operation = '';
_histroy = '';
_firstNumber = 0;
_scondeNumber = 0;
}else if(value == "C"){ // لحذف النتيجة من الشاشة
_textDisplay = '';
_result ='';
_operation = '';
_firstNumber = 0;
_scondeNumber = 0;
}else if(value == "+" || value == "/" || value == "-" || value == "X" || value == "%"){
_firstNumber = int.parse(_textDisplay); // تخزين الرقم الاول في المتغير
_result = '';
_operation = value;

}else if(value == '='){
_scondeNumber = int.parse(_textDisplay); // تخزين الرقم الثاني في المتغير
            // العلميات
if(_operation == '+'){
_result = (_firstNumber + _scondeNumber).toString();
_histroy = _firstNumber.toString() + _operation.toString() + _scondeNumber.toString();
}
if(_operation == '-'){
_result = (_firstNumber - _scondeNumber).toString();
_histroy = _firstNumber.toString() + _operation.toString() + _scondeNumber.toString();
}
if(_operation == 'X'){
_result = (_firstNumber * _scondeNumber).toString();
_histroy = _firstNumber.toString() + _operation.toString() + _scondeNumber.toString();
}
if(_operation == '/'){
_result = (_firstNumber / _scondeNumber).toString();
_histroy = _firstNumber.toString() + _operation.toString() + _scondeNumber.toString();
}
if(_operation == '%'){
_result = (_firstNumber % _scondeNumber).toString();
_histroy = _firstNumber.toString() + _operation.toString() + _scondeNumber.toString();
}
}else{
_result = int.parse(_textDisplay + value).toString();
}

setState(() {
_textDisplay = _result;
});

}
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(12),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.only(right: 12),
child: Text(_histroy,style: TextStyle(fontSize: 24,color: Colors.black26,),),
),
alignment: Alignment(1.0, 1.0),
),

SizedBox(height: 10),

Container(
child: Padding(
padding: const EdgeInsets.only(right: 12),
child: Text(_textDisplay,style: TextStyle(fontSize: 35,color: Color(0xFF545F61),),),
),
alignment: Alignment(1.0, 1.0),
),

SizedBox(height: 15),

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CalulButtons(
text: '%',
fillColor: Colors.grey,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: 'EC',
fillColor: Colors.grey,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: 'C',
fillColor: Colors.grey,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '/',
fillColor: Colors.grey,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
],
),

SizedBox(height: 10,),

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CalulButtons(
text: '7',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '8',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '9',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: 'X',
fillColor: Colors.grey,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
],
),

SizedBox(height: 10,),

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CalulButtons(
text: '4',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '5',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '6',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '-',
fillColor: Colors.grey,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
],
),

SizedBox(height: 10,),

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CalulButtons(
text: '1',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '2',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '3',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '+',
fillColor: Colors.grey,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
],
),

SizedBox(height: 10,),

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CalulButtons(
text: '0',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '00',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '.',
fillColor: Colors.black12,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
CalulButtons(
text: '=',
fillColor: Colors.grey,
textColor: Colors.black,
textSize: 12.0,
onpress: btnClick,
),
],
)

]
),
);
}
}


كما نلاحظ هنا قمنا بأنشاء widget CalulButtons
وهي الوديجت الخاصة بازار الارقام والعمليات ( الضرب والجمع والطرح والقسمة )

نقوم بأنشاء مجلد في مجلد lib ونسمية widget جميع الـ widget الذي سوف يتم انشاء في المشروع , هنا انشى ملف  CalulButtons.dart وقمنا بأستدعائه اكثر من مره مع تغير القيم 



import 'package:flutter/material.dart';

class CalulButtons extends StatelessWidget {

final String text;
final Color fillColor;
final Color textColor;
double textSize;
final Function onpress;

CalulButtons({
required this.text ,
required this.fillColor ,
required this.textSize ,
required this.textColor ,
required this.onpress});

@override
Widget build(BuildContext context) {
return Container(
child: SizedBox(
width: 70,
height: 70,
child: InkWell(
onTap: () => onpress(text),
borderRadius: BorderRadius.circular(15),
child: Container(
alignment: Alignment.center,
child: Text(text,style: TextStyle(fontSize: 24 , color: textColor),),
color: fillColor,
),
),
),
);
}
}


وهكذا ينتهي الكود لعمل اله حاسبة بسيطة







تصنيف :

ليست هناك تعليقات:

الاشتراك في: تعليقات الرسالة ( Atom )
يتم التشغيل بواسطة Blogger.