تصميم تطبيق BMI Calcoluter في Flutter مع الكود
يعد تطبيق BMI Calcoluter واحد من التطبيقات المهمه جدا لدى المبتدئين في تعلم لغة الdart وخصوصا تقنية فلاتر وهذا التطبيق مفيد جدا فسوف تتعلم فيه StatefulWidget و setState وايضا slider وتتعلم تحريك كل عنصر واخذ القيمة المناسبة له عند التحريك وكل هذا سوف تتعلمه في هذة المقالة وفي هذا التطبيق تحديدا وسوف نقوم لك شرح في الاشياء التي قد لم يسبق لك التعامل معها مثل التي ذكرناها بالاعلى لكي تتمكن عزيز القارئ من إنشاء تطبيقك .
لغة الدرات هي لغة oop من اللغات عالية المستوى والتي تسهل على المطور التعامل مع عدة classes من اجل تنظيم العمل وهي لغة قريبة من java و python بشكل كبير اي انها قريبة من جافا وبايثون فإذا كنت قد تعاملت مع اي لغة منهم سابقا سيكون الامر بسيط بالنسبة لك بشكل كبير وايضا سنحاول من خلال المقالات شرح الاكواد المقدمه لكي تسهل عليكم الفهم واسترجاع المعلومه .
نقدم في موقعنا المتواضيع مجموعة كبيره من الاكواد البرمجية المختلفه ولا يقتصر الموقع فقط على الاكواد البسيطه فيوجد لدينا كورسات قوية في اللغات وتطوير التطبيقات وكل هذا بالمجان ، وبدعمكم للموقع سنحاول توفير في الايام المقبله شروحات مصوره من اجل فهم الاكواد بشكل افضل ولدينا عدد من الدروس في موقعنا بالفيديو .
ماهي StatefulWidget وما الفريق بينها وبين StatelessWidget
في اغلب التطبيقات سوف نلاحظ ان استخدام StatelessWidget اكثر بكثير من StatefulWidget وذلك لان StatefulWidget تعمل على التعامل مع العناصر الموجوده في نفس الصفحة والتحكم بها على سبيل المثال الانتقال من صفحة الى اخرى او اعطاء قيمة للعناصر دون الحاجه الى عمل صفحة اخرى مثل cubit لكي تتعامل مع العنصر اماا StatelessWidget فلا داعي للتعامل مع العناصر الموجوده بالصفحة .
هي وظيفة setState في flutter ؟
بكل بساطة هذا يعمل فقط في حالة اذا كان تصميمك StatefulWidget ويعني تغيير الحالة بمعنى لو كنت تريد تغيير قيمة العمر يمكنك استخدام StatefulWidget وعمل setState وارسال القيمة الجديده بداخلها لكي تتغير معك القيمة او تريد عمل انتقال لصفحة ايضا تستخدمها بإختصار هي المسؤوله عن تغيير حالة التطبيق او الصفحة .
ماهو شريط slider واهميته في فلاتر ؟
ببساطة هذا الشريط يظهر مثل شريط الصوت في هاتفك او مقياس بشكل عام , اذا كنت تريد عمل تطبيق يحتوي على الشريط ويتميز به يمكنك استخدام الامر slider لانشاء وايضا سوف تحتاج الى عمل setState لكي ترسل القيمة الجديده له لتظهر معك على الشاشة .
BMI -> Screen 1
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'BMI_2.dart';
class BMI_1 extends StatefulWidget {
@override
_BMI_1State createState() => _BMI_1State();
}
class _BMI_1State extends State<BMI_1> {
double height = 120;
int age = 5;
int weight = 30;
bool isMale = true;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black87,
leading: Icon(Icons.menu_rounded),
title: Text('BMI'),
),
body: Container(
color: Colors.black87,
child: Column(
children: [
Expanded(child: Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
// لكي اتمكن من الضغط على Container استخدم العباره GestureDetector
child: GestureDetector(
onTap: () {
setState(() {
isMale = true;
});
},
child: Container(
decoration: BoxDecoration(borderRadius: BorderRadiusDirectional.circular(10) , color: Colors.black54),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.male_rounded, size:60, color: isMale ? Colors.blue : Colors.white,),
Text("Male" , style: TextStyle(fontWeight: FontWeight.bold , fontSize: 22 , color: isMale ? Colors.blue : Colors.white),),
],
),
),
),
),
SizedBox(width: 10,),
Expanded(
child: GestureDetector(
onTap: (){
setState(() {
isMale = false;
});
},
child: Container(
decoration: BoxDecoration(borderRadius: BorderRadiusDirectional.circular(10) , color: Colors.black54),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.female_rounded, size:60 , color: isMale ? Colors.white : Colors.blue, ),
Text("Female" , style: TextStyle(fontWeight: FontWeight.bold , fontSize: 22 , color: isMale ? Colors.white : Colors.blue)),
],
),
),
),
),
],),
)
],
),
)),
Expanded(child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Container(
decoration: BoxDecoration(borderRadius: BorderRadiusDirectional.circular(15) , color: Colors.black54),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("HEIGHT" , style: TextStyle(fontSize: 22 , fontWeight: FontWeight.bold , color: Colors.white),),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text("${height.round()}" , style: TextStyle(fontSize: 28 , fontWeight: FontWeight.bold , color: Colors.white),),
Text("cm" , style: TextStyle(fontSize: 20 , fontWeight: FontWeight.bold , color: Colors.white),),
],),
Slider(value: height,
max: 220,
min: 50,
onChanged: (value){
setState(() {
height = value;
});
}),
],
),
),
)),
Expanded(child: Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(borderRadius: BorderRadiusDirectional.circular(10) , color: Colors.black54),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('WEIGHT' , style: TextStyle(fontSize: 22 , color: Colors.white24),),
Text('$weight' , style: TextStyle(fontSize: 28 , color: Colors.white , fontWeight: FontWeight.bold),),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(onPressed: (){
setState(() {
weight++;
});
} ,
// عليك بتمييز كل floating باستخدام tag مختلف لعدم حدوث مشاكل
heroTag: "weight++",
mini: true , child: Icon(Icons.add),),
FloatingActionButton(onPressed: (){
setState(() {
weight--;
});
} ,
// عليك بتمييز كل floating باستخدام tag مختلف لعدم حدوث مشاكل
heroTag: "weight--",
mini: true , child:Icon(Icons.remove),),
],
),
],
),
),
),
SizedBox(width: 10,),
Expanded(
child: Container(
decoration: BoxDecoration(borderRadius: BorderRadiusDirectional.circular(10) , color: Colors.black54),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('AGE' , style: TextStyle(fontSize: 22 , color: Colors.white24),),
Text('$age' , style: TextStyle(fontSize: 28 , color: Colors.white , fontWeight: FontWeight.bold),),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(onPressed: (){
setState(() {
age++;
});
} ,
heroTag: "age++",
mini: true , child: Icon(Icons.add),),
FloatingActionButton(onPressed: (){
setState(() {
age--;
});
} ,
heroTag: "age--",
mini: true ,
child:Icon(Icons.remove),),
],
),
],
),
),
),
],
),
)),
Container(
width: double.infinity,
height: 50,
child: MaterialButton(onPressed: (){
// العملية الحسابية
var result = weight / pow(height / 100 , 2);
// الانتقال من اسكرين للاخرى
// ونقوم بعمل import للنوع الـ dart
Navigator.push(context, MaterialPageRoute(builder: (context) => BMI_2(
age: age,
isMale: isMale,
result: result.round(),
),
),
);
},
shape: RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.only(topStart: Radius.circular(12) , topEnd: Radius.circular(12))),
child: Text('Calcolate' , style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold),), color: Colors.blue[900],)),
],
),
),
);
}
}
كيفية الانتقال من صفحة الى اخرى في flutter ؟
لكي تنتقل من صفحة الى اخرى يمكنك استخدام الامر Navigator.push وبعدها ارسل له الcontext و MaterialPageRoute وبداخلها المحتويات التي تريد ارسالها وعمل العمليات الحسابية لها وهنا قمنا بإرسال العمر وال gender و النتيجة .
BMI -> Screen 2
class BMI_2 extends StatelessWidget {
final int result;
final bool isMale;
final int age;
BMI_2({
required this.result,
required this.isMale,
required this.age,
});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black45,
appBar: AppBar(
backgroundColor: Colors.black87,
leading: IconButton(onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_ios)),
title: Text("BMI"),
),
body: Center(
child: Container(
height: 180,
width: 180,
decoration: BoxDecoration(borderRadius: BorderRadiusDirectional.circular(15) , color: Colors.black87,),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('gender : ${isMale ? 'Male' : 'Female'} ' ,style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold , fontSize: 18),),
Text('Result : $result', style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold , fontSize: 18),),
Text('Age : $age' , style: TextStyle(color: Colors.white , fontWeight: FontWeight.bold , fontSize: 18),),
],
),
),
),
);
}
}
