‫د‪ /‬إﯾﺎد اﻟﻤﺨﻼﻓﻲ‬

‫‪ .1‬ﻣﻘﺪﻣﺔ‬
‫ﺳﻨﺘﻌﻠﻢ ﻓﻲ ھﺬه اﻟﻤﺎدة اﻟﺘﻌﻠﯿﻤﯿﺔ اﻟﻤﻔﺎھﯿﻢ اﻷﺳﺎﺳﯿﺔ واﻟﻤﺘﻘﺪﻣﺔ ﻹطﺎر ﻋﻤﻞ ‪ .Flutter‬ﺗﻢ اﻹﻋﻼن ﻋﻦ اﻹﺻﺪار اﻷول ﻣﻦ ‪ Flutter‬ﻓﻲ ﻋﺎم ‪ 2015‬ﻓﻲ ﻗﻤﺔ‬
‫‪ .Dart Developer Summit‬ﻛﺎن ﯾُﻌﺮف ﻓﻲ اﻟﺒﺪاﯾﺔ ﺑﺎﺳﻢ ‪ codename Sky‬وﯾﻤﻜﻦ ﺗﺸﻐﯿﻠﮫ ﻋﻠﻰ ﻧﻈﺎم اﻟﺘﺸﻐﯿﻞ ‪ .Android OS‬ﻓﻲ دﯾﺴﻤﺒﺮ‬
‫‪ ،2018‬ﺗﻢ إﺻﺪار أول ﻧﺴﺨﺔ ﻣﺴﺘﻘﺮة ﻣﻦ إطﺎر ﻋﻤﻞ ‪ ،Flutter‬ﻋﺮﻓﺖ ب ‪.Flutter 1.0‬‬

‫ﻣﺎ ھﻮ ‪Flutter‬؟‬
‫ھﻨﺎك اﻟﻌﺪﯾﺪ ﻣﻦ اﻷطﺮ )‪ (Frameworks‬اﻟﻤﺘﺎﺣﺔ‪ ،‬واﻟﺘﻲ ﺗﻮﻓﺮ ﻣﯿﺰات ﻣﻤﺘﺎزة ﻟﺘﻄﻮﯾﺮ ﺗﻄﺒﯿﻘﺎت اﻟﮭﺎﺗﻒ اﻟﻤﺤﻤﻮل‪ .‬ﯾﻮﻓﺮ ‪ Android‬إطﺎر ﻋﻤﻞ أﺻﻠﯿًﺎ‬
‫إطﺎرا ﯾﻌﺘﻤﺪ ﻋﻠﻰ ﻟﻐﺔ ‪ .Objective-C / Swift‬وﺑﺎﻟﺘﺎﻟﻲ‪ ،‬ﻧﺤﺘﺎج إﻟﻰ ﻟﻐﺘﯿﻦ وأطﺮ ﻋﻤﻞ ﻣﺨﺘﻠﻔﺔ‬
‫ً‬ ‫ﯾﻌﺘﻤﺪ ﻋﻠﻰ ﻟﻐﺔ ‪ Java‬و‪ ،Kotlin‬ﺑﯿﻨﻤﺎ ﯾﻮﻓﺮ ‪iOS‬‬
‫ﻟﺘﻄﻮﯾﺮ اﻟﺘﻄﺒﯿﻘﺎت ﻟﻜﻼ ﻧﻈﺎﻣﻲ اﻟﺘﺸﻐﯿﻞ‪ .‬ﻟﻘﺪ ﺗﻢ اﻟﺘﻐﻠﺐ ﻋﻠﻰ ھﺬا اﻟﺘﻌﻘﯿﺪ ﻋﺒﺮ ﺗﻘﺪﯾﻢ اﻟﻌﺪﯾﺪ ﻣﻦ اﻷطﺮ اﻟﺘﻲ ﺗﺪﻋﻢ ﻧﻈﺎﻣﻲ اﻟﺘﺸﻐﯿﻞ ﺟﻨﺒًﺎ إﻟﻰ ﺟﻨﺐ ﻣﻊ ﺗﻄﺒﯿﻘﺎت‬
‫ﺳﻄﺢ اﻟﻤﻜﺘﺐ‪ .‬ﺗُﻌﺮف ھﺬه اﻷﻧﻮاع ﻣﻦ اطﺮ اﻟﻌﻤﻞ ﺑﺄدوات اﻟﺘﻄﻮﯾﺮ ﻋﺒﺮ اﻷﻧﻈﻤﺔ اﻷﺳﺎﺳﯿﺔ )‪.(cross-platform‬‬

‫ﯾﺘﻤﺘﻊ إطﺎر اﻟﺘﻄﻮﯾﺮ ﻋﺒﺮ اﻷﻧﻈﻤﺔ اﻷﺳﺎﺳﯿﺔ )‪ (cross-platform development tools‬ﺑﺎﻟﻘﺪرة ﻋﻠﻰ ﻛﺘﺎﺑﺔ رﻣﺰ واﺣﺪ وﯾﻤﻜﻦ ﻧﺸﺮه ﻋﻠﻰ اﻷﻧﻈﻤﺔ‬
‫اﻷﺳﺎﺳﯿﺔ اﻟﻤﺨﺘﻠﻔﺔ )‪ Android‬و‪ iOS‬و‪ .(Desktop‬ﺣﯿﺚ ﯾﻮﻓﺮ اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﻮﻗﺖ واﻟﺠﮭﺪ ﻟﻠﻤﻄﻮرﯾﻦ‪ .‬ھﻨﺎك اﻟﻌﺪﯾﺪ ﻣﻦ اﻷدوات اﻟﻤﺘﺎﺣﺔ ﻟﻠﺘﻄﻮﯾﺮ ﻋﺒﺮ‬
‫اﻷﻧﻈﻤﺔ اﻷﺳﺎﺳﯿﺔ‪ ،‬ﺑﻤﺎ ﻓﻲ ذﻟﻚ اﻷدوات اﻟﻤﺴﺘﻨﺪة إﻟﻰ اﻟﻮﯾﺐ‪ ،‬ﻣﺜﻞ ‪ Ionic‬ﻣﻦ ‪ .Drifty Co‬ﻓﻲ ‪ Phonegap ،2013‬ﻣﻦ ‪ Xamarin ،Adobe‬ﻣﻦ‬
‫‪ ،Microsoft‬و‪ .Native form Facebook React‬ﻛﻞ ﻣﻦ ھﺬه اﻷطﺮ ﻟﮭﺎ درﺟﺎت ﻣﺘﻔﺎوﺗﺔ ﻣﻦ اﻟﻨﺠﺎح ﻓﻲ ﺻﻨﺎﻋﺔ اﻟﮭﺎﺗﻒ اﻟﻤﺤﻤﻮل‪ .‬ﻓﻲ اﻵوﻧﺔ‬
‫اﻷﺧﯿﺮة‪ ،‬ﺗﻢ ﺗﻘﺪﯾﻢ إطﺎر ﻋﻤﻞ ﺟﺪﯾﺪ ﻓﻲ ﻋﺎﺋﻠﺔ اﻟﺘﻄﻮﯾﺮ ﻋﺒﺮ اﻷﻧﻈﻤﺔ اﻷﺳﺎﺳﯿﺔ اﻟﻤﺴﻤﻰ ‪ Flutter‬اﻟﺬي ﺗﻢ ﺗﻄﻮﯾﺮه ﻣﻦ ‪.Google‬‬

‫‪ Flutter‬ﻋﺒﺎرة ﻋﻦ ﻣﺠﻤﻮﻋﺔ أدوات ﻟﻮاﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم ﻹﻧﺸﺎء ﺗﻄﺒﯿﻘﺎت ﺳﺮﯾﻌﺔ وﺟﻤﯿﻠﺔ وﻣﺠﻤﻌﺔ ﻣﺤﻠﯿًﺎ ﻟﻠﺠﻮال واﻟﻮﯾﺐ وﺳﻄﺢ اﻟﻤﻜﺘﺐ ﺑﻠﻐﺔ ﺑﺮﻣﺠﺔ‬
‫واﺣﺪة وﻗﺎﻋﺪة ﺷﻔﺮة واﺣﺪة‪ .‬اﻧﮫ ﻣﺼﺪر ﻣﺠﺎﻧﻲ وﻣﻔﺘﻮح‪ .‬ﺗﻢ ﺗﻄﻮﯾﺮه ﻓﻲ اﻟﺒﺪاﯾﺔ ﻣﻦ ‪ Google‬وﯾﺘﻢ إدارﺗﮫ اﻵن وﻓﻘًﺎ ﻟﻤﻌﯿﺎر ‪ .ECMA‬ﺗﺴﺘﺨﺪم ﺗﻄﺒﯿﻘﺎت‬
‫‪ Flutter‬ﻟﻐﺔ ﺑﺮﻣﺠﺔ ‪ Dart‬ﻹﻧﺸﺎء ﺗﻄﺒﯿﻖ‪ .‬ﺗﺸﺘﺮك ﺑﺮﻣﺠﺔ ‪ dart‬ﻓﻲ اﻟﻌﺪﯾﺪ ﻣﻦ اﻟﻤﯿﺰات ﻣﻊ ﻟﻐﺎت اﻟﺒﺮﻣﺠﺔ اﻷﺧﺮى‪ ،‬ﻣﺜﻞ ‪ Kotlin‬و‪ ،Swift‬وﯾﻤﻜﻦ‬
‫ﺗﺤﻮﯾﻠﮭﺎ إﻟﻰ ﻛﻮد ‪.JavaScript‬‬
‫ﻀﺎ اﺳﺘﺨﺪاﻣﮫ‬
‫ﺗﻢ ﺗﺤﺴﯿﻦ ‪ Flutter‬ﺑﺸﻜﻞ أﺳﺎﺳﻲ ﻟﺘﻄﺒﯿﻘﺎت اﻟﮭﺎﺗﻒ اﻟﻤﺤﻤﻮل ﺛﻨﺎﺋﯿﺔ اﻷﺑﻌﺎد اﻟﺘﻲ ﯾﻤﻜﻦ ﺗﺸﻐﯿﻠﮭﺎ ﻋﻠﻰ أﻧﻈﻤﺔ ‪ Android‬و‪ .iOS‬ﯾﻤﻜﻨﻨﺎ أﯾ ً‬
‫ﻹﻧﺸﺎء ﺗﻄﺒﯿﻘﺎت ﻛﺎﻣﻠﺔ اﻟﻤﯿﺰات‪ ،‬ﺑﻤﺎ ﻓﻲ ذﻟﻚ اﻟﻜﺎﻣﯿﺮا‪ ،‬واﻟﺘﺨﺰﯾﻦ‪ ،‬واﻟﻤﻮﻗﻊ اﻟﺠﻐﺮاﻓﻲ‪ ،‬واﻟﺸﺒﻜﺔ‪ ،‬وأدوات ﺗﻄﻮﯾﺮ اﻟﺒﺮاﻣﺞ )‪ (SDK‬اﻟﺘﺎﺑﻌﺔ ﻟﺠﮭﺎت‬
‫ﺧﺎرﺟﯿﺔ‪ ،‬واﻟﻤﺰﯾﺪ‪.‬‬

‫ﻣﺎ اﻟﺬي ﯾﺠﻌﻞ ‪ Flutter‬ﻓﺮﯾﺪًا؟‬

‫ﯾﺨﺘﻠﻒ ‪ Flutter‬ﻋﻦ أطﺮ اﻟﻌﻤﻞ اﻷﺧﺮى ﻷﻧﮫ ﻻ ﯾﺴﺘﺨﺪم ‪ WebView‬وﻻ أدوات ‪ (OEM widgets) OEM‬اﻟﺘﻲ ﯾﺘﻢ ﺗﺄﺗﻲ ﻣﻊ اﻟﺠﮭﺎز‪ .‬ﺑﺪﻻً ﻣﻦ‬
‫ذﻟﻚ‪ ،‬ﯾﺴﺘﺨﺪم ﻣﺤﺮك اﻟﻌﺮض ﻋﺎﻟﻲ اﻷداء اﻟﺨﺎص ﺑﮫ ﻟﺮﺳﻢ أدواﺗﮫ )‪ .(widgets‬ﻛﻤﺎ ﯾﻘﻮم ﺑﺘﻨﻔﯿﺬ ﻣﻌﻈﻢ أﻧﻈﻤﺘﮫ ﻣﺜﻞ )‪، gesture،animation‬‬
‫ً‬
‫ﻣﻤﺘﺎزا ﻟﻠﻤﻄﻮرﯾﻦ‬ ‫‪ (widgets‬ﻓﻲ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ‪ Dart‬اﻟﺘﻲ ﺗﺴﻤﺢ ﻟﻠﻤﻄﻮرﯾﻦ ﺑﻘﺮاءة اﻷﺷﯿﺎء أو ﺗﻐﯿﯿﺮھﺎ أو اﺳﺘﺒﺪاﻟﮭﺎ أو إزاﻟﺘﮭﺎ ﺑﺴﮭﻮﻟﺔ‪ .‬إﻧﮫ ﯾﻌﻄﻲ ﺗﺤﻜ ًﻤﺎ‬
‫ﻋﻠﻰ اﻟﻨﻈﺎم‪.‬‬
 ‫ﻣﯿﺰات ‪Flutter‬‬
‫ﯾﻮﻓﺮ ‪ Flutter‬طﺮﻗًﺎ ﺳﮭﻠﺔ وﺑﺴﯿﻄﺔ ﻟﺒﺪء إﻧﺸﺎء ﺗﻄﺒﯿﻘﺎت ﺟﻤﯿﻠﺔ ﻟﻸﺟﮭﺰة اﻟﻤﺤﻤﻮﻟﺔ وﺳﻄﺢ اﻟﻤﻜﺘﺐ ﺑﺎﺳﺘﺨﺪام ﻣﺠﻤﻮﻋﺔ ﻏﻨﯿﺔ ﻣﻦ ﺗﺼﻤﯿﻤﺎت اﻟﻤﻮاد‬
‫واﻷدوات‪ .‬ھﻨﺎ‪ ،‬ﺳﻨﻨﺎﻗﺶ ﻣﯿﺰاﺗﮫ اﻟﺮﺋﯿﺴﯿﺔ ﻟﺘﻄﻮﯾﺮ إطﺎر ﻋﻤﻞ اﻟﻤﺤﻤﻮل‪.‬‬

‫ﻣﻔﺘﻮح اﻟﻤﺼﺪر‪ Flutter :‬ھﻮ إطﺎر ﻋﻤﻞ ﻣﺠﺎﻧﻲ وﻣﻔﺘﻮح اﻟﻤﺼﺪر ﻟﺘﻄﻮﯾﺮ ﺗﻄﺒﯿﻘﺎت اﻟﮭﺎﺗﻒ اﻟﻤﺤﻤﻮل‪.‬‬ ‫‪‬‬
‫ﻋﺎﺑﺮ ﻟﻸﻧﻈﻤﺔ اﻷﺳﺎﺳﯿﺔ )‪ :(Cross-platform‬ﺗﺴﻤﺢ ھﺬه اﻟﻤﯿﺰة ﻟـ ‪ Flutter‬ﺑﻜﺘﺎﺑﺔ اﻟﺸﻔﺮة ﻣﺮة واﺣﺪة واﻟﺤﻔﺎظ ﻋﻠﯿﮭﺎ وﺗﺸﻐﯿﻠﮭﺎ ﻋﻠﻰ أﻧﻈﻤﺔ‬ ‫‪‬‬
‫أﺳﺎﺳﯿﺔ ﻣﺨﺘﻠﻔﺔ‪ .‬إﻧﮫ ﯾﻮﻓﺮ اﻟﻮﻗﺖ واﻟﺠﮭﺪ واﻟﻤﺎل ﻟﻠﻤﻄﻮرﯾﻦ‪.‬‬
‫ﺳﺮﯾﻊ اﻟﺘﻔﺎﻋﻞ )‪ :(Hot Reload‬ﻋﻨﺪﻣﺎ ﯾﻘﻮم اﻟﻤﻄﻮر ﺑﺈﺟﺮاء ﺗﻐﯿﯿﺮات ﻓﻲ اﻟﻜﻮد‪ ،‬ﯾﻤﻜﻦ رؤﯾﺔ ھﺬه اﻟﺘﻐﯿﯿﺮات ﻋﻠﻰ اﻟﻔﻮر ﺑﺎﺳﺘﺨﺪام ‪Hot‬‬ ‫‪‬‬
‫‪ .Reload‬ھﺬا ﯾﻌﻨﻲ اﻟﺘﻐﯿﯿﺮات اﻟﺘﻲ ﺗﻈﮭﺮ ﻋﻠﻰ اﻟﻔﻮر ﻓﻲ اﻟﺘﻄﺒﯿﻖ ﻧﻔﺴﮫ‪ .‬إﻧﮭﺎ ﻣﯿﺰة ﻣﻔﯿﺪة ﻟﻠﻐﺎﯾﺔ‪ ،‬ﺗﺘﯿﺢ ﻟﻠﻤﻄﻮر إﺻﻼح اﻷﺧﻄﺎء ﻋﻠﻰ اﻟﻔﻮر‪.‬‬
‫‪ :Accessible Native Features and SDKs‬ﺗﺘﯿﺢ ھﺬه اﻟﻤﯿﺰة ﻋﻤﻠﯿﺔ ﺗﻄﻮﯾﺮ اﻟﺘﻄﺒﯿﻖ ﺳﮭﻠﺔ وﻣﻤﺘﻌﺔ ﻣﻦ ﺧﻼل اﻟﻜﻮد اﻷﺻﻠﻲ ﻟـ‬ ‫‪‬‬
‫‪ ، Flutter‬وﺗﻜﺎﻣﻞ اﻟﺠﮭﺎت اﻟﺨﺎرﺟﯿﺔ ‪ ،‬وواﺟﮭﺎت ﺑﺮﻣﺠﺔ ﺗﻄﺒﯿﻘﺎت اﻟﻨﻈﺎم اﻷﺳﺎﺳﻲ‪ .‬وﺑﺎﻟﺘﺎﻟﻲ‪ ،‬ﯾﻤﻜﻨﻨﺎ اﻟﻮﺻﻮل ﺑﺴﮭﻮﻟﺔ إﻟﻰ ﺣﺰم ‪ SDK‬ﻋﻠﻰ‬
‫ﻛﻼ اﻟﻨﻈﺎﻣﯿﻦ اﻷﺳﺎﺳﯿﯿﻦ‪.‬‬
‫‪ :Minimal code‬ﺗﻢ ﺗﻄﻮﯾﺮ ﺗﻄﺒﯿﻖ ‪ Flutter‬ﺑﻮاﺳﻄﺔ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ‪ ، Dart‬واﻟﺘﻲ ﺗﺴﺘﺨﺪم ﺗﺠﻤﯿﻊ ‪ (Just in time) JIT‬و ‪Ahead ) AOT‬‬ ‫‪‬‬
‫‪ (of Time‬ﻟﺘﺤﺴﯿﻦ وﻗﺖ ﺑﺪء اﻟﺘﺸﻐﯿﻞ اﻟﻜﻠﻲ وﻋﻤﻠﮫ وﺗﺴﺮﯾﻊ اﻷداء‪ .‬ﯾﻌﻤﻞ ‪ JIT‬ﻋﻠﻰ ﺗﺤﺴﯿﻦ ﻧﻈﺎم اﻟﺘﻄﻮﯾﺮ وﺗﺤﺪﯾﺚ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم دون‬
‫ﺑﺬل ﺟﮭﺪ إﺿﺎﻓﻲ ﻓﻲ ﺑﻨﺎء واﺣﺪة ﺟﺪﯾﺪة‪.‬‬
‫‪ :Widgets‬ﯾﻮﻓﺮ إطﺎر ﻋﻤﻞ ‪ Flutter‬ﻋﻨﺎﺻﺮ واﺟﮭﺔ ﻣﺴﺘﺨﺪم )‪ (widgets‬ﻗﺎدرة ﻋﻠﻰ ﺗﻄﻮﯾﺮ ﺗﺼﻤﯿﻤﺎت ﻣﺤﺪدة ﻗﺎﺑﻠﺔ ﻟﻠﺘﺨﺼﯿﺺ‪ .‬اﻷھﻢ‬ ‫‪‬‬
‫ﻣﻦ ذﻟﻚ‪ ،‬ﯾﺤﺘﻮي ‪ Flutter‬ﻋﻠﻰ ﻣﺠﻤﻮﻋﺘﯿﻦ ﻣﻦ ‪ (Cupertino widgets- Material Design) widgets‬اﻟﺘﻲ ﺗﺴﺎﻋﺪ ﻋﻠﻰ ﺗﻮﻓﯿﺮ ﺗﺠﺮﺑﺔ‬
‫ﺧﺎﻟﯿﺔ ﻣﻦ اﻷﺧﻄﺎء ﻋﻠﻰ ﺟﻤﯿﻊ اﻷﻧﻈﻤﺔ اﻷﺳﺎﺳﯿﺔ‪.‬‬

‫ﻣﯿﺰات أﺧﺮى ل ‪Flutter‬‬

‫ﯾﻠﺒﻲ ‪ Flutter‬اﻻﺣﺘﯿﺎﺟﺎت واﻟﻤﺘﻄﻠﺒﺎت اﻟﻤﺨﺼﺼﺔ ﻟﺘﻄﻮﯾﺮ ﺗﻄﺒﯿﻘﺎت اﻟﮭﺎﺗﻒ اﻟﻤﺤﻤﻮل‪ .‬ﻛﻤﺎ أﻧﮫ ﯾﻮﻓﺮ اﻟﻌﺪﯾﺪ ﻣﻦ اﻟﻤﺰاﯾﺎ اﻟﻤﺪرﺟﺔ أدﻧﺎه‪.‬‬
‫ﯾﺠﻌﻞ ﻋﻤﻠﯿﺔ ﺗﻄﻮﯾﺮ اﻟﺘﻄﺒﯿﻖ ﺳﺮﯾﻌﺔ ﻟﻠﻐﺎﯾﺔ ﺑﺴﺒﺐ ﻣﯿﺰة إﻋﺎدة اﻟﺘﺤﻤﯿﻞ اﻟﺴﺮﯾﻊ‪ .‬ھﺬه اﻟﻤﯿﺰة ﺗﺴﻤﺢ ﻟﻨﺎ ﺑﺘﻐﯿﯿﺮ أو ﺗﺤﺪﯾﺚ اﻟﻜﻮد ﯾﻨﻌﻜﺲ ﺑﻤﺠﺮد‬ ‫‪‬‬
‫إﺟﺮاء اﻟﺘﻌﺪﯾﻼت‪.‬‬
‫إﻧﮫ ﯾﻮﻓﺮ ﺗﺠﺎرب ﺗﻤﺮﯾﺮ أﻛﺜﺮ ﺳﻼﺳﺔ وﺳﻠﺴﺔ ﻻﺳﺘﺨﺪام اﻟﺘﻄﺒﯿﻖ دون اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﺘﻮﻗﻒ أو اﻻﻧﻘﻄﺎﻋﺎت‪ ،‬ﻣﻤﺎ ﯾﺠﻌﻞ ﺗﺸﻐﯿﻞ اﻟﺘﻄﺒﯿﻘﺎت أﺳﺮع‬ ‫‪‬‬
‫ﻣﻘﺎرﻧﺔ ﺑﺄطﺮ ﺗﻄﻮﯾﺮ ﺗﻄﺒﯿﻘﺎت اﻷﺟﮭﺰة اﻟﻤﺤﻤﻮﻟﺔ اﻷﺧﺮى‪.‬‬
‫ﯾﻘﻠﻞ ‪ Flutter‬ﻣﻦ وﻗﺖ وﺟﮭﻮد اﻻﺧﺘﺒﺎر‪ .‬ﻛﻤﺎ ﻧﻌﻠﻢ‪ ،‬ﻓﺈن ﺗﻄﺒﯿﻘﺎت ‪ flutter‬ﺗﻌﻤﻞ ﻋﺒﺮ اﻷﻧﻈﻤﺔ اﻷﺳﺎﺳﯿﺔ ﺑﺤﯿﺚ ﻻ ﯾﺤﺘﺎج اﻟﻤﺨﺘﺒﺮﯾﻦ داﺋ ًﻤﺎ‬ ‫‪‬‬
‫إﻟﻰ ﺗﺸﻐﯿﻞ ﻧﻔﺲ ﻣﺠﻤﻮﻋﺔ اﻻﺧﺘﺒﺎرات ﻋﻠﻰ ﻣﻨﺼﺎت ﻣﺨﺘﻠﻔﺔ ﻟﻨﻔﺲ اﻟﺘﻄﺒﯿﻖ‪.‬‬
‫ﯾﺤﺘﻮي ﻋﻠﻰ واﺟﮭﺔ ﻣﺴﺘﺨﺪم ﻣﻤﺘﺎزة ﻷﻧﮫ ﯾﺴﺘﺨﺪم ﻋﻨﺼﺮ واﺟﮭﺔ ﻣﺴﺘﺨﺪم ﯾﺮﻛﺰ ﻋﻠﻰ اﻟﺘﺼﻤﯿﻢ‪ ،‬وأدوات ﺗﻄﻮﯾﺮ ﻋﺎﻟﯿﺔ‪ ،‬وواﺟﮭﺎت ﺑﺮﻣﺠﺔ‬ ‫‪‬‬
‫ﺗﻄﺒﯿﻘﺎت ﻣﺘﻘﺪﻣﺔ‪ ،‬واﻟﻌﺪﯾﺪ ﻣﻦ اﻟﻤﯿﺰات اﻷﺧﺮى‪.‬‬
‫إﻧﮫ ﻣﺸﺎﺑﮫ ﻟﻺطﺎر اﻟﺘﻔﺎﻋﻠﻲ ﺣﯿﺚ ﻻ ﯾﺤﺘﺎج اﻟﻤﻄﻮرون إﻟﻰ ﺗﺤﺪﯾﺚ ﻣﺤﺘﻮى واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم ﯾﺪوﯾًﺎ‪.‬‬ ‫‪‬‬
‫إﻧﮫ ﻣﻨﺎﺳﺐ ﻟﺘﻄﺒﯿﻘﺎت ‪ (Minimum Viable Product) MVP‬ﺑﺴﺒﺐ ﻋﻤﻠﯿﺔ اﻟﺘﻄﻮﯾﺮ اﻟﺴﺮﯾﻌﺔ وطﺒﯿﻌﺔ اﻷﻧﻈﻤﺔ اﻷﺳﺎﺳﯿﺔ اﻟﻤﺸﺘﺮﻛﺔ‪.‬‬ ‫‪‬‬

‫ﻋﯿﻮب ‪Flutter‬‬
‫ﻟﻘﺪ رأﯾﻨﺎ ﺳﺎﺑﻘًﺎ أن ‪ Flutter‬ﻟﮭﺎ اﻟﻌﺪﯾﺪ ﻣﻦ اﻟﻤﺰاﯾﺎ‪ ،‬وﻟﻜﻨﮭﺎ ﺗﺤﺘﻮي أﯾ ً‬
‫ﻀﺎ ﻋﻠﻰ ﺑﻌﺾ اﻟﻌﯿﻮب‪ ،‬واﻟﺘﻲ ﺗﺮد أدﻧﺎه‪.‬‬
‫‪ Flutter‬ھﻲ ﻟﻐﺔ ﺟﺪﯾﺪة ﻧﺴﺒﯿًﺎ ﺗﺤﺘﺎج إﻟﻰ دﻋﻢ ﺗﻜﺎﻣﻞ ﻣﺴﺘﻤﺮ ﻣﻦ ﺧﻼل ﺻﯿﺎﻧﺔ اﻟﺒﺮاﻣﺞ اﻟﻨﺼﯿﺔ‪.‬‬ ‫‪‬‬
‫ً‬
‫وﺻﻮﻻ ﻣﺤﺪودًا ﺟﺪًا إﻟﻰ ﻣﻜﺘﺒﺎت ‪ .SDK‬ھﺬا ﯾﻌﻨﻲ أن اﻟﻤﻄﻮر ﻟﯿﺲ ﻟﺪﯾﮫ اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﻮظﺎﺋﻒ ﻹﻧﺸﺎء ﺗﻄﺒﯿﻖ ﺟﻮال‪ .‬ﯾﺠﺐ ﺗﻄﻮﯾﺮ‬ ‫ﯾﻮﻓﺮ‬ ‫‪‬‬
‫ﻣﺜﻞ ھﺬه اﻷﻧﻮاع ﻣﻦ اﻟﻮظﺎﺋﻒ ﺑﻮاﺳﻄﺔ ﻣﻄﻮر ‪ Flutter‬أﻧﻔﺴﮭﻢ‪.‬‬
‫ﺗﻄﺒﯿﻘﺎت ‪ Flutter‬ﻻ ﺗﺪﻋﻢ اﻟﻤﺘﺼﻔﺢ‪ .‬إﻧﮫ ﯾﺪﻋﻢ ﻓﻘﻂ أﻧﻈﻤﺔ ‪ Android‬و‪.iOS‬‬ ‫‪‬‬
‫ﯾﺴﺘﺨﺪم ﺑﺮﻣﺠﺔ ‪ Dart‬ﻟﻠﺘﺮﻣﯿﺰ‪ ،‬ﻟﺬﻟﻚ ﯾﺤﺘﺎج اﻟﻤﻄﻮر إﻟﻰ ﺗﻌﻠﻢ ﺗﻘﻨﯿﺎت ﺟﺪﯾﺪة‪ .‬وﻣﻊ ذﻟﻚ‪ ،‬ﻣﻦ اﻟﺴﮭﻞ اﻟﺘﻌﻠﻢ ﻟﻠﻤﻄﻮرﯾﻦ‪.‬‬ ‫‪‬‬

‫‪ .2‬ﻣﺘﻄﻠﺒﺎت ‪ Flutter‬ﻟﻨﻈﺎم اﻟﺘﺸﻐﯿﻞ ‪Windows‬‬

‫ﻟﺘﺜﺒﯿﺖ ‪ Flutter‬وﺗﺸﻐﯿﻠﮫ ﻋﻠﻰ ﻧﻈﺎم ‪ ،Windows‬ﺗﺤﺘﺎج أوﻻً إﻟﻰ ﺗﻠﺒﯿﺔ ھﺬه اﻟﻤﺘﻄﻠﺒﺎت ﻟﺒﯿﺌﺔ اﻟﺘﻄﻮﯾﺮ اﻟﺨﺎﺻﺔ ﺑﻚ‪.‬‬

‫‪Operating System‬‬ ‫‪Windows 7 or Later (I am Windows 10. You can also use Mac or Linux OS.).‬‬

‫‪Disk Space‬‬ ‫‪400 MB (It does not include disk space for IDE/tools).‬‬

‫‪1. Windows PowerShell‬‬

‫‪Tools‬‬
‫‪2. Git for Windows 2.x (Use Git from Windows Command Prompt option).‬‬

‫‪SDK‬‬ ‫‪Flutter SDK for Windows‬‬

‫‪IDE‬‬ ‫)‪Android Studio (Official‬‬

‫ﺗﻨﺰﯾﻞ ‪Git‬‬

‫اﻟﺨﻄﻮة ‪ :1‬ﻟﺘﻨﺰﯾﻞ ‪ ،Git‬اﻧﻘﺮ ھﻨﺎ‪.‬‬

 ‫اﻟﺨﻄﻮة ‪ :2‬ﻗﻢ ﺑﺘﺸﻐﯿﻞ ﻣﻠﻒ ‪ .exe‬ﻹﻛﻤﺎل اﻟﺘﺜﺒﯿﺖ‪ .‬أﺛﻨﺎء اﻟﺘﺜﺒﯿﺖ‪ ،‬ﺗﺄﻛﺪ ﻣﻦ ﺗﺤﺪﯾﺪ اﻟﺨﯿﺎرات اﻟﻤﻮﺻﻰ ﺑﮫ‪.‬‬

‫ﺗﻨﺰﯾﻞ‪Flutter SDK‬‬

‫اﻟﺨﻄﻮة ‪ :1‬ﻗﻢ ﺑﺘﻨﺰﯾﻞ ﺣﺰﻣﺔ اﻟﺘﺜﺒﯿﺖ اﻟﺨﺎﺻﺔ ﺑـ ‪ Flutter Software Development Kit‬ﻟﻨﻈﺎم اﻟﺘﺸﻐﯿﻞ ‪ .windows‬ﻟﺘﻨﺰﯾﻞ ‪،Flutter SDK‬‬
‫اﻧﺘﻘﻞ إﻟﻰ ﻣﻮﻗﻌﮫ اﻟﺮﺳﻤﻲ ‪ ،‬واﻧﻘﺮ ﻋﻠﻰ زر ‪ ،Get started‬وﺳﺘﺤﺼﻞ ﻋﻠﻰ اﻟﺸﺎﺷﺔ اﻟﺘﺎﻟﯿﺔ‪.‬‬

‫اﻟﺨﻄﻮة ‪ :2‬ﻟﺘﻨﺰﯾﻞ أﺣﺪث إﺻﺪار ﻣﻦ ‪ ،Flutter SDK‬اﻧﻘﺮ ﻓﻮق رﻣﺰ ‪ .Windows‬ﺳﺘﺠﺪ ھﻨﺎ راﺑﻂ اﻟﺘﻨﺰﯾﻞ ﻟـ ‪.SDK‬‬

‫اﻟﺨﻄﻮة ‪ :3‬ﻋﻨﺪ اﻛﺘﻤﺎل اﻟﺘﻨﺰﯾﻞ‪ ،‬اﺳﺘﺨﺮج اﻟﻤﻠﻒ اﻟﻤﻀﻐﻮط ‪zip‬وﺿﻌﮫ ﻓﻲ ﻣﺠﻠﺪ أو اﻟﻤﻮﻗﻊ اﻟﻤﻄﻠﻮب‪ ،‬ﻣﺜﺎﻻ‪.D: / Flutter ،‬‬
‫اﻟﺨﻄﻮة ‪ :4‬ﻟﺘﺸﻐﯿﻞ أﻣﺮ ‪ Flutter‬ﻓﻲ وﺣﺪة ﺗﺤﻜﻢ ‪ Windows‬اﻻﻋﺘﯿﺎدﯾﺔ )‪ ،(windows console‬ﺗﺤﺘﺎج إﻟﻰ ﺗﺤﺪﯾﺚ ﻣﺴﺎر اﻟﻨﻈﺎم ﻟﺘﻀﻤﯿﻦ دﻟﯿﻞ‬
‫اﻟﻤﺠﻠﺪ ‪ bin‬ل ‪ .Flutter‬اﻟﺨﻄﻮات اﻟﺘﺎﻟﯿﺔ ﻣﻄﻠﻮﺑﺔ ﻟﻠﻘﯿﺎم ﺑﺬﻟﻚ‪:‬‬

‫‪ .1‬اﻧﺘﻘﻞ إﻟﻰ ﺧﺼﺎﺋﺺ ‪ <- MyComputer‬ﻋﻼﻣﺔ اﻟﺘﺒﻮﯾﺐ اﻟﻤﺘﻘﺪﻣﺔ ‪ <-‬ﻣﺘﻐﯿﺮات اﻟﺒﯿﺌﺔ‪ .‬ﺳﻮف ﺗﺤﺼﻞ ﻋﻠﻰ اﻟﺸﺎﺷﺔ اﻟﺘﺎﻟﯿﺔ‪.‬‬
‫)‪.(MyComputer properties -> advanced tab -> environment variables‬‬

‫‪ .2‬اﻵن‪ ،‬ﺣﺪد اﻟﻤﺴﺎر ‪ <-‬اﻧﻘﺮ ﻓﻮق ﺗﺤﺮﯾﺮ )‪ .(select path -> click on edit‬ﺗﻈﮭﺮ اﻟﺸﺎﺷﺔ اﻟﺘﺎﻟﯿﺔ‪.‬‬

‫‪ .3‬ﻓﻲ اﻟﻨﺎﻓﺬة أﻋﻼه‪ ،‬اﻧﻘﺮ ﻓﻮق ﺟﺪﯾﺪ‪ <-‬ﻛﺘﺎﺑﺔ ﻣﺴﺎر ﻣﺠﻠﺪ ‪ Flutter bin‬ﺑﻘﯿﻤﺔ ﻣﺘﻐﯿﺮة ‪ <-‬ﻣﻮاﻓﻖ ‪ <-‬ﻣﻮاﻓﻖ ‪ <-‬ﻣﻮاﻓﻖ‪.‬‬
‫ﺗﻘﺮﯾﺮا ﻋﻦ ﺣﺎﻟﺔ‬
‫ً‬ ‫اﻟﺨﻄﻮة ‪ :5‬اﻵن‪ ،‬ﻗﻢ ﺑﺘﺸﻐﯿﻞ اﻷﻣﺮ ‪ .flutter doctor $‬ﯾﺘﺤﻘﻖ ھﺬا اﻷﻣﺮ ﻣﻦ ﺟﻤﯿﻊ ﻣﺘﻄﻠﺒﺎت ﺗﻄﻮﯾﺮ ﺗﻄﺒﯿﻖ ‪ Flutter‬وﯾﻌﺮض‬
‫ﺗﺜﺒﯿﺖ ‪.Flutter‬‬

‫اﻟﺨﻄﻮة ‪ :6‬ﻋﻨﺪ ﺗﺸﻐﯿﻞ اﻷﻣﺮ أﻋﻼه‪ ،‬ﺳﯿﻘﻮم ﺑﺘﺤﻠﯿﻞ اﻟﻨﻈﺎم وإظﮭﺎر ﺗﻘﺮﯾﺮه‪ ،‬ﻛﻤﺎ ھﻮ ﻣﻮﺿﺢ ﻓﻲ اﻟﺼﻮرة أدﻧﺎه‪ .‬ﺳﺘﺠﺪ ھﻨﺎ ﺗﻔﺎﺻﯿﻞ ﺟﻤﯿﻊ اﻷدوات‬
‫اﻟﻤﻔﻘﻮدة واﻟﻤﻄﻠﻮﺑﺔ ﻟﺘﺸﻐﯿﻞ ‪ Flutter‬ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ أدوات اﻟﺘﻄﻮﯾﺮ اﻟﻤﺘﻮﻓﺮة وﻟﻜﻨﮭﺎ ﻏﯿﺮ ﻣﺘﺼﻠﺔ ﺑﺎﻟﺠﮭﺎز‪.‬‬

‫اﻟﺨﻄﻮة ‪ :7‬ﻗﻢ ﺑﺘﺜﺒﯿﺖ ‪ .Android SDK‬إذا ﻟﻢ ﯾﻌﺜﺮ أﻣﺮ ‪ flutter doctor‬ﻋﻠﻰ أداة ‪ Android SDK‬ﻓﻲ ﻧﻈﺎﻣﻚ‪ ،‬ﻓﺄﻧﺖ ﺑﺤﺎﺟﺔ أوﻻً إﻟﻰ ﺗﺜﺒﯿﺖ‬
‫‪ .Android Studio IDE‬ﻟﺘﺜﺒﯿﺖ ‪ ،Android Studio IDE‬ﻗﻢ ﺑﺎﻟﺨﻄﻮات اﻟﺘﺎﻟﯿﺔ‪.‬‬

‫‪ .1‬ﻗﻢ ﺑﺘﻨﺰﯾﻞ أﺣﺪث إﺻﺪار ﻣﻦ ‪ Android Studio‬اﻟﻘﺎﺑﻞ ﻟﻠﺘﻨﻔﯿﺬ أو ﻣﻠﻒ ﻣﻀﻐﻮط ﻣﻦ اﻟﻤﻮﻗﻊ اﻟﺮﺳﻤﻲ‪.‬‬
‫‪ .2‬ﻋﻨﺪ اﻛﺘﻤﺎل اﻟﺘﻨﺰﯾﻞ‪ ،‬اﻓﺘﺢ ﻣﻠﻒ ‪ .exe‬وﻗﻢ ﺑﺘﺸﻐﯿﻠﮫ‪ .‬ﺳﻮف ﺗﺤﺼﻞ ﻋﻠﻰ ﻣﺮﺑﻊ اﻟﺤﻮار اﻟﺘﺎﻟﻲ‪.‬‬

‫‪ .3‬اﺗﺒﻊ ﺧﻄﻮات ﻣﻌﺎﻟﺞ اﻟﺘﺜﺒﯿﺖ‪ .‬ﺑﻤﺠﺮد اﻛﺘﻤﺎل ﻣﻌﺎﻟﺞ اﻟﺘﺜﺒﯿﺖ‪ ،‬ﺳﺘﻈﮭﺮ ﻟﻚ اﻟﺸﺎﺷﺔ اﻟﺘﺎﻟﯿﺔ‪.‬‬
‫‪ .4‬ﻓﻲ اﻟﺸﺎﺷﺔ أﻋﻼه‪ ،‬اﻧﻘﺮ ﻓﻮق اﻟﺘﺎﻟﻲ‪ <-‬إﻧﮭﺎء‪ .‬ﺑﻤﺠﺮد اﻟﻨﻘﺮ ﻓﻮق اﻟﺰر "إﻧﮭﺎء"‪ ،‬ﺗﺤﺘﺎج إﻟﻰ ﺗﺤﺪﯾﺪ ﺧﯿﺎر "ﻋﺪم اﺳﺘﯿﺮاد اﻹﻋﺪادات" واﻟﻨﻘﺮ ﻓﻮق‬
‫"ﻣﻮاﻓﻖ"‪ .‬ﺳﯿﺒﺪأ ‪.Android Studio‬‬

‫اﻟﺨﻄﻮة ‪ :8‬ﺑﻌﺪ ذﻟﻚ‪ ،‬ﺗﺤﺘﺎج إﻟﻰ إﻋﺪاد ﻣﺤﺎﻛﻲ ‪ .Android‬وھﻲ ﻣﺴﺆوﻟﺔ ﻋﻦ ﺗﺸﻐﯿﻞ واﺧﺘﺒﺎر ﺗﻄﺒﯿﻖ ‪.Flutter‬‬

‫‪ .1‬ﻟﻀﺒﻂ ﻣﺤﺎﻛﻲ ‪ Android‬ﻧﺬھﺐ اﻟﻰ‬

‫‪Android Studio > Tools > Android > AVD Manager and select Create Virtual Device.‬‬

‫‪ .2‬اﺧﺘﺮ ﻧﻮع اﻟﺠﮭﺎز واﻧﻘﺮ ﻓﻮق اﻟﺘﺎﻟﻲ‪.‬‬

‫‪ .3‬ﺣﺪد ﻧﺴﺨﺔ اﻟﻨﻈﺎم ﻷﺣﺪث إﺻﺪار ﻣﻦ ‪ Android‬واﻧﻘﺮ ﻓﻮق اﻟﺘﺎﻟﻲ‪.‬‬
 ‫‪ .4‬ﺗﺤﻘﻖ ﻣﻦ ﺟﻤﯿﻊ ﺗﻜﻮﯾﻦ ‪ AVD.‬إذا ﻛﺎن ھﺬا ﺻﺤﯿ ًﺤﺎ‪ ،‬ﻓﺎﻧﻘﺮ ﻓﻮق إﻧﮭﺎء‪ .‬ﺗﻈﮭﺮ اﻟﺸﺎﺷﺔ اﻟﺘﺎﻟﯿﺔ‪.‬‬
‫أﺧﯿﺮا‪ ،‬اﻧﻘﺮ ﻓﻮق اﻟﺮﻣﺰ اﻟﺬي ﯾﺸﯿﺮ إﻟﻰ اﻟﻤﺜﻠﺚ ﻓﻲ اﻟﻤﺴﺘﻄﯿﻞ اﻷزرق‪ .‬ﯾﺘﻢ ﻋﺮض ﻣﺤﺎﻛﻲ ‪ Android‬ﻋﻠﻰ اﻟﻨﺤﻮ اﻟﺘﺎﻟﻲ‪.‬‬
‫ً‬ ‫‪.5‬‬
 ‫ﻛﯿﻔﯿﺔ إﻋﺪاد ﻣﺤﺎﻛﻲ ﻟـ ‪VSCode‬؟‬

‫اﻟﺨﻄﻮة ‪ :1‬اﻧﺘﻘﻞ إﻟﻰ ‪ Extensions‬ﻋﻠﻰ ‪ VSCode‬واﺑﺤﺚ ﻋﻦ ﻣﺤﺎﻛﻲ ‪ Android‬و ‪ iOS‬وﻗﻢ ﺑﺘﺜﺒﯿﺘﮫ‪.‬‬

‫اﻟﺨﻄﻮة ‪ :2‬اﻧﻘﺮ ﻋﻠﻰ ‪)Settings icon‬ﻛﻤﺎ ﻣﻮﺿﺢ ﻓﻲ اﻟﺼﻮرة أﻋﻼه ﺑﺎﻟﺴﮭﻢ اﻷﺣﻤﺮ( ﺳﺘﻈﮭﺮ ﻗﺎﺋﻤﺔ ﻛﻤﺎ ﻓﻲ اﻟﺼﻮرة أدﻧﺎه ﻧﺨﺘﺎر ‪Extension‬‬
‫‪ settings‬اﻟﻤﻮﺿﺤﺔ ﺑﺎﻟﻤﺮﺑﻊ اﻷﺣﻤﺮ‪.‬‬

‫ﺳﻮف ﺗﻈﮭﺮ اﻟﺼﻮرة أدﻧﺎه‬

‫ﯾﺠﺐ أن ﯾﻜﻮن ﻣﺴﺎر اﻟﻤﻠﻒ ﻓﻲ ‪VS Code‬ھﻮ ﻧﻔﺴﮫ اﻟﻤﺴﺎر اﻟﻤﻮﺟﻮد ﻓﯿﮫ ‪android sdk‬ﻣﺜﻼ )‪(C:\src\Sdk\emulator‬‬

‫اﻻن ﺳﻮف ﺗﺤﺼﻞ ﻋﻠﻰ اﻷﺟﮭﺰة اﻻﻓﺘﺮاﺿﯿﺔ اﻟﻤﺘﻮﻓﺮة ﻟﻚ ﻣﻦ اﺟﻞ اﻟﻌﻤﻞ ﻣﻦ ﺧﻼل اﻟﻨﻘﺮ ﻋﻠﻰ اﻟﺰر اﻟﻤﻮﺿﺢ ادﻧﺎه‬
 ‫اﻟﺨﻄﻮة ‪ :9‬اﻵن‪ ،‬ﻗﻢ ﺑﺘﺜﺒﯿﺖ اﻟﻤﻜﻮن اﻹﺿﺎﻓﻲ ‪ Flutter and Dart‬ﻹﻧﺸﺎء ﺗﻄﺒﯿﻖ ‪ Flutter‬ﻓﻲ ‪ Android Studio‬أو ‪.visual studio code‬‬
‫ﺧﯿﺎرا ﻟﺘﺸﻐﯿﻞ ﺗﻄﺒﯿﻖ ‪ Flutter‬وﺗﺼﺤﯿﺤﮫ‪ .‬ﻗﻢ ﺑﺎﻟﺨﻄﻮات اﻟﺘﺎﻟﯿﺔ ﻟﺘﺜﺒﯿﺖ ھﺬه‬
‫ً‬ ‫ﺗﻮﻓﺮ ھﺬه اﻟﻤﻜﻮﻧﺎت اﻹﺿﺎﻓﯿﺔ ﻧﻤﻮذ ًﺟﺎ ﻹﻧﺸﺎء ﺗﻄﺒﯿﻖ ‪ ،Flutter‬وﺗﻮﻓﺮ‬
‫اﻟﻤﻜﻮﻧﺎت اﻹﺿﺎﻓﯿﺔ‪.‬‬
‫‪ .1‬اﻓﺘﺢ رﻣﺰ ‪ VS‬ﺛﻢ اﻧﺘﻘﻞ إﻟﻰ ‪.Extensions‬‬
‫اﻵن‪ ،‬اﺑﺤﺚ ﻓﻲ اﻟﻤﻜﻮن اﻹﺿﺎﻓﻲ ‪ .Flutter‬إذا وﺟﺪت‪ ،‬ﺣﺪد ‪ Flutter‬واﻧﻘﺮ ﻓﻮق ﺗﺜﺒﯿﺖ‪ .‬ﻋﻨﺪ اﻟﻨﻘﺮ ﻓﻮق ﺗﺜﺒﯿﺖ‪ ،‬ﺳﯿﻄﻠﺐ ﻣﻨﻚ ﺗﺜﺒﯿﺖ ﻣﻠﺤﻖ‬ ‫‪.2‬‬
‫‪ ،Dart‬اﻧﻘﺮ ﻓﻮق ﻧﻌﻢ ﻟﻠﻤﺘﺎﺑﻌﺔ‪.‬‬

‫‪ .3‬ﻟﻐﺔ ‪Dart‬‬
‫‪ 1.3‬ﻣﺎ ھﻲ ‪Dart Programming‬؟‬
‫‪ Dart‬ھﻲ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﻣﻔﺘﻮﺣﺔ اﻟﻤﺼﺪر ﻟﻸﻏﺮاض اﻟﻌﺎﻣﺔ و ﻣﻮﺟﮭﺔ ﻟﻠﻜﺎﺋﻨﺎت‪ ،‬ﯾﺘﻢ ﺑﻨﺎء اﻟﺠﻤﻞ ﻓﯿﮭﺎ ﻋﻠﻰ ﻏﺮار ‪ .C‬ﺗﻢ ﺗﻄﻮﯾﺮ ﻟﻐﺔ ‪ Dart‬ﺑﻮاﺳﻄﺔ‬
‫‪ Google‬ﻓﻲ ‪ .2011‬اﻟﻐﺮض ﻣﻦ ﺑﺮﻣﺠﺔ ‪ Dart‬ھﻮ إﻧﺸﺎء واﺟﮭﺎت ﻣﺴﺘﺨﺪم أﻣﺎﻣﯿﺔ ﻟﻠﻮﯾﺐ وﺗﻄﺒﯿﻘﺎت اﻟﺠﻮال‪ .‬إﻧﮫ ﻗﯿﺪ اﻟﺘﻄﻮﯾﺮ اﻟﻨﺸﻂ‪ ،‬وﯾﺘﻢ ﺗﺠﻤﯿﻌﮫ‬
‫إﻟﻰ ﻟﻐﺔ اﻷﻟﺔ اﻷﺻﻠﻲ ﻹﻧﺸﺎء ﺗﻄﺒﯿﻘﺎت اﻷﺟﮭﺰة اﻟﻤﺤﻤﻮﻟﺔ‪ ،‬ﻣﺴﺘﻮﺣﻰ ﻣﻦ ﻟﻐﺎت اﻟﺒﺮﻣﺠﺔ اﻷﺧﺮى ﻣﺜﻞ ‪ Java‬و‪ JavaScript‬و‪ ،C #‬وھﻮ ﻣﻜﺘﻮب‬
‫ﻧﻈﺮا ﻷن ‪ Dart‬ھﻲ ﻟﻐﺔ ﻣﺘﺮﺟﻤﺔ‪ ،‬ﻓﻼ ﯾﻤﻜﻨﻚ ﺗﻨﻔﯿﺬ اﻟﺘﻌﻠﯿﻤﺎت اﻟﺒﺮﻣﺠﯿﺔ ﻣﺒﺎﺷﺮةً؛ ﺑﺪﻻً ﻣﻦ ذﻟﻚ‪ ،‬ﯾﻘﻮم اﻟﻤﺘﺮﺟﻢ ﺑﺘﻮزﯾﻌﮭﺎ وﻧﻘﻠﮭﺎ إﻟﻰ رﻣﺰ اﻵﻟﺔ‪.‬‬
‫ً‬ ‫ﺑﻘﻮة‪.‬‬
‫ﯾﻮﺿﺢ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ ﺑﺮﻣﺠﺔ ‪ Dart‬اﻟﺒﺴﯿﻄﺔ‪.‬‬
 ‫‪ 2.3‬ﻧﻮع اﻟﺒﯿﺎﻧﺎت‬
‫‪ Dart‬ھﻲ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﻣﻜﺘﻮﺑﺔ ﺑﻘﻮة‪ .‬ھﺬا ﯾﻌﻨﻲ أن ﻛﻞ ﻗﯿﻤﺔ ﺗﺴﺘﺨﺪﻣﮭﺎ ﻓﻲ ﻟﻐﺔ اﻟﺒﺮﻣﺠﺔ اﻟﺨﺎﺻﺔ ﺑﻚ ﻟﮭﺎ ﻧﻮع إﻣﺎ ‪ string‬أو ‪ number‬وﯾﺠﺐ أن ﺗﻜﻮن‬
‫ﻣﻌﺮوﻓﺔ ﻋﻨﺪ ﺗﺠﻤﯿﻊ اﻟﻜﻮد‪ .‬ﺳﻨﻨﺎﻗﺶ ھﻨﺎ أﻧﻮاع اﻟﺒﯿﺎﻧﺎت اﻷﺳﺎﺳﯿﺔ اﻷﻛﺜﺮ ﺷﯿﻮﻋًﺎ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﻲ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ‪.Dart‬‬

‫‪Data Type‬‬ ‫‪Example‬‬ ‫‪Descriptions‬‬

‫‪String‬‬ ‫;'‪String myName = 'Rakan‬‬ ‫ﯾﺤﺘﻮي ﻋﻠﻰ ﻧﺺ‪ .‬ﺣﯿﺚ ﯾﻤﻜﻨﻚ اﺳﺘﺨﺪام ﻋﻼﻣﺎت اﻻﻗﺘﺒﺎس اﻟﻤﻔﺮدة أو اﻟﻤﺰدوﺟﺔ‬
‫)ﯾﺠﺐ أن ﺗﻜﻮن ﻣﺘﺴﻘًﺎ ﻣﻊ اﺧﺘﯿﺎرك‪(.‬‬

‫‪num, int,‬‬ ‫;‪int age = 25‬‬ ‫ﻧﻮع اﻟﺒﯿﺎﻧﺎت ‪ num‬ﯾﺮﻣﺰ إﻟﻰ رﻗﻢ‪ Dart .‬ﻟﮭﺎ ﻧﻮﻋﺎن ﻣﻦ اﻷرﻗﺎم‪:‬‬
‫‪double‬‬ ‫;‪double price = 125.50‬‬ ‫‪o‬‬ ‫)إﻧﮫ رﻗﻢ ﺑﺪون ﻣﻨﺰﻟﺔ ﻋﺸﺮﯾﺔ( ‪Integer‬‬
‫‪o‬‬ ‫)إﻧﮫ رﻗﻢ ﺑﻤﻨﺰﻟﺔ ﻋﺸﺮﯾﺔ( ‪Double‬‬

‫‪Boolean‬‬ ‫‪bool‬‬ ‫‪var_b‬‬ ‫=‬ ‫;‪true‬‬ ‫ﯾﺴﺘﺨﺪم ‪ bool‬ﻟﺘﻤﺜﯿﻞ اﻟﻘﯿﻤﺔ اﻟﻤﻨﻄﻘﯿﺔ "ﺻﻮاب وﺧﻄﺄ‪".‬‬
‫;‪Or bool var_b = false‬‬

‫‪object‬‬ ‫)(‪Person = Person‬‬ ‫ﺑﺸﻜﻞ ﻋﺎم‪ ،‬ﻛﻞ ﺷﻲء ﻓﻲ ‪ Dart‬ھﻮ ﻛﺎﺋﻦ )ﻣﺜﺎﻻ‪ .(String ،Integer ،‬ﻟﻜﻦ ﯾﻤﻜﻦ‬
‫ﻀﺎ أﻛﺜﺮ ﺗﻌﻘﯿﺪًا‪.‬‬
‫أن ﯾﻜﻮن اﻟﻜﺎﺋﻦ أﯾ ً‬

‫‪ 3.3‬اﻟﻤﺘﻐﯿﺮات واﻟﺪوال )‪(Variables and Functions‬‬

‫اﻟﻤﺘﻐﯿﺮات ھﻲ ‪namespace‬ﻓﻲ اﻟﺬاﻛﺮة اﻟﺘﻲ ﺗﺨﺰن اﻟﻘﯿﻢ‪ .‬ﯾﺴﻤﻰ اﺳﻢ اﻟﻤﺘﻐﯿﺮ ﻛﻤﻌﺮﻓﺎت)‪ .(identifiers‬إﻧﮭﺎ ﺣﺎوﯾﺎت اﻟﺒﯿﺎﻧﺎت‪ ،‬واﻟﺘﻲ ﯾﻤﻜﻨﮭﺎ‬
‫ﺗﺨﺰﯾﻦ ﻗﯿﻤﺔ أي ﻧﻮع‪ .‬ﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل‪:‬‬

‫ﻀﺎ إﻋﻄﺎﺋﮫ ‪ int‬او ‪ .double‬وﻣﻊ ذﻟﻚ‪ ،‬ﯾﺤﺘﻮي ‪ Dart‬ﻋﻠﻰ ﻣﯿﺰة ‪Type‬‬

‫ھﻨﺎ‪ myAge ،‬ھﻮ ﻣﺘﻐﯿﺮ ﯾﺨﺰن ﻗﯿﻤﺔ ﻋﺪد ﺻﺤﯿﺢ ‪ .50‬ﯾﻤﻜﻨﻨﺎ أﯾ ً‬
‫‪ ،Inference‬واﻟﺘﻲ ﺗﺴﺘﻨﺘﺞ أﻧﻮاع اﻟﻘﯿﻢ‪ .‬ﻟﺬﻟﻚ‪ ،‬إذا ﻗﻤﺖ ﺑﺈﻧﺸﺎء ﻣﺘﻐﯿﺮ ﺑﺎﺳﺘﺨﺪام ﻛﻠﻤﺔ رﺋﯿﺴﯿﺔ ‪ ،var‬ﻓﯿﻤﻜﻦ ﻟـ ‪ Dart‬اﺳﺘﻨﺘﺎج ھﺬا اﻟﻤﺘﻐﯿﺮ ﻋﻠﻰ أﻧﮫ ﻣﻦ‬
‫اﻟﻨﻮع ‪.Integer‬‬
‫ﻛﺬﻟﻚ اﻟﺪوال )‪ (Functions‬ﻣﯿﺰة أﺳﺎﺳﯿﺔ أﺧﺮى ﻷي ﻟﻐﺔ ﺑﺮﻣﺠﺔ‪ Functions .‬ھﻲ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻟﻌﺒﺎرات اﻟﺘﻲ ﺗﺆدي ﻣﮭﻤﺔ ﻣﺤﺪدة‪ .‬ﯾﺘﻢ ﺗﻨﻈﯿﻤﮭﺎ ﻓﻲ‬
‫ﻛﺘﻞ ﻣﻨﻄﻘﯿﺔ ﻣﻦ اﻟﺘﻌﻠﯿﻤﺎت اﻟﺒﺮﻣﺠﯿﺔ ﯾﻤﻜﻦ ﻗﺮاءﺗﮭﺎ وﺻﯿﺎﻧﺘﮭﺎ وإﻋﺎدة اﺳﺘﺨﺪاﻣﮭﺎ‪ .‬ﯾﺤﺘﻮي اﻹﻋﻼن ﻋﻦ داﻟﺔ ‪ Function‬ﻋﻠﻰ اﺳﻢ اﻟﺪاﻟﺔ وﻧﻮع اﻹرﺟﺎع‬
‫واﻟﻤﻌﻠﻤﺎت )‪ .( and parameters، return type،function name‬ﯾﻮﺿﺢ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ اﻟﻮظﯿﻔﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﻲ ﺑﺮﻣﺠﺔ ‪.Dart‬‬
 ‫‪ 4.3‬اﻟﻌﻤﻠﯿﺎت )‪(Operators‬‬
‫ﺗﺪﻋﻢ ﻟﻐﺔ ‪ Dart‬ﺟﻤﯿﻊ اﻟﻌﻤﻠﯿﺎت‪ ،‬ﻛﻤﺎ ھﻲ ﻣﻌﺘﺎد ﻓﻲ ﻟﻐﺎت اﻟﺒﺮﻣﺠﺔ اﻷﺧﺮى ﻣﺜﻞ ‪ C‬و‪ Kotlin‬و‪ .Swift‬اﺳﻢ اﻟﻌﻤﻠﯿﺎت اﻟﻤﺪﻋﻮﻣﺔ ﻣﻮﺿﺤﮫ أدﻧﺎه‪:‬‬
‫ﻋﻠﻢ اﻟﺤﺴﺎب )‪.(Arithmetic‬‬ ‫‪‬‬
‫اﻟﻤﺴﺎواة )‪.(Equality‬‬ ‫‪‬‬
‫اﻟﺰﯾﺎدة واﻟﻨﻘﺼﺎن )‪.(Increment and Decrement‬‬ ‫‪‬‬
‫اﻟﻌﻤﻠﯿﺎت اﻟﻤﻨﻄﻘﯿﺔ )‪.(Logical‬‬ ‫‪‬‬
‫اﻟﻤﻘﺎرﻧﺔ )‪.(Comparison‬‬ ‫‪‬‬

‫‪ 5.3‬ﺻﻨﻊ اﻟﻘﺮار)اﻟﺸﺮوط( واﻟﺤﻠﻘﺎت )‪(Decision-Making and Loops‬‬

‫ﺻﻨﻊ اﻟﻘﺮار ھﻮ ﻣﯿﺰة ﺗﺴﻤﺢ ﻟﻚ ﺑﺘﻘﯿﯿﻢ اﻟﺸﺮط ﻗﺒﻞ ﺗﻨﻔﯿﺬ اﻟﺘﻌﻠﯿﻤﺎت‪ .‬ﺗﺪﻋﻢ ﻟﻐﺔ ‪ Dart‬اﻷﻧﻮاع اﻟﺘﺎﻟﯿﺔ ﻣﻦ ﺑﯿﺎﻧﺎت اﺗﺨﺎذ اﻟﻘﺮار‪:‬‬
‫‪‬‬ ‫‪If statement.‬‬
‫‪‬‬ ‫‪If-else statement.‬‬
‫‪‬‬ ‫‪Switch statement.‬‬

‫ﻣﺜﺎل‪:‬‬
 ‫اﻟﺸﻜﻞ أدﻧﺎه ﯾﻮﺿﺢ ذﻟﻚ‪.‬‬

‫اﻟﺤﻠﻘﺎت )‪:(Loop‬‬
‫ﺗُﺴﺘﺨﺪم ﻟﺘﻨﻔﯿﺬ ﻛﺘﻠﺔ )ﻣﺠﻤﻮﻋﺔ( ﻣﻦ اﻟﺘﻌﻠﯿﻤﺎت اﻟﺒﺮﻣﺠﯿﺔ ﺑﺸﻜﻞ ﻣﺘﻜﺮر ﺣﺘﻰ ﯾﺼﺒﺢ اﻟﺸﺮط اﻟﻤﺤﺪد ﺻﺤﯿ ًﺤﺎ‪ .‬ﺗﺪﻋﻢ ﻟﻐﺔ ‪ Dart‬اﻷﻧﻮاع اﻟﺘﺎﻟﯿﺔ ﻣﻦ ﻋﺒﺎرات‬
‫اﻟﺤﻠﻘﺔ‪:‬‬
‫‪‬‬ ‫‪for‬‬
‫‪‬‬ ‫‪for..in‬‬
‫‪‬‬ ‫‪while‬‬
‫‪‬‬ ‫‪do..while‬‬

‫ﻣﺜﺎل‪:‬‬
 ‫‪ 6.3‬اﻟﺘﻌﻠﯿﻘﺎت )‪(Comments‬‬
‫اﻟﺘﻌﻠﯿﻘﺎت ھﻲ ﺳﻄﻮر اﻟﺘﻌﻠﯿﻤﺎت اﻟﺒﺮﻣﺠﯿﺔ ﻏﯿﺮ اﻟﻘﺎﺑﻠﺔ ﻟﻠﺘﻨﻔﯿﺬ‪ .‬ھﻢ أﺣﺪ اﻟﺠﻮاﻧﺐ اﻟﺮﺋﯿﺴﯿﺔ ﻟﺠﻤﯿﻊ ﻟﻐﺎت اﻟﺒﺮﻣﺠﺔ‪ .‬اﻟﻐﺮض ﻣﻦ ذﻟﻚ ھﻮ ﺗﻮﻓﯿﺮ ﻣﻌﻠﻮﻣﺎت‬
‫ﺣﻮل اﻟﻤﺸﺮوع أو اﻟﻤﺘﻐﯿﺮ أو اﻟﻌﻤﻠﯿﺔ‪ .‬ھﻨﺎك ﺛﻼﺛﺔ أﻧﻮاع ﻣﻦ اﻟﺘﻌﻠﯿﻘﺎت ﻓﻲ ﺑﺮﻣﺠﺔ ‪:Dart‬‬
‫ﻋﻤﻞ ﺗﻌﻠﯿﻘﺎت ﻋﻠﻰ اﻟﺘﻨﺴﯿﻖ‪ :‬إﻧﮫ ﺗﻌﻠﯿﻖ ذو ﺳﻄﺮ واﺣﺪ )‪.(//‬‬ ‫‪‬‬
‫اﻟﺘﻌﻠﯿﻘﺎت اﻟﺠﻤﺎﻋﯿﺔ‪ :‬إﻧﮫ ﺗﻌﻠﯿﻖ ﻣﺘﻌﺪد اﻷﺳﻄﺮ )‪.(/*...*/‬‬ ‫‪‬‬
‫ﺗﻌﻠﯿﻘﺎت اﻟﻤﺴﺘﻨﺪ‪ :‬ھﻮ ﺗﻌﻠﯿﻖ ﻣﺴﺘﻨﺪ ﯾﺴﺘﺨﺪم ﻟﻸﻋﻀﺎء واﻷﻧﻮاع )‪.(///‬‬ ‫‪‬‬

‫‪ 7.3‬اﻻﺳﺘﻤﺮار واﻟﺘﻮﻗﻒ )‪(Continue and Break‬‬

‫ﻀﺎ اﻟﻜﻠﻤﺔ اﻷﺳﺎﺳﯿﺔ " ‪ " Continue‬و "‪ " Break‬ﻓﻲ اﻟﺤﻠﻘﺎت وﻓﻲ أي ﻣﻜﺎن آﺧﺮ ﺗﺘﻄﻠﺐ ذﻟﻚ‪ .‬ﺗﺴﻤﺢ ﻟﻚ ﻋﺒﺎرة‬
‫اﺳﺘﺨﺪﻣﺖ ‪ Dart‬أﯾ ً‬
‫ﻓﻮرا إﻟﻰ اﻟﺘﻜﺮار اﻟﺘﺎﻟﻲ ﻟﻠﺤﻠﻘﺔ‪ .‬ﯾﻤﻜﻨﻨﺎ ﻓﮭﻤﮭﺎ ﻣﻦ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ‪.‬‬
‫‪Continue‬ﺑﺘﺨﻄﻲ اﻟﻜﻮد اﻟﻤﺘﺒﻘﻲ داﺧﻞ اﻟﺤﻠﻘﺔ واﻻﻧﺘﻘﺎل ً‬

‫ﺗﺴﻤﺢ ﻟﻚ ﺗﻌﻠﯿﻤﺔ ‪ break‬ﺑﺈﻧﮭﺎء أو إﯾﻘﺎف اﻟﺘﺪﻓﻖ اﻟﺤﺎﻟﻲ ﻟﻠﺒﺮﻧﺎﻣﺞ وﻣﺘﺎﺑﻌﺔ اﻟﺘﻨﻔﯿﺬ ﺑﻌﺪ ﺟﺴﻢ اﻟﺤﻠﻘﺔ‪ .‬اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ ﯾﻌﻄﻲ ﺷﺮﺣﺎ ﻣﻔﺼﻼ‪.‬‬
 (Object-Oriented Programming) ‫ اﻟﺒﺮﻣﺠﺔ اﻟﺸﯿﺌﯿﺔ‬7.3
‫ ﺣﺘﻰ اﻟﻘﯿﻢ اﻷوﻟﯿﺔ ﻣﺜﻞ‬،‫ ﻛﻞ ﻗﯿﻤﺔ ھﻲ ﻛﺎﺋﻦ‬،Dart ‫ ﻓﻲ‬.‫ ﯾﻤﻜﻦ أن ﺗﻜﻮن ﻓﯿﺰﯾﺎﺋﯿﺔ أو ﻣﻨﻄﻘﯿﺔ‬.‫ ھﻮ ﻛﯿﺎن ﻟﮫ ﺣﺎﻟﺔ وﺳﻠﻮك‬:(Object) ‫اﻟﻜﺎﺋﻦ‬ 
.‫ﻀﺎ ﺑﺈﻧﺸﺎء ﻛﺎﺋﻦ ﻣﺨﺼﺺ ﻟﻠﺘﻌﺒﯿﺮ ﻋﻦ ﻋﻼﻗﺎت أﻛﺜﺮ ﺗﻌﻘﯿﺪًا ﺑﯿﻦ اﻟﺒﯿﺎﻧﺎت‬
ً ‫ أﯾ‬Dart ‫ ﯾﻤﻜﻦ أن ﺗﺴﻤﺢ ﻟﻚ‬.‫اﻟﻨﺺ واﻟﺮﻗﻢ‬
‫ ھﺬا ﯾﻌﻨﻲ أن اﻟﻜﺎﺋﻨﺎت ﯾﺘﻢ إﻧﺸﺎؤھﺎ ﺑﻤﺴﺎﻋﺪة اﻟﻔﺌﺎت ﻷن ﻛﻞ ﻛﺎﺋﻦ ﯾﺤﺘﺎج إﻟﻰ ﻣﺨﻄﻂ ﯾﻌﺘﻤﺪ‬.‫ اﻟﻔﺌﺔ ھﻲ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻟﻜﺎﺋﻨﺎت‬:(Class) ‫اﻟﻔﺌﺔ‬ 
:‫ ﯾﺘﻀﻤﻦ ﺗﻌﺮﯾﻒ اﻟﻔﺌﺔ ﻋﻠﻰ اﻷﺷﯿﺎء اﻟﺘﺎﻟﯿﺔ‬.‫ﻋﻠﻰ ﻣﺎ أﻧﺸﺌﺖ ﻣﻦ ﻛﺎﺋﻦ ﻓﺮدي‬
 Fields
 Methods
 Constructor
 Getters and setters
‫ﻣﺜﺎل‬
class Mobile {
// Property Declaration
String color = 'red', brandName = 'mi', modelName = 'mi10';
// Method Creation
String calling() {
return "Mobile can do call to everyone.";}
String musicPlay() {
return "Mobile can play all types of Music.";}
String clickPicture() {
return "Mobile can take pictures.";}}
void main() {
// Object Creation
var myMob = new Mobile();
// Accessing Class's Property
myMob.color = "Black";
myMob.brandName = "Apple Inc.";
myMob.modelName = "iPhone 11 Pro";
//Display Output
print(myMob.color);
print(myMob.modelName);
print(myMob.brandName);
print(myMob.calling());
print(myMob.musicPlay());
print(myMob.clickPicture());
}

:‫اﻟﻨﺎﺗﺞ‬
Black
iPhone 11 Pro
Apple Inc.
Mobile can do call to everyone.
Mobile can play all types of Music.
Mobile can take pictures.
 :‫ﻣﺜﺎل أﺧﺮ‬
class Student {
String name = "Me";
int age = 25;

String get stud_name {

return name;}
void set stud_name(String name) {
this.name = name;}
void set stud_age(int age) {
if (age <= 0) {
print("Age should be greater than 5");
} else {
this.age = age;
}
}

int get stud_age {

return age;
}
}

void main() {
Student s1 = new Student();
s1.stud_name = 'MARK';
s1.stud_age = 10;
print(s1.stud_name);
print(s1.stud_age);
}

‫اﻟﻨﺎﺗﺞ‬
MARK
10
 Flutter ‫ أول ﺗﻄﺒﯿﻖ ﻓﻲ‬.4
‫ ﻗﻢ ﺑﺎﻟﺨﻄﻮات‬،‫ ﺟﺪﯾﺪ‬Flutter ‫ ﻹﻧﺸﺎء ﺗﻄﺒﯿﻖ‬.Flutter ‫ وذﻟﻚ ﻟﻔﮭﻢ أﺳﺎﺳﯿﺎت‬VS.Code ‫ ﺑﺴﯿﻂ ﺑﻮاﺳﻄﺔ‬Android ‫ﺳﻮف ﻧﺘﻌﻠﻢ ﻛﯿﻔﯿﺔ إﻧﺸﺎء ﺗﻄﺒﯿﻖ‬
:‫اﻟﺘﺎﻟﯿﺔ‬
1. Open the Command Palette (Ctrl+Shift+P).

2. Select the Flutter: New Project command and press Enter.

3. Select Application and press Enter.

4. Select a Project location.

5. Enter your desired Project name.
6. Save translation
‫ﺑﻌﺪ اﻹﻧﺘﮭﺎء ﻣﻦ ھﺬه اﻟﺨﻄﻮات ‪ ،‬ﺳﯿﺴﺘﻐﺮق إﻧﺸﺎء ﻣﺸﺮوع ﺑﻌﺾ اﻟﻮﻗﺖ‪ .‬ﻋﻨﺪ إﻧﺸﺎء اﻟﻤﺸﺮوع ‪ ،‬ﺳﺘﺤﺼﻞ ﻋﻠﻰ ﺗﻄﺒﯿﻖ‬
‫‪ Flutter‬ﯾﻌﻤﻞ ﺑﻜﺎﻣﻞ طﺎﻗﺘﮫ ﻣﻊ اﻟﺤﺪ اﻷدﻧﻰ ﻣﻦ اﻟﻮظﺎﺋﻒ‪.‬‬
 ‫دﻋﻮﻧﺎ ﻧﺘﺤﻘﻖ ﻣﻦ ھﯿﻜﻞ ﺗﻄﺒﯿﻖ ﻣﺸﺮوع ‪ Flutter‬واﻟﻐﺮض ﻣﻨﮫ‪ .‬ﻓﻲ اﻟﺼﻮرة أدﻧﺎه‪ ،‬ﯾﻤﻜﻨﻚ رؤﯾﺔ اﻟﻤﺠﻠﺪات واﻟﻤﻜﻮﻧﺎت‬
‫اﻟﻤﺨﺘﻠﻔﺔ ﻟﮭﯿﻜﻞ ﺗﻄﺒﯿﻖ ‪ ، Flutter‬واﻟﺘﻲ ﺳﺘﺘﻢ ﻣﻨﺎﻗﺸﺘﮭﺎ‪.‬‬

‫‪ : .idea‬ﯾﻮﺟﺪ ھﺬا اﻟﻤﺠﻠﺪ ﻓﻲ أﻋﻠﻰ ھﯿﻜﻞ اﻟﻤﺸﺮوع ‪ ،‬واﻟﺬي ﯾﺤﺘﻮي ﻋﻠﻰ اﻹﻋﺪادات ‪,‬ﻻ ﯾﮭﻢ ﻷﻧﻨﺎ ﻟﻦ ﻧﻌﻤﻞ ﻣﻊ ﺑﯿﺌﺔ ﻋﻤﻞ ﺑﺤﯿﺚ‬ ‫‪‬‬
‫ﯾﻤﻜﻦ ﺗﺠﺎھﻞ ﻣﺤﺘﻮى ھﺬا اﻟﻤﺠﻠﺪ‪.‬‬
‫‪ : .android‬ﯾﺤﺘﻮي ھﺬا اﻟﻤﺠﻠﺪ ﻋﻠﻰ ﻣﺸﺮوع ‪ Android‬ﻛﺎﻣﻞ وﯾﺘﻢ اﺳﺘﺨﺪاﻣﮫ ﻋﻨﺪ إﻧﺸﺎء ﺗﻄﺒﯿﻖ ‪ Flutter‬ﻟﻨﻈﺎم ‪Android.‬‬ ‫‪‬‬
‫ﻋﻨﺪﻣﺎ ﯾﺘﻢ ﺗﺠﻤﯿﻊ ﻛﻮد ‪ Flutter‬ﻓﻲ ‪ ،native code‬ﺳﯿﺘﻢ إدﺧﺎﻟﮫ ﻓﻲ ﻣﺸﺮوع ‪ Android‬ھﺬا‪ ،‬ﺑﺤﯿﺚ ﺗﻜﻮن اﻟﻨﺘﯿﺠﺔ ﺗﻄﺒﯿﻖ‬
‫‪Android‬أﺻﻠﻲ‪ .‬ﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل‪ :‬ﻋﻨﺪ اﺳﺘﺨﺪام ﻣﺤﺎﻛﻲ ‪ ، Android‬ﯾﺘﻢ اﺳﺘﺨﺪام ﻣﺸﺮوع ‪ Android‬ھﺬا ﻹﻧﺸﺎء ﺗﻄﺒﯿﻖ‬
‫ﻀﺎ ﻋﻠﻰ ﺟﮭﺎز ‪ Android‬اﻟﻈﺎھﺮي‪.‬‬
‫‪ ،Android‬واﻟﺬي ﯾﺘﻢ ﻧﺸﺮه أﯾ ً‬
‫‪: .iOS‬ﯾﺤﺘﻮي ھﺬا اﻟﻤﺠﻠﺪ ﻋﻠﻰ ﻣﺸﺮوع ‪ Mac‬ﻛﺎﻣﻞ وﯾﺴﺘﺨﺪم ﻋﻨﺪ إﻧﺸﺎء ﺗﻄﺒﯿﻖ ‪ Flutter‬ﻟﻨﻈﺎم اﻟﺘﺸﻐﯿﻞ ‪. iOS‬إﻧﮫ ﻣﺸﺎﺑﮫ‬ ‫‪‬‬
‫ﻟﻤﺠﻠﺪ ‪ android‬اﻟﻤﺴﺘﺨﺪم ﻋﻨﺪ ﺗﻄﻮﯾﺮ ﺗﻄﺒﯿﻖ ﻟﻨﻈﺎم ‪ Android.‬ﻋﻨﺪﻣﺎ ﯾﺘﻢ ﺗﺠﻤﯿﻊ ﻛﻮد ‪ Flutter‬ﻓﻲ اﻟﻜﻮد اﻷﺻﻠﻲ‪ ،‬ﺳﯿﺘﻢ إدﺧﺎﻟﮫ‬
‫ﻓﻲ ﻣﺸﺮوع ‪ iOS‬ھﺬا ‪ ،‬ﺑﺤﯿﺚ ﺗﻜﻮن اﻟﻨﺘﯿﺠﺔ ﺗﻄﺒﯿﻖ ‪ iOS‬أﺻﻠﻲ‪ .‬ﻻ ﯾﻤﻜﻦ إﻧﺸﺎء ﺗﻄﺒﯿﻖ ‪ Flutter‬ﻟﻨﻈﺎم ‪ iOS‬إﻻ ﻋﻨﺪﻣﺎ ﺗﻌﻤﻞ‬
‫ﻋﻠﻰ‪. macOS‬‬
‫‪: .lib‬ھﻮ ﻣﺠﻠﺪ أﺳﺎﺳﻲ ﯾﺮﻣﺰ إﻟﻰ اﻟﻤﻜﺘﺒﺔ‪ .‬إﻧﮫ ﻣﺠﻠﺪ ﺣﯿﺚ ﺳﯿﻜﻮن اﻟﻌﻤﻞ ﺑﺪاﺧﻠﮫ ﺑﻨﺴﺒﺔ ‪ 99‬ﺑﺎﻟﻤﺎﺋﺔ ﻣﻦ أﻋﻤﺎل اﻟﻤﺸﺮوع‪ .‬داﺧﻞ‬ ‫‪‬‬
‫ﻣﺠﻠﺪ‪ ، lib‬ﺳﻨﺠﺪ ﻣﻠﻔﺎت ‪ Dart‬اﻟﺘﻲ ﺗﺤﺘﻮي ﻋﻠﻰ ﻛﻮد ﺗﻄﺒﯿﻖ ‪ Flutter‬اﻟﺨﺎص ﺑﻨﺎ‪ .‬ﺑﺸﻜﻞ اﻓﺘﺮاﺿﻲ‪ ،‬ﯾﺤﺘﻮي ھﺬا اﻟﻤﺠﻠﺪ ﻋﻠﻰ‬
‫اﻟﻤﻠﻒ ‪ ، main. Art‬وھﻮ ﻣﻠﻒ إدﺧﺎل ﺗﻄﺒﯿﻖ ‪.Flutter‬‬
‫‪ :.test‬ﯾﺤﺘﻮي ھﺬا اﻟﻤﺠﻠﺪ ﻋﻠﻰ ﻛﻮد ‪ ، Dart‬واﻟﺬي ﺗﻤﺖ ﻛﺘﺎﺑﺘﮫ ﻟﺘﻄﺒﯿﻖ ‪ Flutter‬ﻹﺟﺮاء اﻻﺧﺘﺒﺎر اﻟﺘﻠﻘﺎﺋﻲ ﻋﻨﺪ إﻧﺸﺎء اﻟﺘﻄﺒﯿﻖ‪ .‬ﻟﻦ‬ ‫‪‬‬
‫ﯾﻜﻮن ﻣﮭ ًﻤﺎ ﺟﺪًا ﺑﺎﻟﻨﺴﺒﺔ ﻟﻨﺎ ھﻨﺎ‪.‬‬

‫ﻀﺎ ﺑﻌﺾ اﻟﻤﻠﻔﺎت اﻻﻓﺘﺮاﺿﯿﺔ ﻓﻲ ﺗﻄﺒﯿﻖ ‪ 99.99 .Flutter‬ﺑﺎﻟﻤﺎﺋﺔ ﻣﻦ اﻟﺤﺎﻻت ﻻ ﻧﻠﻤﺲ ھﺬه اﻟﻤﻠﻔﺎت ﯾﺪوﯾًﺎ‪ .‬ﻣﺜﺎل ﻟﮭﺬه اﻟﻤﻠﻔﺎت‪:‬‬
‫ھﻨﺎك أﯾ ً‬

‫‪ : .gitignore o‬ھﻮ ﻣﻠﻒ ﻧﺼﻲ ﯾﺤﺘﻮي ﻋﻠﻰ ﻗﺎﺋﻤﺔ ﺑﺎﻟﻤﻠﻔﺎت واﻣﺘﺪادات اﻟﻤﻠﻔﺎت واﻟﻤﺠﻠﺪات اﻟﺘﻲ ﺗﺨﺒﺮ ‪ Git‬ﺑﺎﻟﻤﻠﻔﺎت اﻟﺘﻲ ﯾﺠﺐ‬
‫ﺗﺠﺎھﻠﮭﺎ ﻓﻲ اﻟﻤﺸﺮوع‪ Git .‬ھﻮ ﻣﻠﻒ ﻟﻠﺘﺤﻜﻢ ﻓﻲ اﻹﺻﺪار ﻟﺘﺘﺒﻊ اﻟﺘﻐﯿﯿﺮات ﻓﻲ اﻟﺘﻌﻠﯿﻤﺎت اﻟﺒﺮﻣﺠﯿﺔ اﻟﻤﺼﺪر أﺛﻨﺎء ﺗﻄﻮﯾﺮ اﻟﺒﺮاﻣﺞ‪.‬‬
‫‪ :.metadata o‬ھﻮ ﻣﻠﻒ ﺗﻢ إﻧﺸﺎؤه ﺗﻠﻘﺎﺋﯿًﺎ ﺑﻮاﺳﻄﺔ أدوات ‪ ، Flutter‬واﻟﺬي ﯾﺴﺘﺨﺪم ﻟﺘﺘﺒﻊ ﺧﺼﺎﺋﺺ ﻣﺸﺮوع ‪ .Flutter‬ﯾﻘﻮم ھﺬا‬
‫اﻟﻤﻠﻒ ﺑﺘﻨﻔﯿﺬ اﻟﻤﮭﺎم اﻟﺪاﺧﻠﯿﺔ‪ ،‬ﻟﺬﻟﻚ ﻻ ﺗﺤﺘﺎج إﻟﻰ ﺗﺤﺮﯾﺮ اﻟﻤﺤﺘﻮى ﯾﺪوﯾًﺎ ﻓﻲ أي وﻗﺖ‪.‬‬
‫‪ :.packages o‬ھﻮ ﻣﻠﻒ ﯾﺘﻢ إﻧﺸﺎؤه ﺗﻠﻘﺎﺋﯿًﺎ ﺑﻮاﺳﻄﺔ ‪ ، Flutter SDK‬واﻟﺬي ﯾﺴﺘﺨﺪم ﻻﺣﺘﻮاء ﻗﺎﺋﻤﺔ اﻟﺘﺒﻌﯿﺎت ﻟﻤﺸﺮوع ‪.Flutter‬‬
‫‪ :flutter_demoapp.iml o‬ﯾﺘﻢ ﺗﺴﻤﯿﺘﮫ داﺋ ًﻤﺎ وﻓﻘًﺎ ﻻﺳﻢ ﻣﺸﺮوع ‪ Flutter‬اﻟﺬي ﯾﺤﺘﻮي ﻋﻠﻰ إﻋﺪادات إﺿﺎﻓﯿﺔ ﻟﻠﻤﺸﺮوع‪ .‬ﯾﻨﻔﺬ‬
‫ھﺬا اﻟﻤﻠﻒ اﻟﻤﮭﺎم اﻟﺪاﺧﻠﯿﺔ‪ ،‬واﻟﺘﻲ ﺗﺘﻢ إدارﺗﮭﺎ ﺑﻮاﺳﻄﺔ ‪ ،Flutter SDK‬ﻟﺬﻟﻚ ﻻ ﺗﺤﺘﺎج إﻟﻰ ﺗﺤﺮﯾﺮ اﻟﻤﺤﺘﻮى ﯾﺪوﯾًﺎ ﻓﻲ أي وﻗﺖ‪.‬‬
 ‫‪ .5‬ﺑﻨﯿﺔ إطﺎر ﻋﻤﻞ ‪(Flutter Framework Architecture)Flutter‬‬
‫ﺗﺘﻜﻮن ﺑﻨﯿﺔ ‪ Flutter‬ﺑﺸﻜﻞ أﺳﺎﺳﻲ ﻣﻦ أرﺑﻌﺔ ﻣﻜﻮﻧﺎت‪.‬‬
‫‪1. Flutter Engine‬‬
‫‪2. Foundation Library‬‬
‫‪3. Widgets‬‬
‫‪4. Design Specific Widgets‬‬
‫‪Flutter Engine‬‬ ‫‪1,5‬‬
‫ھﻮ ﻣﺤﺮك ﺗﺸﻐﯿﻞ ﻣﺤﻤﻮل )‪ (portable runtime‬ﻟﺘﻄﺒﯿﻘﺎت اﻷﺟﮭﺰة اﻟﻤﺤﻤﻮﻟﺔ ﻋﺎﻟﯿﺔ اﻟﺠﻮدة‪ ،‬ﯾﻌﺘﻤﺪ ﺑﺸﻜﻞ أﺳﺎﺳﻲ ﻋﻠﻰ ﻟﻐﺔ ‪ .C++‬ﯾﻘﻮم‬
‫ﺑﺘﻨﻔﯿﺬ ﻣﻜﺘﺒﺎت ‪ Flutter‬اﻷﺳﺎﺳﯿﺔ ﻣﺜﻞ اﻟﺮﺳﻮم اﻟﻤﺘﺤﺮﻛﺔ )‪ ،(animation‬اﻟﺮﺳﻮﻣﺎت )‪ ،(graphics‬إدﺧﺎل ‪ /‬إﺧﺮاج )‪ ،(I/O‬اﻟﺸﺒﻜﺔ‬
‫)‪ ،(network‬ﺑﻨﯿﺔ اﻟﻤﻜﻮﻧﺎت اﻹﺿﺎﻓﯿﺔ‪ ،‬ودﻋﻢ إﻣﻜﺎﻧﯿﺔ اﻟﻮﺻﻮل أﺛﻨﺎء وﻗﺖ ﺗﺸﻐﯿﻞ ‪ dart‬ﻟﺘﻄﻮﯾﺮ ﺗﻄﺒﯿﻘﺎت ‪ Flutter‬وﺗﺠﻤﯿﻌﮭﺎ وﺗﺸﻐﯿﻠﮭﺎ‪.‬‬

‫‪ 2,5‬ﻣﻜﺘﺒﺔ اﻟﺘﺄﺳﯿﺲ )‪(Foundation Library‬‬

‫ﯾﺤﺘﻮي ﻋﻠﻰ ﺟﻤﯿﻊ اﻟﺤﺰم اﻟﻤﻄﻠﻮﺑﺔ ﻣﻦ اﻟﻠﺒﻨﺎت اﻷﺳﺎﺳﯿﺔ ﻟﻜﺘﺎﺑﺔ ﺗﻄﺒﯿﻖ ‪ .Flutter‬ھﺬه اﻟﻤﻜﺘﺒﺎت ﻛﺘﺒﺖ ﺑﻠﻐﺔ ‪.Dart‬‬

‫‪Widgets 3,5‬‬
‫اﻟﻤﻔﮭﻮم اﻷﺳﺎﺳﻲ ل ‪ Flutter‬ھﻮ أن ﻛﻞ ﺷﻲء ﻋﺒﺎرة ﻋﻦ ‪ Widget .widget‬ﻓﻲ ‪ Flutter‬ھﻲ ﻓﻲ اﻷﺳﺎس أداة أو ﻣﻜﻮن واﺟﮭﺔ ﻣﺴﺘﺨﺪم ﯾﺆﺛﺮ‬
‫ً‬
‫وأﺷﻜﺎﻻ ورﺳﻮ ًﻣﺎ ﻣﺘﺤﺮﻛﺔ‪.‬‬ ‫ﺼﺎ‬
‫وﯾﺘﺤﻜﻢ ﻓﻲ ﻋﺮض وواﺟﮭﺔ اﻟﺘﻄﺒﯿﻖ‪ .‬إﻧﮫ ﯾﺘﻀﻤﻦ رﺳﻮﻣﺎت وﻧ ً‬
‫ﻓﻲ ‪ Flutter‬ﯾﻌﺘﺒﺮ اﻟﺘﻄﺒﯿﻖ ﺑﺤﺪ ذاﺗﮫ ‪ widget‬وﯾﺤﺘﻮي أﯾﻀﺎ ﻋﻠﻰ اﻟﻌﺪﯾﺪ ﻣﻦ ‪ widgets‬اﻟﻔﺮﻋﯿﺔ‪ .‬ھﺬا ﯾﻌﻨﻲ أن اﻟﺘﻄﺒﯿﻖ ھﻮ ‪ widget‬ذات‬
‫ﻣﺴﺘﻮى أﻋﻠﻰ‪ ،‬وأن واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم اﻟﺨﺎﺻﺔ )‪ (UI‬ﺑﮫ ﻣﺒﻨﯿﺔ ﺑﺎﺳﺘﺨﺪام واﺣﺪ أو أﻛﺜﺮ ﻣﻦ ‪ widgets‬ذات ﻣﺴﺘﻮى أدﻧﻰ‪ .‬ﺗﺴﺎﻋﺪك ھﺬه اﻟﻤﯿﺰة ﻋﻠﻰ إﻧﺸﺎء‬
‫واﺟﮭﺔ ﻣﺴﺘﺨﺪم ﻣﻌﻘﺪة ﺑﺴﮭﻮﻟﺔ ﺑﺎﻟﻐﺔ‪ .‬ﯾﻤﻜﻨﻨﺎ ﻓﮭﻤﮫ ﻣﻦ ﻣﺜﺎل ‪ hello world‬اﻟﺬي ﺗﻢ إﻧﺸﺎؤه ﻓﻲ اﻟﻘﺴﻢ اﻟﺴﺎﺑﻖ‪ .‬ھﻨﺎ‪ ،‬ﺳﻨﺸﺮح اﻟﻤﺜﺎل ﺑﺎﻟﺮﺳﻢ اﻟﺒﯿﺎﻧﻲ اﻟﺘﺎﻟﻲ‪.‬‬

‫ﻓﻲ اﻟﺸﻜﻞ أﻋﻼه‪ ،‬ﯾﻤﻜﻨﻨﺎ أن ﻧﺮى أن ﺟﻤﯿﻊ اﻟﻤﻜﻮﻧﺎت ﻋﺒﺎرة ﻋﻦ ‪ widget‬ﺗﺤﺘﻮي ﻋﻠﻰ ‪ widgets‬ﻓﺮﻋﯿﺔ‪ .‬ﺑﺎﻟﺘﺎﻟﻲ‪ ،‬ﻓﺈن ﺗﻄﺒﯿﻖ ‪ Flutter‬ھﻮ ﻓﻲ ﺣﺪ‬
‫ذاﺗﮫ ‪.widget‬‬
 ‫‪Design Specific Widgets‬‬ ‫‪4,5‬‬
‫ﯾﺤﺘﻮي إطﺎر ﻋﻤﻞ ‪ Flutter‬ﻋﻠﻰ ﻣﺠﻤﻮﻋﺘﯿﻦ ﻣﻦ ‪ widgets‬اﻟﺘﻲ ﺗﺘﻮاﻓﻖ ﻣﻊ ﻟﻐﺎت ﺗﺼﻤﯿﻢ ﻣﺤﺪدة‪ .‬اﻟﻤﺠﻤﻮﻋﺔ اﻷوﻟﻰ )‪(Material Design‬‬
‫ﻣﺨﺼﺼﺔ ﻟﺘﻄﺒﯿﻖ ‪ Android‬واﻟﻤﺠﻤﻮﻋﺔ اﻟﺜﺎﻧﯿﺔ )‪ (Cupertino Style‬ﻟﺘﻄﺒﯿﻖ ‪.IOS‬‬
‫‪ 5,5‬اﻹﯾﻤﺎءات )‪(Gestures‬‬
‫إﻧﮭﺎ أداة ﺗﻮﻓﺮ اﻟﺘﻔﺎﻋﻞ )ﻛﯿﻔﯿﺔ اﻻﺳﺘﻤﺎع )‪ (listen‬واﻻﺳﺘﺠﺎﺑﺔ )‪ ((respond‬ﻓﻲ ‪ Flutter‬ﺑﺎﺳﺘﺨﺪام ﻛﺎﺷﻒ اﻹﯾﻤﺎءات ‪.GestureDetector‬‬
‫‪ :GestureDector‬ھﻮ ‪ widget‬ﻏﯿﺮ ﻣﺮﺋﻲ ‪ ،‬واﻟﺬي ﯾﺘﻀﻤﻦ اﻟﻨﻘﺮ واﻟﺴﺤﺐ وﺗﻮﺳﯿﻊ ﻧﻄﺎق اﻟﺘﻔﺎﻋﻞ ﻟﻌﻨﺼﺮ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم اﻟﻔﺮﻋﻲ‪.‬‬ ‫‪‬‬
‫ﻀﺎ اﺳﺘﺨﺪام ﻣﯿﺰات ﺗﻔﺎﻋﻠﯿﺔ أﺧﺮى ﻓﻲ ﻋﻨﺎﺻﺮ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم اﻟﺤﺎﻟﯿﺔ ﻋﻦ طﺮﯾﻖ إﻧﺸﺎء ‪.GestureDetector widget‬‬
‫ﯾﻤﻜﻨﻨﺎ أﯾ ً‬

‫‪ 6,5‬إدارة اﻟﺤﺎﻟﺔ )‪(State Management‬‬

‫ﯾﺤﺎﻓﻆ ‪ Flutter widget‬ﻋﻠﻰ ﺣﺎﻟﺘﮫ ﺑﺎﺳﺘﺨﺪام ‪ widget‬ﺧﺎص ﯾﺪﻋﻰ ‪ .StatefulWidget‬ﯾﺘﻢ داﺋ ًﻤﺎ إﻋﺎدة ﻋﺮﺿﮫ )‪ (re-rendered‬ﺗﻠﻘﺎﺋﯿًﺎ ﻋﻨﺪﻣﺎ‬
‫ﯾﺘﻢ ﺗﻐﯿﯿﺮ ﺣﺎﻟﺘﮫ اﻟﺪاﺧﻠﯿﺔ‪ .‬إﻋﺎدة اﻟﻌﺮض )‪ (re-rendering‬ﺗﻢ ﺗﺤﺴﯿﻨﮫ ﻋﻦ طﺮﯾﻖ ﺣﺴﺎب اﻟﻤﺴﺎﻓﺔ ﺑﯿﻦ ‪ widget UI‬اﻟﻘﺪﯾﻤﺔ واﻟﺠﺪﯾﺪة وﻋﺮض اﻷﺷﯿﺎء‬
‫اﻟﻀﺮورﯾﺔ ﻓﻘﻂ واﻟﺘﻲ ﺗﻢ ﻓﯿﮭﺎ اﻟﺘﻐﯿﯿﺮات‪.‬‬
‫‪ 7,5‬اﻟﻄﺒﻘﺎت )‪(Layers‬‬
‫ﺗﻌﺪ اﻟﻄﺒﻘﺎت ﻣﻔﮭﻮ ًﻣﺎ ﻣﮭ ًﻤﺎ ﻹطﺎر ﻋﻤﻞ ‪ ،Flutter‬واﻟﺘﻲ ﯾﺘﻢ ﺗﺠﻤﯿﻌﮭﺎ ﻓﻲ ﻓﺌﺎت ﻣﺘﻌﺪدة ﻣﻦ ﺣﯿﺚ اﻟﺘﻌﻘﯿﺪ وﺗﺮﺗﯿﺒﮭﺎ ﻓﻲ ﻧﮭﺞ ﻣﻦ أﻋﻠﻰ إﻟﻰ أﺳﻔﻞ‪.‬‬
‫اﻟﻄﺒﻘﺔ اﻟﻌﻠﯿﺎ ھﻲ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم )‪ (UI‬اﻟﺨﺎﺻﺔ ﺑﺎﻟﺘﻄﺒﯿﻖ‪ ،‬وھﻲ ﺧﺎﺻﺔ ﺑﺄﻧﻈﻤﺔ ‪ Android‬و‪.iOS‬‬ ‫‪‬‬
‫ﺗﺤﺘﻮي اﻟﻄﺒﻘﺔ اﻟﻌﻠﯿﺎ اﻟﺜﺎﻧﯿﺔ ﻋﻠﻰ ‪ Flutter widget‬اﻷﺻﻠﯿﺔ‪.‬‬ ‫‪‬‬
‫اﻟﻄﺒﻘﺔ اﻟﺘﺎﻟﯿﺔ ھﻲ طﺒﻘﺔ اﻟﺘﺠﺴﯿﺪ‪ ،‬واﻟﺘﻲ ﺗﻌﺮض ﻛﻞ ﺷﻲء ﻓﻲ ﺗﻄﺒﯿﻖ ‪.Flutter‬‬ ‫‪‬‬
‫وأﺧﯿﺮا‪،‬‬
‫ً‬ ‫ﺑﻌﺪ ذﻟﻚ‪ ،‬ﺗﻨﺰل اﻟﻄﺒﻘﺎت إﻟﻰ اﻹﯾﻤﺎءات )‪ ،(Gestures‬وﻣﻜﺘﺒﺔ اﻷﺳﺎس )‪ ،(foundation library‬واﻟﻤﺤﺮك )‪،(engine‬‬ ‫‪‬‬
‫اﻟﺘﻌﻠﯿﻤﺎت اﻟﺒﺮﻣﺠﯿﺔ اﻟﺨﺎﺻﺔ ﺑﺎﻟﻤﻨﺼﺔ اﻷﺳﺎﺳﯿﺔ )‪.(Core platform-specific code‬‬
‫ﯾﺤﺪد اﻟﺮﺳﻢ اﻟﺘﺨﻄﯿﻄﻲ اﻟﺘﺎﻟﻲ اﻟﻄﺒﻘﺎت ﻓﻲ ﺗﻄﻮﯾﺮ ﺗﻄﺒﯿﻖ ‪.Flutter‬‬
 ‫‪ .6‬أﺳﺎﺳﯿﺎت ‪Flutter‬‬
‫ﻓﻲ ھﺬا اﻟﻘﺴﻢ‪ ،‬ﺳﻮف ﻧﺘﻌﻠﻢ ﻣﻔﮭﻮم ‪ ،Widgets‬وﻛﯿﻔﯿﺔ إﻧﺸﺎﺋﮫ‪ ،‬وأﻧﻮاﻋﮫ اﻟﻤﺨﺘﻠﻔﺔ اﻟﻤﺘﻮﻓﺮة ﻓﻲ إطﺎر ﻋﻤﻞ ‪ .Flutter‬ﻟﻘﺪ ﺗﻌﻠﻤﻨﺎ ﺳﺎﺑﻘًﺎ أن ﻛﻞ ﺷﻲء‬
‫ﻓﻲ ‪ Flutter‬ﻋﺒﺎرة ﻋﻦ ‪Widgets.‬‬
‫إذا ﻛﻨﺖ ﻣﻌﺘﺎدًا ﻋﻠﻰ ‪ React‬أو ‪ ،Vue.js‬ﻓﻤﻦ اﻟﺴﮭﻞ أن ﺗﻔﮭﻢ ‪.Flutter‬‬
‫ﻓﻲ أي وﻗﺖ ﺗﺮﯾﺪ ﻓﯿﮫ إﻧﺸﺎء أي ﺷﻲء ﻓﻲ ‪ ،Flutter‬ﺳﯿﻜﻮن داﺧﻞ ‪ .widget‬اﻟﻐﺮض اﻟﻤﺮﻛﺰي ھﻮ ﺑﻨﺎء اﻟﺘﻄﺒﯿﻖ ﻣﻦ ‪ .widgets‬ﯾﺼﻒ ﻛﯿﻒ‬
‫ﯾﺠﺐ أن ﯾﺒﺪو ﻋﺮض اﻟﺘﻄﺒﯿﻖ اﻟﺨﺎص ﺑﻚ ﻣﻊ اﻟﺘﻜﻮﯾﻦ واﻟﺤﺎﻟﺔ )‪ (configuration and state‬اﻟﺤﺎﻟﯿﯿﻦ‪ .‬ﻋﻨﺪ إﺟﺮاء أي ﺗﻌﺪﯾﻞ ﻓﻲ اﻟﻜﻮد‪ ،‬ﺗﻌﯿﺪ‬
‫‪ widget‬ﺑﻨﺎء وﺻﻔﮭﺎ ﻋﻦ طﺮﯾﻖ ﺣﺴﺎب اﻻﺧﺘﻼف ﺑﯿﻦ ﻋﻨﺼﺮ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم اﻟﺴﺎﺑﻖ واﻟﺤﺎﻟﻲ ﻟﺘﺤﺪﯾﺪ اﻟﺤﺪ اﻷدﻧﻰ ﻣﻦ اﻟﺘﻐﯿﯿﺮات ﻟﻠﻌﺮض ﻓﻲ‬
‫واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم )‪ (UI‬ﻟﻠﺘﻄﺒﯿﻖ‪.‬‬
‫ﺗﺘﺪاﺧﻞ أو ﺗﺘﺮاﺑﻂ ‪ Widgets‬ﻣﻊ ﺑﻌﻀﮭﺎ اﻟﺒﻌﺾ ﻟﺒﻨﺎء اﻟﺘﻄﺒﯿﻖ‪ .‬ھﺬا ﯾﻌﻨﻲ أن ﺟﺬر اﻟﺘﻄﺒﯿﻖ اﻟﺨﺎص ﺑﻚ ھﻮ ﺑﺤﺪ ذاﺗﮫ ‪ ،widget‬وﻛﻞ اﻟﻤﺴﺎرات‬
‫ﻀﺎ‪ .‬ﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل‪ ،‬ﯾﻤﻜﻦ ‪ widget‬ﻋﺮض ﺷﻲء ﻣﺎ وﺗﺤﺪﯾﺪ اﻟﺘﺼﻤﯿﻢ واﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﺘﻔﺎﻋﻞ وﻣﺎ إﻟﻰ ذﻟﻚ‪.‬‬
‫إﻟﻰ اﻷﺳﻔﻞ ھﻮ ‪ widget‬أﯾ ً‬
‫اﻟﺼﻮرة أدﻧﺎه ھﻲ ﺗﻤﺜﯿﻞ ﻣﺮﺋﻲ ﺑﺴﯿﻂ ﻟﺸﺠﺮة ‪.Widgets‬‬

‫ﯾﻤﻜﻨﻨﺎ إﻧﺸﺎء ‪ Flutter widget‬ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬

‫{ ‪class MyApp extends StatelessWidget‬‬
‫;)}‪const MyApp({super.key‬‬

‫‪// This widget is the root of your application.‬‬

‫ھﺬه ال ‪ widget‬ھﻲ ﺟﺬر أو اﺳﺎس ﺗﻄﺒﯿﻘﻚ ﻓﻲ ﻓﻼﺗﺮ‬

 Hello Students ‫ﻣﺜﺎل‬
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Center(child: Text('Hello Students')),
);
}}

widget 1,6
:‫ إﻟﻰ ﻓﺌﺘﯿﻦ‬Flutter ‫ﯾﻤﻜﻨﻨﺎ ﺗﻘﺴﯿﻢ أداة‬
(Output and Input) Visible (‫ ﻣﺮﺋﻲ )اﻹﺧﺮاج واﻟﻤﺪﺧﻼت‬.1
(Layout and Control) Invisible (‫ ﻏﯿﺮ ﻣﺮﺋﻲ )اﻟﺘﺨﻄﯿﻂ واﻟﺘﺤﻜﻢ‬.2

Visible widget 1,1,6

:‫ ﺑﻌﺾ اﻷﻧﻮاع اﻟﻤﮭﻤﺔ ﻟﮭﺬه اﻷداة ھﻲ‬.‫ اﻟﻤﺮﺋﯿﺔ ﺑﺈدﺧﺎل اﻟﻤﺴﺘﺨﺪم وﺑﯿﺎﻧﺎت اﻹﺧﺮاج‬Widget ‫ﺗﺮﺗﺒﻂ‬
Text 
‫ وﺗﺴﻤﺢ ﺧﺎﺻﯿﺔ‬،textAlign ‫ ﺑﺎﺳﺘﺨﺪام ﺧﺎﺻﯿﺔ‬Text widget ‫ ﯾﻤﻜﻨﻨﺎ ﻣﺤﺎذاة‬.‫ ﺗﺤﺘﻮي ﻋﻠﻰ ﺑﻌﺾ اﻟﻨﺼﻮص ﻟﻌﺮﺿﮭﺎ ﻋﻠﻰ اﻟﺸﺎﺷﺔ‬Text widget
‫ ﯾﻤﻜﻨﻨﺎ اﺳﺘﺨﺪاﻣﮫ ﻣﺜﻞ‬.‫ وﻏﯿﺮ ذﻟﻚ اﻟﻜﺜﯿﺮ‬، color، letter spacing، font style، font weight،font ‫ ﺑﺘﺨﺼﯿﺺ اﻟﻨﺺ اﻟﺬي ﯾﺘﻀﻤﻦ‬style
.‫ﻣﻘﺘﻄﻔﺎت اﻟﺘﻌﻠﯿﻤﺎت اﻟﺒﺮﻣﺠﯿﺔ أدﻧﺎه‬
new Text(
'Hello,Students!',
textAlign: TextAlign.center,
style: new TextStyle(fontWeight: FontWeight.bold), )

Button 
ً ‫ ﯾﺴﺘﺨﺪم ﻧﻮ‬،‫ ﻣﺒﺎﺷﺮة؛ ﺑﺪﻻً ﻣﻦ ذﻟﻚ‬Button widget ‫ ﺑﺎﺳﺘﺨﺪام‬Flutter ‫ ﻻ ﯾﺴﻤﺢ‬.‫ ﺗﻨﻔﯿﺬ ﺑﻌﺾ اﻹﺟﺮاءات ﻋﻨﺪ اﻟﻨﻘﺮ‬Button widget ‫ﺗﺘﯿﺢ ﻟﻚ‬
‫ﻋﺎ‬
.‫ ﯾﻤﻜﻨﻨﺎ اﺳﺘﺨﺪاﻣﮫ ﻣﺜﻞ ﻣﻘﺘﻄﻔﺎت اﻟﺘﻌﻠﯿﻤﺎت اﻟﺒﺮﻣﺠﯿﺔ أدﻧﺎه‬.RaisedButton ‫ و‬FlatButton ‫ﻣﻦ اﻷزرار ﻣﺜﻞ‬
//FlatButton Example
new FlatButton(
child: Text("Click here"),
onPressed: () { // Do something here
}, ),

//RaisedButton Example
new RaisedButton(
child: Text("Click here"),
elevation: 5.0,
onPressed: () { // Do something here
}, ),
.‫ ﻟﺘﻐﯿﯿﺮ ﻣﺪى ﺗﻤﯿﺰھﺎ‬elevation ‫ وﯾﺘﻢ اﺳﺘﺨﺪام ﺧﺎﺻﯿﺔ‬،‫ ﺗﻨﻔﯿﺬ إﺟﺮاء ﻣﺎ ﻋﻨﺪ اﻟﻨﻘﺮ ﻓﻮق اﻟﺰر‬onPressed ‫ ﺗﺘﯿﺢ ﻟﻨﺎ ﺧﺎﺻﯿﺔ‬،‫ﻓﻲ اﻟﻤﺜﺎل أﻋﻼه‬
 ‫‪Image ‬‬
‫ﺗﺤﺘﻮي ھﺬه ‪ Image widget‬ﻋﻠﻰ اﻟﺼﻮرة اﻟﺘﻲ ﯾﻤﻜﻨﮭﺎ ﺟﻠﺒﮭﺎ ﻣﻦ ﻣﺼﺎدر ﻣﺘﻌﺪدة ﻣﺜﻞ ﻣﻦ ﻣﺠﻠﺪ اﻷﺻﻮل أو ﻣﺒﺎﺷﺮة ﻣﻦ ﻋﻨﻮان ‪ .URL‬ﯾﻮﻓﺮ‬
‫اﻟﻌﺪﯾﺪ ﻣﻦ ﺗﻄﺒﯿﻘﺎت ﺗﺤﺮﯾﺮ اﻟﺼﻮر ﻟﺘﺤﻤﯿﻞ اﻟﺼﻮر‪ ،‬واﻟﺘﻲ ﺗﺮد أدﻧﺎه‪:‬‬

‫‪ :Image ‬إﻧﮫ أداة ﺗﺤﻤﯿﻞ ﺻﻮر ﻋﺎﻣﺔ ‪ ،‬ﯾﺘﻢ اﺳﺘﺨﺪاﻣﮭﺎ ﺑﻮاﺳﻄﺔ ‪.ImageProvider‬‬
‫‪ :asset ‬ﯾﺘﻢ ﺗﺤﻤﯿﻞ اﻟﺼﻮرة ﻣﻦ ﻣﺠﻠﺪ ﻣﻜﻮﻧﺎت اﻟﻤﺸﺮوع اﻟﺨﺎص ﺑﻚ‪.‬‬
‫‪ :file ‬ﯾﻘﻮم ﺑﺘﺤﻤﯿﻞ اﻟﺼﻮر ﻣﻦ ﻣﺠﻠﺪ اﻟﻨﻈﺎم‪.‬‬
‫‪ :memory ‬ﺗﻘﻮم ﺑﺘﺤﻤﯿﻞ اﻟﺼﻮرة ﻣﻦ اﻟﺬاﻛﺮة‪.‬‬
‫‪ :network ‬ﺗﻘﻮم ﺑﺘﺤﻤﯿﻞ اﻟﺼﻮر ﻣﻦ اﻟﺸﺒﻜﺔ‪.‬‬
‫ﻣﺜﺎل‪:‬‬

‫ﻹﺿﺎﻓﺔ ﺻﻮرة ﻓﻲ اﻟﻤﺸﺮوع‪ ،‬ﺗﺤﺘﺎج أوﻻً إﻟﻰ إﻧﺸﺎء ﻣﺠﻠﺪ ﻟﻤﻜﻮﻧﺎت اﻟﻤﺸﺮوع ﺣﯿﺚ ﺗﺤﺘﻔﻆ ﺑﺼﻮرك ﺛﻢ إﺿﺎﻓﺔ اﻟﺴﻄﺮ أدﻧﺎه ﻓﻲ ﻣﻠﻒ‬
‫‪.pubspec.yaml‬‬
‫‪assets:‬‬
‫‪- assets/ImageName1.jpeg‬‬
‫‪- assets / ImageName2.jpeg‬‬

‫اﻵن‪ ،‬أﺿﻒ اﻟﺴﻄﺮ اﻟﺘﺎﻟﻲ ﻓﻲ ﻣﻠﻒ ‪.dart‬‬

‫)'‪Image.asset('assets/computer.png‬‬
 ‫اﻟﻜﻮد ﻛﺎﻣﻞ ﻟﻤﺎ ﺳﺒﻖ ھﻮ‬
void main() => runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Hello Student'),
centerTitle: true,
backgroundColor: const Color.fromARGB(255, 229, 53, 53),
),
body: const Center(
child: Image(
image: AssetImage('assets/Flutter.jpg'),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.green[600],
child: const Text('click'),
),
),
));

Icon 
.‫ اﻟﻜﻮد اﻟﺘﺎﻟﻲ ﯾﺸﺮﺣﮭﺎ ﺑﺸﻜﻞ أﻛﺜﺮ وﺿﻮ ًﺣﺎ‬.Flutter ‫ ﻛﺤﺎوﯾﺔ ﻟﺘﺨﺰﯾﻦ اﻷﯾﻘﻮﻧﮫ او اﻟﺮﻣﺰ ﻓﻲ‬Icon widget ‫ﺗﻌﻤﻞ‬
body: const Center(
child: Icon(
Icons.airport_shuttle,
color: Colors.lightBlue,
size: 100.0,
),
),

‫ﻣﺜﺎل أﺧﺮ ﻟﻮﺿﻊ أﯾﻘﻮﻧﺔ ﻋﻠﻰ زر أﻣﺮ‬

child: ElevatedButton.icon(
onPressed: () {},
icon: const Icon(Icons.mail),
label: const Text('mail me'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.amber),
), ),
 IconButton ‫ﻣﺜﺎل أﺧﺮ ﻷﯾﻘﻮﻧﺔ زر‬
child: IconButton(
onPressed: () {
if (kDebugMode) {
print('you clicked me');
}
},
icon: const Icon(Icons.alternate_email),
color: Colors.amber),
),
 Invisible widget 2,1,6
‫ ﺣﯿﺚ ﺗﻮﻓﺮ اﻟﺘﺤﻜﻢ ﻓﻲ ﻛﯿﻔﯿﺔ‬،widgets ‫( ﻓﻲ‬layout and control) ‫ اﻷدوات اﻟﻐﯿﺮ اﻟﻤﺮﺋﯿﺔ ﺗﺘﻌﻠﻖ ﺑﺎﻟﺘﺨﻄﯿﻂ واﻟﺘﺤﻜﻢ‬Invisible widget
:‫ ھﻲ‬widgets ‫ ﺑﻌﺾ اﻷﻧﻮاع اﻟﻤﮭﻤﺔ ﻟﮭﺬه‬.‫ وﻛﯿﻒ ﺳﺘﺒﺪو ﻋﻠﻰ اﻟﺸﺎﺷﺔ‬widgets ‫ﺗﺼﺮف‬
Column 
‫ ﯾﻮﻓﺮ‬.‫ اﻟﻔﺮﻋﯿﺔ ﻓﻲ ﻣﺤﺎذاة رأﺳﯿﺔ‬widget ‫( اﻟﺘﻲ ﺗﻘﻮم ﺑﺘﺮﺗﯿﺐ ﺟﻤﯿﻊ‬widget) ‫ ھﻮ ﻧﻮع ﻣﻦ ﻋﻨﺎﺻﺮ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم‬Column widge
‫ ھﻮ اﻟﻤﺤﻮر‬main Axis ‫ ﺣﯿﺚ ﯾﻜﻮن‬.crossAxisAlignment‫ و‬mainAxisAlignment ‫ ﺑﺎﺳﺘﺨﺪام ﺧﺼﺎﺋﺺ‬widgets ‫ﺗﺒﺎﻋﺪًا ﺑﯿﻦ‬
.‫ھﻮ اﻟﻤﺤﻮر اﻷﻓﻘﻲ‬cross Axis‫ و‬،‫اﻟﺮأﺳﻲ‬
.‫ ﻋﻤﻮدﯾًﺎ‬widgets ‫ ﺗُﻨﺸﺊ ﻣﺠﻤﻮﻋﺔ اﻟﺘﻌﻠﯿﻤﺎت اﻟﺒﺮﻣﺠﯿﺔ أدﻧﺎه ﻋﻨﺼﺮﯾﻦ ﻣﻦ‬:‫ﻣﺜﺎل‬
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
"VegElement",
),
new Text(
"Non-vegElement"
), ],),

Row 
‫ واﻟﻤﺤﻮر اﻟﻤﺘﻘﺎطﻊ ھﻮ‬،‫ اﻟﻤﺤﻮر اﻟﺮﺋﯿﺴﻲ ھﻮ اﻟﻤﺤﻮر اﻷﻓﻘﻲ‬،‫ ھﻨﺎ‬.‫ أﻓﻘﯿًﺎ وﻟﯿﺲ رأﺳﯿًﺎ‬widget ‫ ﻟﻜﻨﮭﺎ ﺗﺒﻨﻲ‬،Column widget ‫ﺗﺸﺒﮫ‬
.( the cross axis is the vertical axis،main axis is the horizontal axis) ‫اﻟﻤﺤﻮر اﻟﺮأﺳﻲ‬
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Text( "VegElement", ),
new Text(
"Non-vegElement"
), ], ),

Center 
.Center widget ‫ ﺗﺤﺘﻮي ﺟﻤﯿﻊ اﻷﻣﺜﻠﺔ اﻟﺴﺎﺑﻘﺔ داﺧﻞ‬.‫ واﻟﺘﻲ ﺗﺄﺗﻲ ﺑﺪاﺧﻠﮫ‬،‫ اﻟﻔﺮﻋﯿﺔ‬widgets ‫ ﻟﺘﻮﺳﯿﻂ‬Center widget ‫ﺗُﺴﺘﺨﺪم‬
:‫ﻣﺜﺎل‬
Center(
child: new clumn(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Text( "VegElement", ),
new Text(
"Non-vegElement"
),
],
),
),
 Padding 
‫ﻀﺎ ﺗﻮﻓﯿﺮ اﻟﻤﺴﺎﺣﺔ اﻟﻤﺘﺮوﻛﺔ ﻓﻲ ﺟﻤﯿﻊ‬
ً ‫ ﯾﻤﻜﻨﻚ أﯾ‬.‫ﺗﻘﻮم ھﺬه اﻷداة ﺑﺘﻐﻠﯿﻒ اﻷدوات اﻷﺧﺮى ﻟﻤﻨﺤﮭﺎ ﻣﺴﺎﺣﺔ ﻣﺘﺮوﻛﺔ ﻓﻲ اﺗﺠﺎھﺎت ﻣﺤﺪدة‬
.‫ ﻓﻲ ﺟﻤﯿﻊ اﻻﺗﺠﺎھﺎت‬6.0 ‫ ﯾﻤﻜﻨﻨﺎ ﻓﮭﻤﮫ ﻣﻦ اﻟﻤﺜﺎل أدﻧﺎه اﻟﺬي ﯾﻌﻄﻲ ﻣﺴﺎﺣﺔ ﺣﺸﻮ أداة اﻟﻨﺺ‬.‫اﻻﺗﺠﺎھﺎت‬
:‫ﻣﺜﺎل‬
Padding(
padding: const EdgeInsets.all(6.0),
child: new Text(
"Element 1",
),
),

Scaffold 
etc.، Drawers، Floating Action Buttons،AppBar ‫إطﺎرا ﯾﺘﯿﺢ ﻟﻚ إﺿﺎﻓﺔ ﻋﻨﺎﺻﺮ ﺗﺼﻤﯿﻢ اﻟﻤﻮاد اﻟﺸﺎﺋﻌﺔ ﻣﺜﻞ‬
ً ‫ﺗﻮﻓﺮ ھﺬه اﻷداة‬
Stack 
.‫( ﻋﻨﺼﺮ واﺟﮭﺔ ﻣﺴﺘﺨﺪم‬overlapping) ‫ ﺗُﺴﺘﺨﺪم ﺑﺸﻜﻞ أﺳﺎﺳﻲ ﻟﺘﺪاﺧﻞ‬،‫إﻧﮭﺎ أداة أﺳﺎﺳﯿﺔ‬

State Management Widget 2,6

.(a button on a background gradient) ‫ ﻣﺜﻞ‬:widget ‫ ﻧﻮﻋﺎن أﺳﺎﺳﯿﺎن ﻣﻦ‬Flutter ‫ﯾﻮﺟﺪ ﻓﻲ‬
StatelessWidget 
StatefulWidget 

StatefulWidget 1,2,6
.(the state object and the widget) :classes ‫ ﯾﺤﺘﻮي ﺑﺸﻜﻞ أﺳﺎﺳﻲ ﻋﻠﻰ‬.‫ ﻋﻠﻰ ﻣﻌﻠﻮﻣﺎت اﻟﺤﺎﻟﺔ‬StatefulWidget ‫ﯾﺤﺘﻮي‬
‫ ﯾﺤﺘﻮي ﻋﻠﻰ‬.(build () method) ‫ ھﺬه اﻷداة ﻋﻠﻰ ﻻ ﺗﺤﺘﻮي‬.(the widget lifetime) ‫إﻧﮫ دﯾﻨﺎﻣﯿﻜﻲ ﻷﻧﮫ ﯾﻤﻜﻨﮫ ﺗﻐﯿﯿﺮ اﻟﺒﯿﺎﻧﺎت اﻟﺪاﺧﻠﯿﺔ أﺛﻨﺎء‬
‫ ھﻲ‬StatefulWidget ‫ أﻣﺜﻠﺔ‬.(returns a class that extends the Flutters State Class) ‫ واﻟﺘﻲ‬،(createState () method)
. TextField، Form، InkWell، Slider، Radio،Checkbox
‫ﻣﺜﺎل‬
class Car extends StatefulWidget {
const Car({ Key? key, this.title }) : super(key: key);

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

class _CarState extends State<Car> {

@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xFEEFE),
child: Container(
child: Container( //child: Container() )
)
); } }
 ‫‪StatelessWidget 2,2,6‬‬
‫ﻟﯿﺲ ﻟﺪى ‪ StatelessWidget‬أي ﻣﻌﻠﻮﻣﺎت ﻋﻦ اﻟﺤﺎﻟﺔ‪ .‬ﯾﻈﻞ ﺛﺎﺑﺘًﺎ طﻮال دورة ﺣﯿﺎﺗﮫ‪.‬‬
‫أﻣﺜﻠﺔ )‪etc.، Container، Column، Row،Text (StatelessWidget‬‬
‫ﻣﺜﺎل‬
‫{ ‪class MyStatelessCarWidget extends StatelessWidget‬‬
‫;)‪const MyStatelessCarWidget ({ Key? key }) : super(key: key‬‬

‫‪@override‬‬
‫{ )‪Widget build(BuildContext context‬‬
‫;))‪return Container(color: const Color(0x0xFEEFE‬‬
‫} }‬

‫‪ .6‬ﺗﺨﻄﯿﻂ )‪(Flutter Layouts‬‬

‫اﻟﻤﻔﮭﻮم اﻟﺮﺋﯿﺴﻲ ﻵﻟﯿﺔ اﻟﺘﺨﻄﯿﻂ ھﻮ ‪ .widget‬ﻧﺤﻦ ﻧﻌﻠﻢ أن ‪ flutter‬ﺗﻔﺘﺮض ﻛﻞ ﺷﻲء ﻣﺜﻞ ‪ .widget‬ﻟﺬا ﻓﺈن اﻟﺼﻮرة واﻷﯾﻘﻮﻧﺔ واﻟﻨﺺ وﺣﺘﻰ‬
‫ﺗﺨﻄﯿﻂ اﻟﺘﻄﺒﯿﻖ اﻟﺨﺎص ﺑﻚ ﻛﻠﮭﺎ ‪ .widgets‬ھﻨﺎ‪ ،‬ﺑﻌﺾ اﻷﺷﯿﺎء اﻟﺘﻲ ﻻ ﺗﺮاھﺎ ﻓﻲ واﺟﮭﺔ ﻣﺴﺘﺨﺪم اﻟﺘﻄﺒﯿﻖ‪ ،‬ﻣﺜﻞ اﻟﺼﻔﻮف واﻷﻋﻤﺪة واﻟﺸﺒﻜﺎت‬
‫ﻀﺎ ‪.widgets‬‬
‫)‪ ( and grids، columns،rows‬اﻟﺘﻲ ﺗﺮﺗﺐ وﺗﻘﯿّﺪ وﺗﺤﺎذي اﻷدوات اﻟﻤﺮﺋﯿﺔ ھﻲ أﯾ ً‬

‫ﯾﺘﯿﺢ ﻟﻨﺎ ‪ Flutter‬إﻧﺸﺎء ﺗﺨﻄﯿﻂ )‪(layout‬ﻋﻦ طﺮﯾﻖ إﻧﺸﺎء ‪ widgets‬ﻣﺘﻌﺪدة ﻹﻧﺸﺎء ‪ widgets‬أﻛﺜﺮ ﺗﻌﻘﯿﺪًا‪ .‬ﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل‪ ،‬ﯾﻤﻜﻨﻨﺎ أن ﻧﺮى‬
‫اﻟﺼﻮرة أدﻧﺎه اﻟﺘﻲ ﺗﻌﺮض ﺛﻼﺛﺔ رﻣﻮز ﻣﻊ ﺗﺴﻤﯿﺔ ﺗﺤﺖ ﻛﻞ واﺣﺪة‪.‬‬

‫ﻓﻲ اﻟﺼﻮرة اﻟﺜﺎﻧﯿﺔ‪ ،‬ﯾﻤﻜﻨﻨﺎ أن ﻧﺮى اﻟﺘﺨﻄﯿﻂ اﻟﻤﺮﺋﻲ ﻟﻠﺼﻮرة أﻋﻼه‪ .‬ﺗُﻈﮭﺮ ھﺬه اﻟﺼﻮرة ﺻﻔًﺎ ﻣﻦ ﺛﻼﺛﺔ أﻋﻤﺪة‪ ،‬وﺗﺤﺘﻮي ھﺬه اﻷﻋﻤﺪة ﻋﻠﻰ رﻣﺰ‬
‫وﺗﺴﻤﯿﺔ‪.‬‬
 ‫ﻓﻲ اﻟﺼﻮرة أﻋﻼه‪ ،‬اﻟﺤﺎوﯾﺔ )‪ (container‬ﻋﺒﺎرة ﻋﻦ )‪ (a widget class‬ﺗﺘﯿﺢ ﻟﻨﺎ ﺗﺨﺼﯿﺺ ‪ widget‬ﻓﺮﻋﻲ‪ .‬ﯾﺘﻢ اﺳﺘﺨﺪاﻣﮫ ﺑﺸﻜﻞ أﺳﺎﺳﻲ‬
‫ﻹﺿﺎﻓﺔ اﻟﺤﺪود واﻟﺤﺸﻮ واﻟﮭﻮاﻣﺶ وﻟﻮن اﻟﺨﻠﻔﯿﺔ )‪ ( background color، margins، padding،borders‬وﻏﯿﺮھﺎ اﻟﻜﺜﯿﺮ‪.‬‬
‫ﻀﺎ ﻓﻲ ‪ container‬ﻹﺿﺎﻓﺔ‬
‫ھﻨﺎ‪ ،‬ﺗﺄﺗﻲ )‪ (text widget‬أﺳﻔﻞ ال ‪ container‬ﻹﺿﺎﻓﺔ اﻟﮭﻮاﻣﺶ)‪ .(margins‬ﯾﺘﻢ وﺿﻊ اﻟﺼﻒ )‪ (row‬ﺑﺄﻛﻤﻠﮫ أﯾ ً‬
‫ﻀﺎ‪ ،‬ﯾﺘﻢ اﻟﺘﺤﻜﻢ ﻓﻲ ﺑﻘﯿﺔ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم ﺑﺨﺼﺎﺋﺺ ﻣﺜﻞ اﻟﻠﻮن واﻟﻨﺺ‪.‬‬
‫‪ margins‬و‪ padding‬ﺣﻮل اﻟﺼﻒ‪ .‬أﯾ ً‬

‫‪Layout a widget 1,6‬‬

‫دﻋﻨﺎ ﻧﺘﻌﻠﻢ ﻛﯿﻒ ﯾﻤﻜﻨﻨﺎ إﻧﺸﺎء وﻋﺮض ‪ widget‬ﺑﺴﯿﻂ‪ .‬ﺗﻮﺿﺢ اﻟﺨﻄﻮات اﻟﺘﺎﻟﯿﺔ ﻛﯿﻔﯿﺔ ﺗﺨﻄﯿﻂ ﻋﻨﺼﺮ واﺟﮭﺔ ﻣﺴﺘﺨﺪم )‪:(layout a widget‬‬

‫‪1. First, you need to select a Layout widget.‬‬

‫‪2. Next, create a visible widget.‬‬
‫‪3. Then, add the visible widget to the layout widget.‬‬
‫‪4. Finally, add the layout widget to the page where you want to display.‬‬

‫‪ 2,6‬أﻧﻮاع أدوات اﻟﺘﺨﻄﯿﻂ )‪(Types of Layout Widgets‬‬

‫ﯾﻤﻜﻨﻨﺎ ﺗﺼﻨﯿﻒ أداة اﻟﺘﺨﻄﯿﻂ إﻟﻰ ﻧﻮﻋﯿﻦ‪:‬‬
‫‪Single Child Widget‬‬ ‫‪‬‬
‫‪Multiple Child Widget‬‬ ‫‪‬‬

‫‪Single Child Widget 1,2,6‬‬

‫ﺗﻌﺪ ‪ single child layout widget‬ﻧﻮ ًﻋﺎ ﻣﻦ ‪ ،widgets‬واﻟﺘﻲ ﯾﻤﻜﻦ أن ﺗﺤﺘﻮي ﻋﻠﻰ ‪ widget‬واﺣﺪ ﻓﻘﻂ داﺧﻞ ‪ layout widget‬اﻟﺮﺋﯿﺴﻲ‪.‬‬
‫ﻀﺎ ﻋﻠﻰ وظﺎﺋﻒ ﺗﺨﻄﯿﻂ ﺧﺎﺻﺔ )‪.(special layout functionality‬‬
‫ﯾﻤﻜﻦ أن ﺗﺤﺘﻮي ھﺬه ‪ widgets‬أﯾ ً‬
‫ﯾﻮﻓﺮ ﻟﻨﺎ ‪ Flutter‬اﻟﻌﺪﯾﺪ ﻣﻦ ‪ single child widgets‬ﻟﺠﻌﻞ واﺟﮭﺔ ﻣﺴﺘﺨﺪم اﻟﺘﻄﺒﯿﻖ ‪ UI‬ﺟﺬاﺑﺔ‪ .‬إذا اﺳﺘﺨﺪﻣﻨﺎ ھﺬه ‪ widgets‬ﺑﺸﻜﻞ ﻣﻨﺎﺳﺐ‪،‬‬
‫ﻓﯿﻤﻜﻨﮭﺎ ﺗﻮﻓﯿﺮ وﻗﺘﻨﺎ وﺟﻌﻞ رﻣﺰ اﻟﺘﻄﺒﯿﻖ أﻛﺜﺮ ﻗﺎﺑﻠﯿﺔ ﻟﻠﻘﺮاءة‪ .‬ﻗﺎﺋﻤﺔ اﻷﻧﻮاع اﻟﻤﺨﺘﻠﻔﺔ ﻣﻦ ‪ single child widgets‬ھﻲ‪:‬‬
‫اﻟﺤﺎوﯾﺔ )‪ :(Container‬ھﻲ أداة اﻟﺘﺨﻄﯿﻂ )‪ (layout widget‬اﻷﻛﺜﺮ ﺷﯿﻮ ًﻋﺎ اﻟﺘﻲ ﺗﻮﻓﺮ ﺧﯿﺎرات ﻣﺜﻞ‬ ‫‪‬‬
‫)‪.( sizing of widgets، positioning،painting‬‬
‫( ‪Center‬‬
‫(‪child: Container‬‬
‫‪margin: const EdgeInsets.all(15.0),‬‬
‫‪color: Colors.blue,‬‬
‫‪width: 42.0,‬‬
‫‪height: 42.0,‬‬
‫) ‪),‬‬

‫اﻟﺤﺸﻮ )‪ :(Padding‬ھﻮ ‪ widget‬ﯾﺘﻢ اﺳﺘﺨﺪاﻣﮫ ﻟﺘﻨﻈﯿﻢ ‪ widget‬ﻓﺮﻋﻲ ﻣﻦ ﺧﻼل ﺗﻐﻠﯿﻒ أو ﺣﺸﻮ ﻣﺤﺪدة‪ .‬ﯾﺤﺘﻮي ﻋﻠﻰ )‪(EdgeInsets‬‬ ‫‪‬‬
‫و)‪ (EdgeInsets.fromLTRB‬ﻟﻠﺠﺎﻧﺐ اﻟﻤﻄﻠﻮب ﺗﻮﻓﯿﺮ اﻟﺤﺸﻮ ﻟﮫ‪.‬‬

‫ﺗﻮﺳﯿﻂ )‪ :(Center‬ﺗﺴﻤﺢ ﻟﻚ ھﺬه اﻷداة ﺑﺘﻮﺳﯿﻂ ‪ widget‬اﻟﻔﺮﻋﻲ‪.‬‬ ‫‪‬‬

 ‫ ﯾﻮﻓﺮ ﻣﺰﯾﺪًا ﻣﻦ اﻟﺘﺤﻜﻢ‬.‫ اﻟﻔﺮﻋﻲ‬widget ‫ ﻓﺮﻋﻲ داﺧﻞ ﻧﻔﺴﮭﺎ وﺗﺤﺠﯿﻤﮭﺎ ﺑﻨﺎ ًء ﻋﻠﻰ ﺣﺠﻢ ال‬widget ‫ ﺗﻘﻮم ﺑﻤﺤﺎذاة‬widget ‫ ھﻲ‬:(Align) ‫اﻟﻤﺤﺎذاة‬ 
.‫ ﻓﺮﻋﻲ ﻓﻲ اﻟﻤﻮﺿﻊ اﻟﻤﺤﺪد اﻟﺬي ﺗﺤﺘﺎﺟﮫ ﻓﯿﮫ‬widget ‫ﻟﻮﺿﻊ‬

Center(
child: Container(
height: 110.0,
width: 110.0,
color: Colors.blue,
child: Align(
alignment: Alignment.topLeft,
child: FlutterLogo(
size: 50,
),
), )

.‫ﺗﺘﯿﺢ ﻟﻚ ھﺬه اﻷداة إﻋﻄﺎء اﻟﺤﺠﻢ اﻟﻤﺤﺪد ﻟﻌﻨﺼﺮ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم اﻟﻔﺮﻋﻲ ﻣﻦ ﺧﻼل ﺟﻤﯿﻊ اﻟﺸﺎﺷﺎت‬:SizedBox 

SizedBox(
width: 300.0,
height: 450.0,
child: const Card(child: Text('Hello JavaTpoint!')), )

.‫ ﺗﺴﻤﺢ ﻟﻚ ھﺬه اﻷداة ﺑﺎﻟﺤﻔﺎظ ﻋﻠﻰ ﺣﺠﻢ ﻋﻨﺼﺮ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم اﻟﺘﺎﺑﻊ ﻟﻨﺴﺒﺔ ﻋﺮض إﻟﻰ ارﺗﻔﺎع ﻣﺤﺪدة‬:AspectRatio 

AspectRatio(
aspectRatio: 5/3,
child: Container(
color: Colors.bluel,
), )

.‫ اﻟﻔﺮﻋﻲ‬Baseline ‫ ﯾﻐﯿﺮ ﻋﻨﺼﺮ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم ﻋﻨﺼﺮ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم اﻟﻔﺮﻋﯿﺔ وﻓﻘًﺎ ل‬:Baseline 

child: Baseline(
baseline: 30.0,
baselineType: TextBaseline.alphabetic,
child: Container(
height: 60,
width: 50,
color: Colors.blue,
), )

‫ اﻟﻔﺮﻋﻲ ﻋﻠﻰ‬widget ‫ ھﺬا ﯾﻌﻨﻲ أﻧﮫ ﯾﻤﻜﻨﻚ إﺟﺒﺎر ال‬.‫ اﻟﻔﺮﻋﻲ‬widget ‫ ھﻲ أداة ﺗﺴﻤﺢ ﻟﻚ ﺑﻔﺮض ﻗﯿﻮد إﺿﺎﻓﯿﺔ ﻋﻠﻰ‬:ConstrainedBox 
.‫ اﻟﻔﺮﻋﻲ‬widget ‫ﻓﺮض ﻗﯿﻮد ﻣﻌﯿﻨﺔ دون ﺗﻐﯿﯿﺮ ﺧﺼﺎﺋﺺ‬
ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 150.0,
minWidth: 150.0,
maxHeight: 300.0,
maxWidth: 300.0,
),
child: new DecoratedBox(
decoration: new BoxDecoration(color: Colors.red), ),)
 ‫ ﯾﻘﺮر ال‬.‫ اﻷﺳﺎﺳﻲ‬widget ‫ اﻟﻔﺮﻋﻲ اﻟﻔﺮدي إﻟﻰ‬widget ‫ ﯾﻨﺤﺮف ﻣﻦ ﺗﺨﻄﯿﻂ ال‬widget ‫ ھﻮ‬:CustomSingleChildLayout 
.‫ اﻷﺻﻞ‬widget ‫ﻀﺎ ﻟﺘﺤﺪﯾﺪ ﺣﺠﻢ ال‬
ً ‫ اﻟﻔﺮﻋﻲ وﯾﺴﺘﺨﺪم أﯾ‬widget ‫ اﻷﺳﺎﺳﻲ وﺿﻊ ال‬widget

.‫ ﯾﻘﯿﺲ وﯾﻀﻊ اﻟﻘﻄﻌﺔ اﻟﻔﺮﻋﯿﺔ وﻓﻘًﺎ ﻟﻠﻤﻼءﻣﺔ اﻟﻤﺤﺪدة‬:FittedBox 

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Multiple Layout Widget',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.cyan,
),
home: const MyHomePage(),
); }}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("FittedBox Widget")),
body: Center(
child: FittedBox(
fit: BoxFit.contain,
child: Row(
children: <Widget>[
Image.asset('asssets/image1.jpg'),
const Text("This is a FittedBox widget")
],
), )), ); }}
‫اﻟﻨﺎﺗﺞ‬
 .‫ اﻟﺘﺎﺑﻊ ﻟﮫ وﻓﻘًﺎ ﻟﺠﺰء ﻣﻦ اﻟﻤﺴﺎﺣﺔ اﻟﻤﺘﻮﻓﺮة‬widget ‫ ﯾﺴﻤﺢ ﺑﺘﻐﯿﯿﺮ ﺣﺠﻢ‬widget ‫ ﻋﺒﺎرة ﻋﻦ‬:FractionallySizedBox 

.‫ ﺗﺎﺑﻊ ﻟﮫ إﻟﻰ اﻻرﺗﻔﺎع واﻟﻌﺮض اﻟﺠﻮھﺮﯾﯿﻦ‬widget ‫ ﯾﺴﻤﺤﺎ ﻟﻨﺎ ﺑﺘﻐﯿﯿﺮ ﺣﺠﻢ‬widgets ‫ ھﻤﺎ‬:IntrinsicWidth‫ و‬IntrinsicHeight 

.‫ ﺑﺘﺤﺪﯾﺪ ﺣﺠﻤﮭﺎ ﻓﻘﻂ ﻋﻨﺪﻣﺎ ﺗﻜﻮن ﻏﯿﺮ ﻣﻘﯿﺪة‬widget ‫ ﺗﺴﻤﺢ ﻟﻨﺎ ھﺬه‬:LimitedBox 

.‫ دون ﻋﺮﺿﮫ ﻋﻠﻰ اﻟﺸﺎﺷﺔ‬widget ‫ ﯾﺘﻢ اﺳﺘﺨﺪاﻣﮫ ﻟﻘﯿﺎس أﺑﻌﺎد‬:Offstage 

widget ‫ اﻟﺘﺎﺑﻊ ﻟﮫ ﻋﻤﺎ ﯾﺤﺼﻞ ﻋﻠﯿﮫ ﻣﻦ أﺣﺪ ال‬widget ‫ ﯾﺴﻤﺢ ﺑﻔﺮض ﻗﯿﻮد ﻣﺨﺘﻠﻔﺔ ﻋﻠﻰ‬widget ‫ ﻋﺒﺎرة ﻋﻦ‬:OverflowBox 
.‫ اﻷﺻﻞ‬widget ‫ اﻟﻔﺮﻋﻲ ﺑﺘﺠﺎوز‬widget ‫ ﯾﺴﻤﺢ ﻟﻞ‬،‫ ﺑﻤﻌﻨﻰ آﺧﺮ‬.‫اﻟﺮﺋﯿﺴﻲ‬
:‫ﻣﺜﺎل‬
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Single Layout Widget',
debugShowCheckedModeBanner: false,
theme: ThemeData(
// This is the theme of your application.
primarySwatch: Colors.deepPurple,
),
home: const MyHomePage(),
);
}}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("OverflowBox Widget"),
),
body: Center(
child: Container(
height: 50.0,
width: 50.0,
color: Colors.amberAccent,
child: OverflowBox(
minHeight: 70.0,
minWidth: 70.0,
child: Container(
height: 50.0,
width: 50.0,
color: Colors.red,
),
),
),
),
); }}
 :‫اﻟﻨﺎﺗﺞ‬

Multiple Child widgets2,2,6

‫ ﺗﻀﻊ‬Row widget ،‫ ﻣﺜﻼ‬.‫ ﻓﺮﯾﺪًا‬widget ‫( ﻟﮭﺬه‬layout) ‫ وﯾﻜﻮن ﺗﺨﻄﯿﻂ‬،‫ ﻓﺮﻋﻲ‬widget ‫ اﻟﺘﻲ ﺗﺤﺘﻮي ﻋﻠﻰ أﻛﺜﺮ ﻣﻦ‬widget ‫ھﻲ أﺣﺪ أﻧﻮاع‬
.‫ اﻟﺘﺎﺑﻌﺔ ﻟﮫ ﻓﻲ اﺗﺠﺎه ﻋﻤﻮدي‬widgets ‫ ﺗﻀﻊ‬Column widget ‫ وﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ‬،‫ اﻟﺘﺎﺑﻌﺔ ﻟﮫ ﻓﻲ اﺗﺠﺎه أﻓﻘﻲ‬widgets
.‫ اﻟﻤﻌﻘﺪة‬widgets ‫ ﻓﯿﻤﻜﻨﻨﺎ إﻧﺸﺎء أي ﻣﺴﺘﻮى‬،widget Column‫ و‬Row widget ‫إذا ﻗﻤﻨﺎ ﺑﺪﻣﺞ‬

: Multiple Child widgets ‫ ﺳﻮف ﻧﺴﺘﻌﺮض أﻧﻮا ًﻋﺎ ﻣﺨﺘﻠﻔﺔ ﻣﻦ‬،‫ھﻨﺎ‬

.‫ ﯾﺴﻤﺢ ﺑﺘﺮﺗﯿﺐ ﻋﻨﺎﺻﺮ واﺟﮭﺔ اﻟﻤﺴﺘﺨﺪم اﻟﺘﺎﺑﻌﺔ ﻟﮫ ﻓﻲ اﺗﺠﺎه أﻓﻘﻲ‬:Row 

:‫ﻣﺜﺎل‬
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Multiple Layout Widget',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
 home: const MyHomePage(),
);
}}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Container(
alignment: Alignment.center,
color: Colors.white,
child: const Row(
children: <Widget>[
Expanded(
child: Text('Yemen', textAlign: TextAlign.center),
),
Expanded(
child: Text('IBB', textAlign: TextAlign.center),
),
Expanded(
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: FlutterLogo(),
),
),
], ), ), ); }}
:‫اﻟﻨﺎﺗﺞ‬
 .‫ اﻟﺘﺎﺑﻌﺔ ﻟﮫ ﻓﻲ اﺗﺠﺎه ﻋﻤﻮدي‬widgets ‫ ﯾﺴﻤﺢ ﺑﺘﺮﺗﯿﺐ‬:Column 
.‫ اﻟﺘﺎﺑﻌﺔ ﻟﮭﺎ واﺣﺪة ﺗﻠﻮ اﻷﺧﺮى ﻓﻲ اﺗﺠﺎه اﻟﺘﻤﺮﯾﺮ‬widgets ‫ إﻧﮭﺎ أداة اﻟﺘﻤﺮﯾﺮ اﻷﻛﺜﺮ ﺷﯿﻮﻋًﺎ واﻟﺘﻲ ﺗﺴﻤﺢ ﻟﻨﺎ ﺑﺘﺮﺗﯿﺐ‬:ListView 
‫ وھﻮ ﯾﺘﺄﻟﻒ ﻣﻦ ﻧﻤﻂ‬.‫ ﺛﻨﺎﺋﯿﺔ اﻷﺑﻌﺎد ﻗﺎﺑﻠﺔ ﻟﻠﺘﻤﺮﯾﺮ‬widgets ‫ اﻟﺘﺎﺑﻌﺔ ﻟﮫ ﻋﻠﻰ ھﯿﺌﺔ ﻣﺠﻤﻮﻋﺔ ﻣﻦ‬widgets ‫ ﯾﺴﻤﺢ ﻟﻨﺎ ﺑﺘﺮﺗﯿﺐ‬:GridView 
.‫ﻣﺘﻜﺮر ﻣﻦ اﻟﺨﻼﯾﺎ اﻟﻤﺼﻔﻮﻓﺔ ﻓﻲ ﺗﺨﻄﯿﻂ أﻓﻘﻲ وﻋﻤﻮدي‬
.‫ اﻟﺘﺎﺑﻌﺔ ﻟﻠﺼﻒ واﻟﻌﻤﻮد ﺗﺸﻐﻞ أﻛﺒﺮ ﻣﺴﺎﺣﺔ ﻣﻤﻜﻨﺔ‬widgets ‫ ﯾﺴﻤﺢ ﺑﺠﻌﻞ‬:Expanded 
.‫ اﻟﺘﺎﺑﻌﺔ ﻟﮫ ﻓﻲ اﻟﺠﺪول‬widgets ‫ ﯾﺴﻤﺢ ﻟﻨﺎ ﺑﺘﺮﺗﯿﺐ‬widget ‫ ﻋﺒﺎرة ﻋﻦ‬:Table 
.flow-based widget ‫ ﯾﺴﻤﺢ ﻟﻨﺎ ﺑﺘﻨﻔﯿﺬ‬:Flow 
‫ ﯾﺴﻤﺢ ﻟﻚ ﺑﻮﺿﻊ طﺒﻘﺎت ﻣﺘﻌﺪدة ﻋﻠﻰ‬.‫ اﻟﺘﺎﺑﻌﺔ ﻟﮫ‬widgets ‫ أﺳﺎﺳﻲ ﯾﺴﺘﺨﺪم ﺑﺸﻜﻞ أﺳﺎﺳﻲ ﻟﺘﺪاﺧﻞ اﻟﻌﺪﯾﺪ ﻣﻦ‬widget ‫ وھﻮ‬:Stack 
.‫ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ ﯾﺴﺎﻋﺪ ﻋﻠﻰ ﻓﮭﻢ ذﻟﻚ‬.‫اﻟﺸﺎﺷﺔ‬

:‫ﻣﺜﺎل‬
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Multiple Layout Widget',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
); }}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Container(
alignment: Alignment.center,
color: Colors.white,
child: Stack(
children: <Widget>[
// Max Size
Container(
color: Colors.blue, ),
Container(
color: Colors.pink,
height: 400.0,
width: 300.0, ),
Container(
color: Colors.yellow,
height: 220.0,
width: 200.0, )
], ), ),
);
}}
:‫اﻟﻨﺎﺗﺞ‬
 Building Complex Layout 3,2,6
‫ ﯾﺘﯿﺢ‬.single and multiple child layout widgets ‫ ﺳﻨﺘﻌﻠﻢ ﻛﯿﻒ ﯾﻤﻜﻨﻚ إﻧﺸﺎء واﺟﮭﺔ ﻣﺴﺘﺨﺪم ﻣﻌﻘﺪة ﺑﺎﺳﺘﺨﺪام أدوات ﺗﺨﻄﯿﻂ‬،‫ﻓﻲ ھﺬا اﻟﺠﺰء‬
.‫( إﻧﺸﺎء ﺗﺨﻄﯿﻂ واﺟﮭﺔ ﻣﺴﺘﺨﺪم ﻣﻌﻘﺪ ﻋﻦ طﺮﯾﻖ ﺗﺪاﺧﻞ اﻟﺼﻔﻮف واﻷﻋﻤﺪة داﺧﻞ اﻟﺼﻔﻮف واﻷﻋﻤﺪة‬layout) ‫ﻟﻚ إطﺎر اﻟﺘﺨﻄﯿﻂ‬
‫ ﺑﺒﻌﺾ‬main.dart ‫ ﺗﺤﺘﺎج أوﻻً إﻟﻰ اﺳﺘﺒﺪال رﻣﺰ ﻣﻠﻒ‬،‫ ﻟﮭﺬا اﻟﻐﺮض‬.‫دﻋﻮﻧﺎ ﻧﺮى ﻣﺜﺎﻻً ﻟﻮاﺟﮭﺔ ﻣﺴﺘﺨﺪم ﻣﻌﻘﺪة ﻣﻦ ﺧﻼل إﻧﺸﺎء ﻗﺎﺋﻤﺔ اﻟﻤﻨﺘﺠﺎت‬
.‫اﻟﺘﻌﻠﯿﻤﺎت اﻟﺒﺮﻣﺠﯿﺔ اﻟﺘﺎﻟﯿﺔ‬
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo Application',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const MyHomePage(title: 'Complex layout example'),
);
}}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Product List")),
body: ListView(
padding: const EdgeInsets.fromLTRB(3.0, 12.0, 3.0, 12.0),
children: const <Widget>[
ProductBox(
name: "iPhone",
description: "iPhone is the top branded phone ever",
price: 55000,
image: "iphone.jpg"),
 ProductBox(
name: "Android",
description: "Android is a very stylish phone",
price: 10000,
image: "android.jpg"),
ProductBox(
name: "Tablet",
description: "Tablet is a popular device for official meetings",
price: 25000,
image: "tablat.jpg"),
ProductBox(
name: "Laptop",
description: "Laptop is most famous electronic device",
price: 35000,
image: "laptop.jpg"),
ProductBox(
name: "Desktop",
description: "Desktop is most popular for regular use",
price: 10000,
image: "desktop.jpg"),
],
)); }}
class ProductBox extends StatelessWidget {
const ProductBox(
{Key? key,
required this.name,
required this.description,
required this.price,
required this.image})
: super(key: key);
final String name;
final String description;
final int price;
final String image;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(2),
height: 110,
child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset("assets/$image"),
Expanded(
child: Container(
padding: const EdgeInsets.all(5),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(name,
style:
const TextStyle(fontWeight: FontWeight.bold)),
Text(description),
Text("Price: $price"),
],
)))
]))); }}
 .‫ ﻣﺜﻞ اﻟﺼﻮرة واﻻﺳﻢ واﻟﺴﻌﺮ واﻟﻮﺻﻒ‬،‫ اﻟﺬي ﯾﺤﺘﻮي ﻋﻠﻰ ﺗﻔﺎﺻﯿﻞ اﻟﻤﻨﺘﺞ‬widget ProductBox ‫ ﻗﻤﻨﺎ ﺑﺈﻧﺸﺎء‬،‫ﻓﻲ اﻟﻜﻮد أﻋﻼه‬
etc.، Image، Text، Card، Expanded، Column، Row،Container :‫ اﻟﺘﺎﻟﯿﺔ‬widgets ‫ اﺳﺘﺨﺪﻣﻨﺎ ال‬،ProductBox widget ‫ﻓﻲ‬
:‫( اﻟﺘﺎﻟﻲ‬layout) ‫ ﻋﻠﻰ اﻟﺘﺨﻄﯿﻂ‬widget ‫ﺗﺤﺘﻮي ھﺬه‬

:‫اﻟﻨﺎﺗﺞ‬

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyStatefulWidget(),
);
 }
}

class MyStatefulWidget extends StatefulWidget {

const MyStatefulWidget({Key? key}) : super(key: key);

@override
// ignore: library_private_types_in_public_api
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {

int _count = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Scaffold Example'),
),
body: Center(
child: Text('We have pressed the button $_count times.'),
),
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(
height: 50.0,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
_count++;
}),
tooltip: 'Increment Counter',
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
drawer: const Drawer(
elevation: 20.0,
child: Column(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text("javatpoint"),
accountEmail: Text("[email protected]"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.yellow,
child: Text("abc"),
),
),
ListTile(
title: Text("Inbox"),
leading: Icon(Icons.mail),
),
Divider(
height: 0.1,
),
ListTile(
title: Text("Primary"),
 ‫‪leading: Icon(Icons.inbox),‬‬
‫‪),‬‬
‫(‪ListTile‬‬
‫‪title: Text("Social"),‬‬
‫‪leading: Icon(Icons.people),‬‬
‫‪),‬‬
‫(‪ListTile‬‬
‫‪title: Text("Promotions"),‬‬
‫‪leading: Icon(Icons.local_offer),‬‬
‫)‬
‫‪],‬‬
‫‪),‬‬
‫‪),‬‬
‫;)‬
‫}‬
‫}‬

‫‪Flutter Gestures 3,6‬‬

‫ﺗﻌﺪ اﻹﯾﻤﺎءات )‪ (Gestures‬ﻣﯿﺰة ﻣﺜﯿﺮة ﻟﻼھﺘﻤﺎم ﻓﻲ ‪ Flutter‬ﺗﺘﯿﺢ ﻟﻨﺎ اﻟﺘﻔﺎﻋﻞ ﻣﻊ ﺗﻄﺒﯿﻖ اﻟﮭﺎﺗﻒ اﻟﻤﺤﻤﻮل )أو أي ﺟﮭﺎز ﯾﻌﻤﻞ ﺑﺎﻟﻠﻤﺲ(‪ .‬ﺑﺸﻜﻞ‬
‫ﻋﺎم‪ ،‬ﺗﻌﺮف اﻹﯾﻤﺎءات ﺑﺄﻧﮭﺎ أي إﺟﺮاء ﺟﺴﺪي أو ﺣﺮﻛﺔ ﻟﻠﻤﺴﺘﺨﺪم ﺑﻐﺮض اﻟﺘﺤﻜﻢ ﺑﺸﻲء ﻣﺤﺪد ﻓﻲ اﻟﺠﮭﺎز اﻟﻤﺤﻤﻮل‪ .‬ﺑﻌﺾ اﻷﻣﺜﻠﺔ ﻋﻠﻰ اﻹﯾﻤﺎءات‬
‫ھﻲ‪:‬‬
‫ﻋﻨﺪﻣﺎ ﺗﻜﻮن ﺷﺎﺷﺔ اﻟﮭﺎﺗﻒ اﻟﻤﺤﻤﻮل ﻣﻘﻔﻠﺔ‪ ،‬ﻗﻢ ﺑﺘﻤﺮﯾﺮ إﺻﺒﻌﻚ ﻋﺒﺮ اﻟﺸﺎﺷﺔ ﻟﻔﺘﺤﮭﺎ‪.‬‬ ‫‪‬‬
‫اﻟﻨﻘﺮ ﻋﻠﻰ زر ﻋﻠﻰ ﺷﺎﺷﺔ ھﺎﺗﻔﻚ اﻟﻤﺤﻤﻮل‪ ،‬و‬ ‫‪‬‬
‫اﻟﻨﻘﺮ ﻣﻊ اﻻﺳﺘﻤﺮار ﻋﻠﻰ أﯾﻘﻮﻧﺔ اﻟﺘﻄﺒﯿﻖ ﻋﻠﻰ ﺟﮭﺎز ﯾﻌﻤﻞ ﺑﺎﻟﻠﻤﺲ ﻟﺴﺤﺒﮭﺎ ﻋﺒﺮ اﻟﺸﺎﺷﺎت‪.‬‬ ‫‪‬‬
‫ﻧﺤﻦ ﻧﺴﺘﺨﺪم ﻛﻞ ھﺬه اﻹﯾﻤﺎءات ﻓﻲ اﻟﺤﯿﺎة اﻟﯿﻮﻣﯿﺔ ﻟﻠﺘﻔﺎﻋﻞ ﻣﻊ اﻟﮭﺎﺗﻒ أو اﻟﺠﮭﺎز اﻟﺬي ﯾﻌﻤﻞ ﺑﺎﻟﻠﻤﺲ‪.‬‬
‫ﯾﻘﻮم ‪ Flutter‬ﺑﺘﻘﺴﯿﻢ ﻧﻈﺎم اﻹﯾﻤﺎءات إﻟﻰ طﺒﻘﺘﯿﻦ ﻣﺨﺘﻠﻔﺘﯿﻦ‪ ،‬ﻛﻤﺎ ﯾﻠﻲ‪:‬‬

‫‪1. Pointers‬‬
‫‪2. Gestures‬‬

‫‪Pointers 1,3,6‬‬

‫اﻟﻤﺆﺷﺮات )‪ (Pointers‬ھﻲ اﻟﻄﺒﻘﺔ اﻷوﻟﻰ اﻟﺘﻲ ﺗﻤﺜﻞ اﻟﺒﯿﺎﻧﺎت اﻷوﻟﯿﺔ ﺣﻮل ﺗﻔﺎﻋﻞ اﻟﻤﺴﺘﺨﺪم‪ .‬ﯾﺤﺘﻮي ﻋﻠﻰ أﺣﺪاث ﺗﺼﻒ ﻣﻮﻗﻊ وﺣﺮﻛﺔ اﻟﻤﺆﺷﺮات ﻣﺜﻞ‬
‫اﻟﻠﻤﺴﺎت واﻟﻔﺄرة واﻷﺳﻠﻮب )‪ ( style، mice،touches‬ﻋﺒﺮ اﻟﺸﺎﺷﺎت‪ Flutter .‬ﻻ ﯾﻮﻓﺮ أي آﻟﯿﺔ ﻹﻟﻐﺎء أو إﯾﻘﺎف إرﺳﺎل أﺣﺪاث اﻟﻤﺆﺷﺮ )‪pointer-‬‬
‫‪ .(events‬ﺗﻮﻓﺮ ‪ Flutter‬أداة ﻣﺴﺘﻤﻊ )‪ (Listener widget‬ﻟﻼﺳﺘﻤﺎع إﻟﻰ أﺣﺪاث اﻟﻤﺆﺷﺮ)‪ (pointer-events‬ﻣﺒﺎﺷﺮةً ﻣﻦ ‪ widgets layer‬ﺗﻨﻘﺴﻢ‬
‫أﺣﺪاث اﻟﻤﺆﺷﺮ إﻟﻰ أرﺑﻌﺔ أﻧﻮاع ﺑﺸﻜﻞ أﺳﺎﺳﻲ‪:‬‬

‫‪ :PointerDownEvents‬ﯾﺴﻤﺢ ﻟﻠﻤﺆﺷﺮ ﺑﺎﻻﺗﺼﺎل ﺑﺎﻟﺸﺎﺷﺔ ﻓﻲ ﻣﻜﺎن ﻣﻌﯿﻦ‪.‬‬ ‫‪‬‬

‫‪ :PointerMoveEvents‬ﯾﺴﻤﺢ ﻟﻠﻤﺆﺷﺮ ﺑﺎﻻﻧﺘﻘﺎل ﻣﻦ ﻣﻮﻗﻊ إﻟﻰ ﻣﻮﻗﻊ آﺧﺮ ﻋﻠﻰ اﻟﺸﺎﺷﺔ‪.‬‬ ‫‪‬‬
‫‪ :PointerUpEvents‬ﯾﺴﻤﺢ ﻟﻠﻤﺆﺷﺮ ﺑﺎﻟﺘﻮﻗﻒ ﻋﻦ اﻻﺗﺼﺎل ﺑﺎﻟﺸﺎﺷﺔ‪.‬‬ ‫‪‬‬
‫‪ :PointerCancelEvents‬ﯾﺘﻢ إرﺳﺎل ھﺬا اﻟﺤﺪث ﻋﻨﺪ إﻟﻐﺎء ﺗﻔﺎﻋﻞ اﻟﻤﺆﺷﺮ‪.‬‬ ‫‪‬‬
 ‫‪: Gestures 2,3,6‬‬
‫ھﻲ اﻟﻄﺒﻘﺔ اﻟﺜﺎﻧﯿﺔ اﻟﺘﻲ ﺗﻤﺜﻞ اﻹﺟﺮاءات اﻟﺪﻻﻟﯿﺔ )‪ (semantic actions‬ﻣﺜﻞ اﻟﻨﻘﺮ واﻟﺴﺤﺐ واﻟﻘﯿﺎس )‪ ،( scale، drag،tap‬واﻟﺘﻲ ﯾﺘﻢ اﻟﺘﻌﺮف‬
‫ﻋﻠﯿﮭﺎ ﻣﻦ اﻷﺣﺪاث اﻟﻤﺘﻌﺪد ﻟﻠﻤﺆﺷﺮ اﻟﻔﺮدي‪ .‬ﻛﻤﺎ أﻧﮫ ﻗﺎدر ﻋﻠﻰ إرﺳﺎل أﺣﺪاث ﻣﺘﻌﺪدة ﺗﺘﻮاﻓﻖ ﻣﻊ دورة ﺣﯿﺎة اﻹﯾﻤﺎءة ﻣﺜﻞ ﺑﺪاﯾﺔ اﻟﺴﺤﺐ‪ ،‬وﺗﺤﺪﯾﺚ‬
‫اﻟﺴﺤﺐ‪ ،‬وﻧﮭﺎﯾﺔ اﻟﺴﺤﺐ )‪ .( drag end، drag update،drag start‬ﺑﻌﺾ اﻹﯾﻤﺎءات )‪ (Gestures‬اﻟﻤﺴﺘﺨﺪﻣﺔ ﺑﺸﻜﻞ ﺷﺎﺋﻊ ﻣﺬﻛﻮرة أدﻧﺎه‪:‬‬
‫‪Save translation‬‬

‫‪ :Tap ‬وﯾﻌﻨﻲ ﻟﻤﺲ ﺳﻄﺢ اﻟﺸﺎﺷﺔ ﺑﺄطﺮاف اﻷﺻﺎﺑﻊ ﻟﻔﺘﺮة ﻗﺼﯿﺮة ﺛﻢ رﻓﻌﮭﺎ‪ .‬ﺗﺤﺘﻮي ھﺬه اﻹﯾﻤﺎءة ﻋﻠﻰ اﻷﺣﺪاث اﻟﺘﺎﻟﯿﺔ‪:‬‬
‫‪onTapDown‬‬ ‫‪‬‬
‫‪onTapUp‬‬ ‫‪‬‬
‫‪onTap‬‬ ‫‪‬‬
‫‪onTapCancel‬‬ ‫‪‬‬

‫‪ :Double Tap‬ﯾﺸﺒﮫ إﯾﻤﺎءة اﻟﻨﻘﺮ‪ ،‬ﻟﻜﻨﻚ ﺗﺤﺘﺎج إﻟﻰ اﻟﻨﻘﺮ ﻣﺮﺗﯿﻦ ﻓﻲ وﻗﺖ ﻗﺼﯿﺮ‪ .‬ﺗﺤﺘﻮي ھﺬه اﻹﯾﻤﺎءة ﻋﻠﻰ اﻷﺣﺪاث اﻟﺘﺎﻟﯿﺔ‪:‬‬ ‫‪‬‬

‫‪onDoubleTap‬‬ ‫‪‬‬

‫‪ :Drag‬ﯾﺘﯿﺢ ﻟﻨﺎ ﻟﻤﺲ ﺳﻄﺢ اﻟﺸﺎﺷﺔ ﺑﺄطﺮاف أﺻﺎﺑﻌﻚ وﻧﻘﻠﮭﺎ ﻣﻦ ﻣﻜﺎن إﻟﻰ ﻣﻜﺎن آﺧﺮ ﺛﻢ ﺗﺤﺮﯾﺮھﺎ‪ Flutter .‬ﺗﺼﻨﻒ اﻟﺴﺤﺐ إﻟﻰ ﻧﻮﻋﯿﻦ‪:‬‬ ‫‪‬‬
‫‪ .1‬اﻟﺴﺤﺐ اﻷﻓﻘﻲ )‪ :(Horizontal Drag‬ﺗﺴﻤﺢ ھﺬه اﻹﯾﻤﺎءة ﻟﻠﻤﺆﺷﺮ ﺑﺎﻟﺘﺤﺮك ﻓﻲ اﺗﺠﺎه أﻓﻘﻲ‪ .‬وﯾﺤﺘﻮي ﻋﻠﻰ اﻷﺣﺪاث اﻟﺘﺎﻟﯿﺔ‪:‬‬
‫‪onHorizontalDragStart‬‬ ‫‪‬‬
‫‪onHorizontalDragUpdate‬‬ ‫‪‬‬
‫‪onHorizontalDragEnd‬‬ ‫‪‬‬
‫‪ .2‬اﻟﺴﺤﺐ اﻟﻌﻤﻮدي )‪ :(Vertical Drag‬ﺗﺴﻤﺢ ھﺬه اﻹﯾﻤﺎءة ﻟﻠﻤﺆﺷﺮ ﺑﺎﻟﺘﺤﺮك ﻓﻲ اﻻﺗﺠﺎه اﻟﺮأﺳﻲ‪ .‬وﯾﺤﺘﻮي ﻋﻠﻰ اﻷﺣﺪاث اﻟﺘﺎﻟﯿﺔ‪:‬‬
‫‪onVerticalDragStart‬‬ ‫‪‬‬
‫‪onVerticalDragStart‬‬ ‫‪‬‬
‫‪onVerticalDragStart‬‬ ‫‪‬‬
‫‪ : Long Press‬ھﺬا ﯾﻌﻨﻲ ﻟﻤﺲ ﺳﻄﺢ اﻟﺸﺎﺷﺔ ﻓﻲ ﻣﻜﺎن ﻣﻌﯿﻦ ﻟﻔﺘﺮة طﻮﯾﻠﺔ‪ .‬ﺗﺤﺘﻮي ھﺬه اﻹﯾﻤﺎءة ﻋﻠﻰ اﻷﺣﺪاث اﻟﺘﺎﻟﯿﺔ‪:‬‬ ‫‪‬‬

‫‪onLongPress ‬‬
‫‪ :Pan‬ﯾﻌﻨﻲ ﻟﻤﺲ ﺳﻄﺢ اﻟﺸﺎﺷﺔ ﺑﻄﺮف اﻹﺻﺒﻊ‪ ،‬واﻟﺬي ﯾﻤﻜﻦ أن ﯾﺘﺤﺮك ﻓﻲ أي اﺗﺠﺎه دون ﺗﺤﺮﯾﺮ طﺮف اﻹﺻﺒﻊ‪ .‬ﺗﺤﺘﻮي ھﺬه اﻹﯾﻤﺎءة‬ ‫‪‬‬
‫ﻋﻠﻰ اﻷﺣﺪاث اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫‪onPanStart‬‬ ‫‪‬‬
‫‪onPanUpdate‬‬ ‫‪‬‬
‫‪onPanEnd ‬‬
‫‪ :Pinch‬ﯾﻌﻨﻲ اﻟﻀﻐﻂ ﻋﻠﻰ )ﺗﺤﺮﯾﻚ إﺻﺒﻌﻚ وإﺑﮭﺎﻣﻚ أو ﺟﻤﻌﮭﻤﺎ ﻣﻌًﺎ ﻋﻠﻰ ﺷﺎﺷﺔ ﺗﻌﻤﻞ ﺑﺎﻟﻠﻤﺲ( ﻋﻠﻰ ﺳﻄﺢ اﻟﺸﺎﺷﺔ ﺑﺎﺳﺘﺨﺪام إﺻﺒﻌﯿﻦ‬ ‫‪‬‬
‫ﻟﺘﻜﺒﯿﺮ اﻟﺸﺎﺷﺔ أو ﺗﺼﻐﯿﺮھﺎ‪.‬‬
‫‪Gesture Detector 4,6‬‬
‫ً‬
‫ﻣﻤﺘﺎزا ﻟﺠﻤﯿﻊ أﻧﻮاع اﻹﯾﻤﺎءات )‪ (gestures‬ﺑﺎﺳﺘﺨﺪام ‪.GestureDetector widget‬‬ ‫‪ Flutter‬ﯾﻮﻓﺮ ‪ widget‬ﯾﻌﻄﻲ دﻋ ًﻤﺎ‬
 ‫ اﻟﻔﻜﺮة اﻷﺳﺎﺳﯿﺔ‬.‫ﯾُﺴﺘﺨﺪم ﺑﺸﻜﻞ أﺳﺎﺳﻲ ﻻﻛﺘﺸﺎف إﯾﻤﺎءات اﻟﻤﺴﺘﺨﺪم‬، (non-visual) ‫ ﻏﯿﺮ ﻣﺮﺋﯿﺔ‬widget ‫ ھﻮ ﻋﺒﺎرة ﻋﻦ‬GestureWidget
.‫ ﺣﯿﺚ ﯾﺤﺘﻮي ﻋﻠﻰ ﻣﻌﻠﻤﺎت ﻓﻲ ُﻣﻨﺸﺌﮫ ﻷﺣﺪاث اﻟﻠﻤﺲ اﻟﻤﺨﺘﻠﻔﺔ‬stateless widget ‫ﻟﻜﺎﺷﻒ اﻹﯾﻤﺎءات ھﻲ‬

‫ ﺣﯿﺚ ﯾﻘﻮم إطﺎر‬،‫( ﻓﻲ ﻣﻜﺎن ﻣﻌﯿﻦ ﻋﻠﻰ اﻟﺸﺎﺷﺔ‬multiple gesture detectors) ‫ ﻗﺪ ﯾﻜﻮن ھﻨﺎك اﻟﻌﺪﯾﺪ ﻣﻦ ﻛﺎﺷﻔﺎت اﻹﯾﻤﺎءات‬،‫ﻓﻲ ﺑﻌﺾ اﻟﻤﻮاﻗﻒ‬
‫ ﺗﺤﺪد اﻹﯾﻤﺎءة اﻟﺘﻲ ﺳﯿﺘﻢ اﻟﺘﻌﺮف ﻋﻠﯿﮭﺎ ﺑﻨﺎ ًء ﻋﻠﻰ أي ﻣﻦ ﻋﻤﻠﯿﺎت رد‬GestureDetector widget .‫اﻟﻌﻤﻞ ﺑﺘﻮﺿﯿﺢ اﻹﯾﻤﺎءة اﻟﺘﻲ ﯾﺠﺐ اﺳﺘﺪﻋﺎؤھﺎ‬
.(callbacks are non-null) ‫اﻻﺗﺼﺎل اﻟﺨﺎﺻﺔ ﺑﮭﺎ ﺗﻜﻮن ﻏﯿﺮ ﻓﺎرﻏﺔ‬

‫ ﻟﮭﺬا‬GestureDetector ‫ اﻟﺒﺴﯿﻂ وﺗﺤﺪﯾﺪ ﻛﯿﻔﯿﺔ ﻣﻌﺎﻟﺠﺔ‬onTap() ‫دﻋﻮﻧﺎ ﻧﺘﻌﻠﻢ ﻛﯿﻒ ﯾﻤﻜﻨﻨﺎ اﺳﺘﺨﺪام ھﺬه اﻹﯾﻤﺎءات ﻓﻲ ﺗﻄﺒﯿﻘﻨﺎ ﻣﻦ ﺧﻼل ﺣﺪث‬
.‫ إﻟﯿﮫ‬onTap() ‫ ﺛﻢ إﺿﺎﻓﺔ وظﯿﻔﺔ‬،‫ وﺗﺼﻤﯿﻤﮫ وﻓﻘًﺎ ﻟﻠﻤﻮاﺻﻔﺎت اﻟﻤﻄﻠﻮﺑﺔ‬،box widget ‫ ھﻨﺎ ﺳﻨﻘﻮم ﺑﺈﻧﺸﺎء‬.‫اﻷﻣﺮ‬
.main.dart ‫ ﺟﺪﯾﺪ واﺳﺘﺒﺪل اﻟﻜﻮد اﻟﺘﺎﻟﻲ ﻓﻲ ﻣﻠﻒ‬Flutter ‫ ﻗﻢ ﺑﺈﻧﺸﺎء ﻣﺸﺮوع‬:‫ﻣﺜﺎل‬
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo Application',
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
home: const MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {

const MyHomePage({super.key});

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

class MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: const Text('Gestures Example'),
centerTitle: true,
),
body: new Center(
child: GestureDetector(
onTap: () {
print('Box Clicked');
},
child: Container(
 ‫‪height: 60.0,‬‬
‫‪width: 120.0,‬‬
‫‪padding: const EdgeInsets.all(10.0),‬‬
‫(‪decoration: BoxDecoration‬‬
‫‪color: Colors.red,‬‬
‫‪borderRadius: BorderRadius.circular(15.0),‬‬
‫‪),‬‬
‫‪child: const Center(child: Text('Click Me')),‬‬
‫‪))),‬‬
‫;)‬
‫}‬
‫}‬
‫‪Save translation‬‬

‫اﻟﻧﺎﺗﺞ‪ :‬ﻋﻧد ﺗﺷﻐﯾل ﻣﻠف ‪ ،dart‬ﻓﺈﻧﮫ ﺳﯾﻌطﻲ اﻹﺧراج اﻟﺗﺎﻟﻲ ﻓﻲ اﻟﻣﺣﺎﻛﻲ‪.‬‬

‫ﻓﻲ اﻟﺼﻮرة أﻋﻼه‪ ،‬ﯾﻤﻜﻨﻚ رؤﯾﺔ زر ذو ﺣﻮاف ﻣﺴﺘﺪﯾﺮة ﻓﻲ ﻣﻨﺘﺼﻒ اﻟﺸﺎﺷﺔ‪ .‬ﻋﻨﺪﻣﺎ ﺗﻨﻘﺮ ﻋﻠﻰ ھﺬا‪ ،‬ﻓﺈﻧﮫ ﯾﺘﺼﺮف ﻛﺰر‪ ،‬وﯾﻤﻜﻦ رؤﯾﺔ اﻹﺧﺮاج ﻓﻲ‬
‫وﺣﺪة اﻟﺘﺤﻜﻢ‪.‬‬

‫ﻀﺎ ﻣﺠﻤﻮﻋﺔ ﻣﻦ ‪ widgets‬اﻟﺘﻲ ﯾﻤﻜﻦ أن ﺗﺴﻤﺢ ﻟﻚ ﺑﺎﻟﻘﯿﺎم ﺑﺈﯾﻤﺎءات ﻣﺤﺪدة وﻣﺘﻘﺪﻣﺔ‪ .‬ھﺬه ‪ widgets‬ﻣﺬﻛﻮرة أدﻧﺎه‪:‬‬
‫ﯾﻮﻓﺮ ‪ Flutter‬أﯾ ً‬

‫‪ :Dismissible‬ھﻮ ﻧﻮع ﻣﻦ ‪ widget‬ﯾﺪﻋﻢ إﯾﻤﺎءة اﻟﻨﻘﺮ ﻟﺘﺠﺎھﻞ ‪.widget‬‬ ‫‪‬‬

‫‪ :Draggable‬ھﻮ ﻧﻮع ﻣﻦ ‪ widget‬اﻟﺘﻲ ﺗﺪﻋﻢ إﯾﻤﺎءات اﻟﺴﺤﺐ ﻟﺘﺤﺮﯾﻚ ‪.widget‬‬ ‫‪‬‬
‫‪ :LongPressDraggable‬ھﻮ ﻧﻮع ﻣﻦ ‪ widget‬اﻟﺘﻲ ﺗﺪﻋﻢ إﯾﻤﺎءة اﻟﺴﺤﺐ ﻟﺘﺤﺮﯾﻚ ‪ widget‬ﻣﻊ ‪ widget‬اﻷﺻﻞ اﻟﺨﺎص ﺑﮫ‪.‬‬ ‫‪‬‬
‫‪ :DragTarget‬ھﻮ ﻧﻮع ﻣﻦ ‪ widget‬اﻟﺘﻲ ﯾﻤﻜﻨﮭﺎ ﻗﺒﻮل أي ‪ widget‬ﻗﺎﺑﻞ ﻟﻠﺴﺤﺐ‪.‬‬ ‫‪‬‬
‫‪ :IgnorePointer‬ھﻮ ﻧﻮع ﻣﻦ ‪ widget‬اﻟﺘﻲ ﺗﺨﻔﻲ ‪ widget‬واﻟﺘﺎﺑﻌﯿﻦ ﻟﮭﺎ ﻣﻦ ﻋﻤﻠﯿﺔ اﻛﺘﺸﺎف اﻹﯾﻤﺎءات‪.‬‬ ‫‪‬‬
‫‪ :AbsortPointer‬ھﻮ ﻧﻮع ﻣﻦ ‪ widget‬اﻟﺘﻲ ﺗﻮﻗﻒ ﻋﻤﻠﯿﺔ اﻟﻜﺸﻒ ﻋﻦ اﻹﯾﻤﺎءات ﻧﻔﺴﮭﺎ‪ .‬وﻧﺘﯿﺠﺔ ﻟﺬﻟﻚ‪ ،‬ﻻ ﯾﻤﻜﻦ ﻷي ‪ widget‬ﻣﺘﺪاﺧﻞ‬ ‫‪‬‬
‫أن ﯾﺸﺎرك ﻓﻲ ﻋﻤﻠﯿﺔ اﻛﺘﺸﺎف اﻹﯾﻤﺎءات‪ ،‬وﺑﺎﻟﺘﺎﻟﻲ‪ ،‬ﻻ ﯾﺘﻢ رﻓﻊ أي ﺣﺪث‪.‬‬
‫‪ :Scrollable‬ھﻮ ﻧﻮع ﻣﻦ ‪ widget‬اﻟﺘﻲ ﺗﺪﻋﻢ ﺗﻤﺮﯾﺮ اﻟﻤﺤﺘﻮى اﻟﻤﺘﻮﻓﺮ داﺧﻞ ‪.widget‬‬ ‫‪‬‬
 Multiple Gesture Example 4,6
.Flutter ‫ ﺳﻨﺮى ﻛﯿﻔﯿﺔ ﻋﻤﻞ اﻹﯾﻤﺎءات اﻟﻤﺘﻌﺪدة ﻓﻲ ﺗﻄﺒﯿﻘﺎت‬،‫ﻓﻲ ھﺬا اﻟﻘﺴﻢ‬
‫ ﯾﺘﻢ اﻟﺘﻌﺎﻣﻞ ﻣﻊ ﻛﻞ ﺷﻲء ﯾﺪوﯾًﺎ ﺑﺎﺳﺘﺨﺪام‬،‫ ھﻨﺎ‬.(two containers parent and child) ‫ ﯾﺘﻜﻮن ھﺬا اﻟﺘﻄﺒﯿﻖ اﻟﺘﺠﺮﯾﺒﻲ ﻣﻦ‬
.‫"اﻟﻤﺨﺼﺺ‬GestureRecognizer" ‫"و‬RawGestureDetector"
‫" ﻟﻘﺎﺋﻤﺔ اﻹﯾﻤﺎءات وﯾﻘﻮم ﺑﺈﻧﺸﺎء‬AllowMultipleGestureRecognizer" ‫ اﻟﻤﺨﺼﺺ ﺧﺎﺻﯿﺔ‬GestureRecognizer ‫ ﯾﻮﻓﺮ‬
"GestureRecognizerFactoryWithHandlers".
.‫ ﻓﺈﻧﮫ ﯾﻄﺒﻊ اﻟﻨﺺ إﻟﻰ وﺣﺪة اﻟﺘﺤﻜﻢ‬، onTap()‫ ﻋﻨﺪ اﺳﺘﺪﻋﺎء اﻟﺤﺪث‬،‫ ﺑﻌﺪ ذﻟﻚ‬

:‫اﻟﻜﻮد‬

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

void main() {
runApp(
MaterialApp(
title: 'Multiple Gestures',
home: Scaffold(
appBar: AppBar(
title: const Text('Multiple Gestures'),
),
body: const DemoApp(),
),
),
);
}
class DemoApp extends StatelessWidget {
const DemoApp({super.key});
@override
Widget build(BuildContext context) {
return RawGestureDetector(
gestures: {
AllowMultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<
AllowMultipleGestureRecognizer>(
() => AllowMultipleGestureRecognizer(),
(AllowMultipleGestureRecognizer instance) {
instance.onTap = () => print('It is the parent container gesture');
},
)
},
behavior: HitTestBehavior.opaque,
//Parent Container
child: Container(
color: Colors.redAccent,
child: Center(
//Now, wraps the second container in RawGestureDetector
child: RawGestureDetector(
gestures: {
AllowMultipleGestureRecognizer:
GestureRecognizerFactoryWithHandlers<
AllowMultipleGestureRecognizer>(
() => AllowMultipleGestureRecognizer(), //constructor
(AllowMultipleGestureRecognizer instance) {
instance.onTap = () => print('It is the nested container');
 },
)
},
//Creates the nested container within the first.
child: Container(
color: Colors.amber,
width: 250.0,
height: 350.0,
),
),
),
),
);
}}
class AllowMultipleGestureRecognizer extends TapGestureRecognizer {
@override
void rejectGesture(int pointer) {
acceptGesture(pointer);
}
}

:‫اﻟﻨﺎﺗﺞ‬

.‫ وﺳﯿﻈﮭﺮ اﻹﺧﺮاج اﻟﺘﺎﻟﻲ ﻋﻠﻰ وﺣﺪة اﻟﺘﺤﻜﻢ اﻟﺨﺎﺻﺔ ﺑﻚ‬،‫ اﺿﻐﻂ ﻋﻠﻰ اﻟﻤﺮﺑﻊ اﻷﺻﻔﺮ‬،‫ﺑﻌﺪ ذﻟﻚ‬

I/flutter ( 7093): It is the nested container

4 I/flutter ( 7093): It is the parent container gesture