Book Flutter

‫دورة برمجة تطبيقات الجوال باستعمال إطار الفالتر‬
‫ولغة البرمجة الدارت‬
‫د‪ .‬أمير محمد المنصف الحمامي‬

‫قسم علوم الحاسب‬
‫كلية العلوم والدراسات اإلنسانية بعفيف‬
‫‪amir.hammami@su.edu.sa‬‬
‫‪(Whatsapp) 0590320806‬‬
‫التاريخ‪ :‬شعبان ‪2441‬‬
‫‪1‬‬
‫الفهرس‬
6 .......................................................................................................... Dart ‫لغة البرمجة الدارت‬ 1
6 ................................................................................................................................................ main() 1.1
6 .................................................................................................................. Variables ‫المتغيرات‬ 1.2
7 ........................................................................................ Data Types ‫أنواع المتغيرات‬ 1.2.1
21 .......................................................................................................... Dart Conditional Operators 1.3
21 .................................................................................................................................... If Statement 1.4
24 ........................................................................................................................IF – Else Statement 1.5
21 ............................................................................................ IF…Else and Else…IF... Statement 1.6
21 ..................................................................................................... IF Else and Logical Operators 1.7
26 ........................................................................................................................................ For Loops 1.8
27 ................................................................................................................................... While Loops 1.9
27 ......................................................................................................................... Do-while Loops 1.10
21 ......................................................................................................................... Break Statement 1.11
21 .............................................................................................................. Switch Case Statement 1.12
21 .....................................................................................................................................Functions 1.13
12 ........................................................................................................................ Void Function 1.13.1
12 ........................................................................................... Function Returning Expression 1.13.2
11 ............................................................................................. Functions and Variable Scope 1.13.3
11 .................................................................................... Object-Oriented Programming (OOP) 1.14
11 ........................................................................... Providing Constructors for Your Classes 1.14.1
16 ................................................................................................. Class — Getters and Setters 1.14.2
17 .................................................................................................................... Class Inheritance 1.14.3
17 ........................................................................................................................ Abstract Class 1.14.4
11 .................................................................................................................................. ‫مقدمة للفالتر‬ 2
11 ........................................................................................................................... ‫ماهو الفالتر‬ 2.1
11 ..................................................................................SDK ‫ فالتر‬:‫تثبيت بيئة البرمجة‬ 2.2
11 .......................................Visual Studio Code Editor ‫ المحرر‬:‫تثبيت بيئة البرمجة‬ 2.3
11 ...................................................................... Android Studio IDE :‫تثبيت بيئة البرمجة‬ 2.4
11 ......................................................................................Xcode IDE :‫تثبيت بيئة البرمجة‬ 2.5
2
11 .................................................................................................. ‫إنشاء مشروع فالتر جديد‬ 1.6
11 ...................................................................................... Android Emulator ‫تثبيت المحاكي‬ 2.7

11 .......................................................................................... ‫تشغيل التطبيق على المحاكي‬ 1.1
11 ................................................................................ ‫تشغيل التطبيق على جوال حقيقي‬ 1.1
11 ............................................................. Flutter Widgets ‫مقدمة إلى عناصر الفالتر‬ 2.10

11 ................................................ Flutter Widgets Fundamentals ‫العنصر األساسية للفالتر‬ 3
11 .......................................................................................................................... Scaffold‫السقالة‬ 3.1
14 ......................................................................................................... Container Widget ‫عنصر‬ 3.2
42 ................................................................... Column and Row Widgets ‫الصفوف واالعمدة‬ 1.1
15 ........................................................................................................Button Widgets ‫األزرار‬ 3.4

12 ....................................................................... Floating Action Button ‫زر اإلجراء العائم‬ 1.4.2
14 .......................................................................................................................... RaisedButton 3.4.2

65 ............................................................................................................................... FlatButton 1.4.1
61 .............................................................................................................................. IconButton 3.4.4

61 ....................................................................................................................... MaterialButton 3.4.5
67 ....................................................................................................................... Toggle Buttons 3.4.6
75 ................................................................................................................... DropdownButton 3.4.7
71 ......................................................................................................................... OutlineButton 3.4.8
71 ................................................................................................................................ ButtonBar 1.1.1
74 ................................................................................................................. PopupMenuButton 1.4.1
76 .................................................................. Navigation and Routing ‫اإلنتقال بين الواجهات‬ 4

77 .......... Navigate to a New Screen and Back ‫اإلنتقال إلى واجهة جديدة والرجوع‬ 4.2
11 ................... Navigate with Named Routes ‫اإلنتقال باستعمال المسارات المحددة‬ 4.1
11 ........................... Send and Return Data Among Screens ‫نقل البيانات بين الصفحات‬ 4.1
15 .............................................................................................. Animate a Widget Across Screens 4.4

11 ..................................................................................................... WebView ‫عنصر الويب‬ 4.5
11 ............................................................................................................................... ‫عناصر متقدمة‬ 1
11 ................................................................... BottomNavigationBar ‫شريط التنقل السفلي‬ 5.1

17 ......................................................................................... circular_bottom_navigation ‫مكتبة‬ 1.2.2
17 ................................................... DefaultTabController , TabBar , and TabBarView Widgets 1.1
255 ............................................................................................................................ ListTile Widget 1.1
3
251 .......................................................................................................................... ListView Widget 1.4
254 ............................................................................................................................. Drawer Widget 5.5

251 ........................................................................................................................ DataTable Widget 1.6
222 ................................................................................................................ SelectableText Widget 1.7
221 ................................................................................................................................ Stack Widget 5.8

226 ........................................................................................................................ Text Field Widget 1.1
211 ..............................................................................................................................‫طريقة ثانية‬ 1.1.2
216 .......................................................................................... TextEditingController ‫استعمال‬ 5.10

211 ...................................................................................... FocusNode ‫ و‬AutoFocus ‫استعمال‬ 5.11
211 ....................................................................................................... TextFormField ‫حقل النص‬ 1.21
245 .............................................................................. LoginForm ‫ واجهة تسجيل الدخول‬1 ‫مثال‬ 5.12.1

247 ............................................................................ LoginScreen ‫ واجهة تسجيل الدخول‬2 ‫مثال‬ 5.12.2
212 .............................................................. CheckboxGroup and RadioButtonGroup Widgets 5.13
211 ................................................................................................. Radio Widget ‫زر الراديو‬ 5.14
217 ............................................................................................... Switch Widget ‫زر المفتاح‬ 5.15
211 ......................................................................................................... Slider Widget ‫المنزلق‬ 5.16
261 ................................................................................................. DatePicker ‫تحديد التاريخ‬ 5.17
261 ................................................................................................... TimePicker ‫تحديد الوقت‬ 5.18
261 ............................................................................................................... CupertinoDatePicker 5.19
275 ............................................................................................... flutter_datetime_picker ‫مكتبة‬ 1.21.2
271 .............................................................................................................. Bottom Sheet Widget 5.20

271 ..................................................................................................... Modal Bottom Sheet - 5.20.1
271 ...................................................................................................... Persistent Bottom Sheet 5.20.2
271 ......................................................................................................... Expansion Panel Widget 5.21
215 .................................................................................................................... Snack Bar Widget 5.22
211 ................................................................................................................................................ Firebase 6
211 .................................................................................................................................................... ‫الموقع‬ 7
211 ................................................................................................... Adding a Google Map Marker 7.1

217 ...................................................................................................................... Google Map Types 7.2
211 ................................................................................ Moving the Camera (Camera Animation) 7.3
4
211 ............................................................................................... Capture an App User’s Location 7.4
5
Dart ‫ لغة البرمجة الدارت‬1
/https://dartpad.dev :‫ بإمكاننا استعمال هذا الموقع‬.‫ نحتاج إلى كتابة األكواد وتنفيذها‬،‫لنتعلم لغة البرمجة الدارت‬
main() 1.1
main() ‫يبدأ تشغيل البرنامج من خالل األوامر الموجودة في الدالة‬
void main() {
print('Welcome to Flutter Course');
}
Variables ‫المتغيرات‬ 1.1
main() {
var x = 1;
print(x);
}
Output:
Welcome to Flutter Course
1
var y = 2;
void main() {
var x = 1;
print(x);
print(y);
}
Output:
Welcome to Flutter Course
1
2
6
Data Types ‫ أنواع المتغيرات‬1.1.1
String
void main() {
String firstName = 'Saleh';
print(firstName);
String lastName = "Otaibi";

print(lastName);
}
Output
Saleh
Otaibi
Boolean
void main() {
bool isGreater;
isGreater = 12 > 5;
print(isGreater);
}
Output
true
Numbers
Int and Double
void main() {
int x = 3;
int y = 2;
int z = x + y;
print(z);
}
Output
5
void main() {
7
double height = 1.5;
double width = 2.6;
double area = height * width;
print(area);
}
Output
3.9000000000000004
num to declare an integer or a double number:

void main() {
num x = 1;
num y = 1.5;
num z = x * y;
print(z);
}
Output
1.5
Lists
void main() {
var test_list = [7, 3, 100, 50, 9, 30, 8, 11, 6, -4];
print(test_list[2]);
}
Output
100
void main() {
List<int> test_list = [7, 3, 100, 50, 9, 30, 8, 11, 6, -4];
print(test_list[2]);
}
8
Output
100
void main() {
var test_list = [7, 3, 100, 50, 9, 30, 8, 11, 6, -4];
print(test_list);
}
Output
[7, 3, 100, 50, 9, 30, 8, 11, 6, -4]
void main() {
var test_list = [7, 3, 100, 50, 9, 30, 8, 11, 6, -4];
test_list.add(400);
print(test_list);
}
Output
[7, 3, 100, 50, 9, 30, 8, 11, 6, -4, 400]
void main() {
var test_list = [7,3,100,50,9,30,8,11,6,-4];
print(test_list.length);
}
Output
10
void main() {
var test_list = [7, 3, 100, 50, 9, 30, 8, 11, 6, -4];
test_list.forEach((x) {
print(x);
});
}
Output
7
3
100
50
9
9
30
8
11
6
-4
Maps
maps is an interface designed to manipulate a collection of keys which points to values.
void main() {
var info = {
'UserName': 'amir.hammami@su.edu.sa',
'Password': 'pass123',
};
print(info);
}
Output
{UserName: amir.hammami@su.edu.sa, Password: pass123}
void main() {
var info = new Map();
info['UserName'] = 'amir.hammami@su.edu.sa';
info['Password'] = 'afif@123';
info['Country'] = 'KSA';
info['City'] = 'Afif';
print(info);
}
Output
{UserName: amir.hammami@su.edu.sa, Password: afif@123, Country: KSA, City: Afif}
Explicitly and Implicitly Data type

void main() {
var x = 10; // implicitly Integer number
int y = 20; // explicitly Integer number
var city = "Afif"; // implicitly String
String country = "KSA"; // explicitly String
}
10
Input of Information to Dart Program
import 'dart:io';
void main() {
print('=============================');
print('Please enter your full name:');
String Full_Name=stdin.readLineSync();
print('Hello:$Full_Name');
print('=============================');
}
import 'dart:io';
void main() {
print('Please enter the first number:');
int num1=int.parse(stdin.readLineSync());
print('Please enter the second number:');
int num2=int.parse(stdin.readLineSync());
var sum=num1+num2;
print('The sum result = $sum');
}
Writing Comments
// The following code to input data to Dart program
/*
*/
11
1.3 Dart Conditional Operators
void main() {
int x = 3;
int y = 5;
print(x == y);
}
Output
false
void main() {
var Age = 40;
var x = Age > 60 ? "Allow" : "Deny";
print(x);
}
12
Output
Deny
void main() {
var x = null;
var y = 10;
var z = x ?? y;
print(z);
}
Output
10
void main() {
int x = 5;
print(x is bool);
}
Output
false
1.4 If Statement
void main() {
int x = 10;
if (x > 5) {
print("Welcome, I am If statement running now ......");
}
print('The End');
}
Output
Welcome, I am If statement running now ......
The End
void main() {
int x = 2;
if (x > 5) {
13
}
print('The End');
}
Output
The End
1.5 IF – Else Statement
void main() {
int x = 10;
if (x > 30) {
} else {
print("Welcome, I am Else statement running now ......");
}
}
Output
Welcome, I am Else statement running now ......
14
1.6 IF…Else and Else…IF... Statement
void main() {
var score = 85;
if (score >= 90) {
print('Grade: A');
} else if (score >= 80) {
print('Grade: B');
print('Grade: C');
print('Grade: D');
} else {
print('Grade: F');
}
}
Output
Grade: B
1.7 IF Else and Logical Operators
15
void main() {
var Age = 16;
var DOB = 1420;
if (Age >= 18 || DOB >= 1420) {
print('He is Authorized');
} else {
print('He is Not Authorized');
}
}
Output
He is Authorized
void main() {
var Age = 16;
var DOB = 1420;
if (Age >= 18 && DOB >= 1420) {
print('He is Authorized');
} else {
print('He is Not Authorized');
}
}
Output
He is Not Authorized
1.8 For Loops
void main() {
// for loop
for (var i = 0; i < 5; i++) {
print("i= $i");
}
}
Output
i= 0
i= 1
i= 2
i= 3
i= 4
16
1.9 While Loops
void main() {
var x = 1;
while (x <= 5) {
print("x= $x");
x++;
// this is the counter for the loop means x=x+1 i.e. increment x by 1
//each time
}
}
Output
x= 1
x= 2
x= 3
x= 4
x= 5
1.10 Do-while Loops
17
void main() {
var x = 1;
do {
print('x= $x');
x++;
} while (x <= 5);
}
Output
x= 1
x= 2
x= 3
x= 4
x= 5
1.11 Break Statement
void main() {
var x = 1;
do {
print('x= $x');
x++;
if (x == 3) break;
} while (x <= 5);
}
Output
x= 1
x= 2
1.12 Switch Case Statement
void main() {
int day = 2;
String today = null;
switch (day) {
case 1:
today = 'Sunday';
break;
18
case 2:
today = 'Monday';
break;
case 3:
today = 'Tuesday';
break;
case 4:
today = 'Wednesday';
break;
case 5:
today = 'Thursday';
break;
case 6:
today = 'Friday';
break;
case 7:
today = 'Saturday';
break;
default:
today = 'Invalid Day';
}
print("Today is : $today");
}
Output
Today is : Monday
1.13 Functions
main() {
PrintSomething();
}
PrintSomething() {
print("Welcome Functions !!");
print("Welcome to KSA");
}
Output
Welcome Functions !!
Welcome to KSA
Function Return Data Types

main() {
19
String course = CourseName();
print(course);
}
String CourseName() {
return "Flutter Application Development";
}
Output
Flutter Application Development
main() {
var result = SumCalculator(3, 7);
print("Sum Result = $result");
}
int SumCalculator(x, y) {
var z = x + y;
return z;
}
Output
Sum Result = 10
main() {
print("Sum Result = ${SumCalculator(3, 7)}");
}
int SumCalculator(x, y) {
var z = x + y;
return z;
}
Output
Sum Result = 10
main() {
print(age(20));
}
bool age(x) {
if (x >= 60) {
return true;
} else {
return false;
20
}
}
Output
false
1.13.1 Void Function
main() {
TheFunction();
}
void TheFunction() {
var FirstName = 'Saleh';
if (FirstName.startsWith('S')) {
print("The first name starts with S");
} else {
print("The first name does not start with S");
}
}
Output
The first name starts with S
1.13.2 Function Returning Expression
main() {
print('The Sum Result is: ${sum(3, 5)}');
print('The Multiply Result is : ${multiply(3, 5)}');
}
sum(x, y) {
var z = x + y;
return z;
}
multiply(x, y) {
var w = x * y;
return w;
}
21
main() {
var x = 3;
var y = 5;
int sum() => x + y;
int multiply() => x * y;
print('The Sum Result is : ${sum()}');
print('The Multiply Result is : ${multiply()}');
}
Output
The Sum Result is: 8
The Multiply Result is : 15
1.13.3 Functions and Variable Scope
var name = 'Microsoft';

main() {
CompanyName(name);
}
CompanyName(name) {
print('My Company Name is : $name');
}
Output
My Company Name is : Microsoft

main() {
CompanyName(name);
}
CompanyName(name) {
var name = 'Google';
}
Output
My Company Name is : Google
22
main() {
CompanyName('Flutter');
}
CompanyName(name) {
}
Output
My Company Name is : Flutter
1.14 Object-Oriented Programming (OOP)
class car {
String type;
String color;
int MaxSpeed;
int NumOfSeats = 4;
}
main() {
var toyota = new car();
toyota.MaxSpeed = 200;
toyota.color = "red";
toyota.type = "Camry";
print("Car Type is: ${toyota.type}");
print("Number of Seats is : ${toyota.NumOfSeats}");
23
}
Output
Car Type is: Camry
Number of Seats is : 4
class car {
String type;
String color;
int MaxSpeed;
int NumOfSeats = 4;
}
main() {
toyota.NumOfSeats = 7;
print("Car Type is: ${toyota.type}");

}
Output
Car Type is: Camry
Adding Methods to Classes

class car {
String type;
String color;
int MaxSpeed;
int NumOfSeats = 4;
void CarSpeed() {
print("Car Speed is : $MaxSpeed");
}
}
main() {
24
toyota.NumOfSeats = 7;
toyota.CarSpeed();
}
Output
Car Speed is : 200
1.14.1 Providing Constructors for Your Classes
class car {
String type;
String color;
int MaxSpeed;
int NumOfSeats;
car(type, color, MaxSpeed, NumOfSeats) {

this.type = type;
this.color = color;
this.MaxSpeed = MaxSpeed;
this.NumOfSeats = NumOfSeats;
}
}
main() {
var toyota = new car("Camery", "red", 200, 5);
print("Car Type is :${toyota.type}");
print("Number of Seats is :${toyota.NumOfSeats}");
}
Output
Car Type is :Camery
Number of Seats is :5
class car {
String type;
String color;
int MaxSpeed;
int NumOfSeats;
car(this.type, this.color, this.MaxSpeed, this.NumOfSeats);
25
}
main() {
var toyota = new car("Camery", "red", 200, 5);
}
class car {
String type;
String color;
int MaxSpeed;
int NumOfSeats;
car.initialize() {
type = "Mini Van";
color = "Green";
MaxSpeed = 230;
NumOfSeats = 2;
}
}
main() {
var toyota = new car.initialize();
}
Output
Car Type is :Mini Van
Number of Seats is :2
1.14.2 Class — Getters and Setters
class car {
String type;
String color;
int MaxSpeed;
int NumOfSeats;
set setType(String value) => type = value; //setter
String get getType => type; //getter
}
26
main() {
toyota.setType = "Bus";
print(toyota.getType);
}
Output
Bus
1.14.3 Class Inheritance
class Student {
String Name;
String Address;
int TelNumber;
String Email;
}
class Teacher extends Student {}
main() {
var trainer = new Teacher();
trainer.Email = "test@gmail.com";
trainer.TelNumber = 123456789;
print("Email Address : ${trainer.Email}");
print("Telephone Number: ${trainer.TelNumber}");
}
Output
Email Address : test@gmail.com
Telephone Number: 123456789
1.14.4 Abstract Class
abstract class Student {

contactInfo();
}
class ITStudent extends Student {

@override
contactInfo() {
// TODO: implement contactInfo
27
print("Dart fundamentals");
}
}
main() {
var SoftwareStudent = new ITStudent();
SoftwareStudent.contactInfo();
}
Output
Dart fundamentals
abstract class Student {

contactInfo();
CourseInfo() {
print("Flutter Application Development Course");
}
}
class ITStudent extends Student {

@override
contactInfo() {
// TODO: implement contactInfo
print("Dart fundamentals");
}
}
main() {
var SoftwareStudent = new ITStudent();
SoftwareStudent.contactInfo();
SoftwareStudent.CourseInfo();
}
Output
Dart fundamentals
Flutter Application Development Course
28
‫‪ 1‬مقدمة للفالتر‬
‫ماهو الفالتر‬ ‫‪1.1‬‬
‫فالتر هو )‪ (SDK‬للهاتف المحمول أي حزمة تطوير تطبيقات الهواتف الذكية‪ ،‬يسمح لك بكتابة تطبيق واحد وتترجم لكل من ‪ Android‬و‬
‫‪IOS.‬يعتبر فالتر ‪ Flutter‬اطار عمل حسب التعريف الرسمي الطار العمل من ويكيبيديا‬
‫تم انشاء اطار عمل فالتر ‪ Flutter‬من الصفر واستخدم لكتابته وبنائه لغة ‪ Dart‬ولغة ‪ C++‬ويعتبر احدة من افضل اللغات المستخدمة في‬
‫برمجة تطبيقات الهواتف الذكية ‪ ،‬و ذلك لما تحتويه من الكثير من المميزات و االضافات الرائعة ‪.‬‬
‫وهي من انتاج شركة جوجل خيث تم عرضها الول مرة في العام ‪.1521‬‬
‫منذ ذلك الوقت كانت شركة ‪ Flutter‬في طور البيتا و بقيت في هذه المرحلة حتى تم إطالقها الرسمي في ديسمبر ‪، 1521‬‬
‫ومنذ ذلك الحين يزداد الضجيج حول هذا اللغة قوة‪.‬‬
‫و تعد هذه اللغة من أفضل ‪ 22‬عملية إعادة شراء برمجيات تعتمد على النجوم في متجر ‪، GitHub‬‬
‫حيث شهدنا بالفعل آالف التطبيقات المصممة بفالتر التي يتم نشرها على متاجر التطبيقات‪.‬‬
‫يستخدم اطار عمل فالتر في األساس لتطوير واجهات االستخدام ‪ UI‬ويتعاون مع لغة البرمجة ‪ Dart‬للتعامل مع العمليات البرمجية‬
‫‪.BackEnd‬‬
‫تثبيت بيئة البرمجة‪ :‬فالتر ‪SDK‬‬ ‫‪1.1‬‬
‫تثبيت بيئة البرمجة‪ :‬المحرر ‪Visual Studio Code Editor‬‬ ‫‪1.2‬‬
‫تثبيت بيئة البرمجة‪Android Studio IDE :‬‬ ‫‪1.2‬‬
‫تثبيت بيئة البرمجة‪Xcode IDE :‬‬ ‫‪1.2‬‬
‫إنشاء مشروع فالتر جديد‬ ‫‪1.2‬‬
‫تثبيت المحاكي ‪Android Emulator‬‬ ‫‪1.2‬‬
‫تشغيل التطبيق على المحاكي‬ ‫‪1.2‬‬
‫تشغيل التطبيق على جوال حقيقي‬ ‫‪1.2‬‬
‫‪ 1.12‬مقدمة إلى عناصر الفالتر ‪Flutter Widgets‬‬
‫‪ 2‬العنصر األساسية للفالتر ‪Flutter Widgets Fundamentals‬‬
‫السقالة ‪Scaffold‬‬ ‫‪2.1‬‬
‫عند إنشاء مشروع جديد‪ ،‬بإمكانك إضافة واجهة أساسية تسمى السقالة ‪ .Scaffold‬هذا العنصر يعمل كوعاء لعناصر أخرى مثل شريط المهام‬
‫كماهو موضح في هذه الصورة‪:‬‬
‫‪29‬‬
.‫سنقوم اآلن بإنشاء مشروع فالتر جديد‬
:‫ ونقوم بإضافة الكود التالي‬main.dart ‫ بعد ذلك نفتح ملف‬.1
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {

@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return Container();
}
}
30
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: Text(
'‫'مرحبا‬,
textDirection: TextDirection.rtl,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 40.0,
),
),
),
),
);
}
:‫ نتحصل على الواجهة التالية‬.‫ ثم نقوم بتشغيل التطبيق في المحاكي‬.2
‫ بما أن النص باللغة العربية فنحتاج إلى إعتماد الطريقة العربية من اليمين إلى اليسار و ذلك من خالل تثبيت‬.3
:‫ ونكتب الكود التالي‬pubspec.yaml ‫ نفتح ملف‬.flutter_localizations ‫مكتبة‬
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
31
:main.dart ‫بعد ذلك نقوم بالتعديالت التالي في ملف‬
import 'package:flutter_localizations/flutter_localizations.dart';

@override
}

@override
return Container();
}
}
void main() {
runApp(
MaterialApp(
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
Locale("ar", "SA"),
],
locale: Locale("ar", "SA"),
home: Scaffold(
appBar: AppBar(),
body: Align(
alignment: Alignment.topRight,
child: Text(
'‫'مرحبا‬,
textDirection: TextDirection.rtl,
style: TextStyle(
fontSize: 40.0,
),
),
),
),
),
);
}
:‫ نتحصل على الواجهة التالي‬،‫بعد تشغيل الكود الجديد‬
32
‫‪ .4‬اآلن بإمكانكم إضافة خصائص أخرآ مثل عنوان الواجهة وتغيير لون خلفية شريط التطبيقات ‪:AppBar‬‬
‫(‪appBar: AppBar‬‬
‫‪'),‬أول تطبيق'(‪title: Text‬‬
‫‪centerTitle: true,‬‬
‫‪backgroundColor: Colors.green,‬‬
‫‪),‬‬
‫فنتحصل على الواجهة التالية‪:‬‬
‫‪ .5‬كذلك باإلمكان تغيير لو ن خلفية السقالة نفسها‪:‬‬
‫(‪home: Scaffold‬‬
‫‪backgroundColor: Colors.amberAccent,‬‬
‫(‪appBar: AppBar‬‬
‫والنتيجة هي‪:‬‬
‫‪33‬‬
Container Widget ‫عنصر‬ 2.1
.HTML ‫ في برمجة صفحات الويب‬Div tag ‫ يشبه‬Container ‫عنصر‬
:‫سننطلق من مشروع فارغ‬

@override
}

@override
return Container();
}
}
void main() {
runApp(
MaterialApp(
],
supportedLocales: [
Locale("ar", "SA"),
],
home: Scaffold(
backgroundColor: Colors.amberAccent,
34
appBar: AppBar(
title: Text('‫)'أول تطبيق‬,
centerTitle: true,
backgroundColor: Colors.green[500]),
),
),
);
}
:‫ مع لون الخلفية‬Container ‫أضف عنصر‬


@override
}

@override
return Container();
}
}
35
void main() {
runApp(
MaterialApp(
],
supportedLocales: [
Locale("ar", "SA"),
],
home: Scaffold(
backgroundColor: Colors.amberAccent,
appBar: AppBar(
title: Text('‫)'أول تطبيق‬,
centerTitle: true,
backgroundColor: Colors.green[500],
),
body: Container(
color: Colors.grey,
),
),
),
);
}
.‫ على كامل الواجهة‬Container ‫ وبالتالي تم إضافة‬.‫ يحتوي على لون الخلفية الرمادي‬body‫اآلن عنصر ال‬
36
:‫ كما هو موضح في الكود‬،Container‫ إلى ال‬Text ‫لو نضيف عنصر‬
body: Container(
color: Colors.grey,
child: Text(
'‫'مرحبا في دورة تعليم الفالتر‬,
style: TextStyle(
fontSize: 20.0,
),
),
),
:‫نتحصل على‬
37
:Container ‫بإمكاننا تعديل حجم عنصر‬
body: Container(
height: 80,
width: 300,
color: Colors.grey,
child: Text(
style: TextStyle(
fontSize: 20.0,
),
),
),
:‫ نتحصل على‬،‫ في جميع اإلتجاهات‬margin ‫لو نضيف ال‬

body: Container(
margin: EdgeInsets.all(30),
38
height: 80,
width: 300,
color: Colors.grey,
child: Text(
style: TextStyle(
fontSize: 20.0,
),
),
),
:‫ في جميع اإلتجاهات‬padding‫لو نضيف ال‬
body: Container(
padding: EdgeInsets.all(20.0),
height: 80,
width: 300,
color: Colors.grey,
child: Text(
style: TextStyle(
fontSize: 20.0,
),
),
),
39
.padding‫ وال‬margin‫الحظ الفرق بين ال‬
:BoxDecoration ‫ عن طريق استعمال‬Container‫لو نضيف نسق معين لل‬
body: Container(
decoration: BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
height: 80,
width: 300,
//color: Colors.grey,
child: Text(
style: TextStyle(
fontSize: 20.0,
),
),
),
:transform ‫كذلك يمكن تدوير النص باستعمال‬
40
body: Container(
transform: Matrix4.rotationZ(0.1),
Column and Row Widgets ‫الصفوف واالعمدة‬ 2.2
.‫الصفوف واالعمدة تمكن من ترتيب العناصر في واجهة التطبيق‬

:‫نبدأ من تطبيق بسيط‬

@override
}

@override
return Container();
}
}
void main() {
runApp(
MaterialApp(
],
supportedLocales: [
Locale("ar", "SA"),
],
home: Scaffold(
41
body: SafeArea(
child: Column(
children: <Widget>[],
),
),
),
),
);
}
:‫ثم نقوم بإضافة عناصر للعمود كما هو موضح في الكود التالي‬

@override
}

@override
42
return Container();
}
}
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Text('Data 1'),
Text('Data 2'),
Container(
child: Text('Data 3'),
color: Colors.grey,
margin: EdgeInsets.only(left: 20.0),
height: 50.0,
width: 70.0,
),
Container(
child: Text('Data 4'),
color: Colors.amber,
margin: EdgeInsets.only(left: 20.0),
height: 50.0,
width: 70.0,
),
],
),
),
),
debugShowCheckedModeBanner: false,
),
);
}
43
.‫ لكن يمكن تغيير ذلك وعرض العناصر من أسفل إلى أعلى‬.‫ يتم عرض العناصر من أعلى إلى أسفل‬،‫حاليا‬
child: Column(
verticalDirection: VerticalDirection.up,
:‫تعالوا نستعرض بعض طرق ترتيب العناصر‬
mainAxisAlignment: MainAxisAlignment.start .1
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.settings),
44
],
),
),
),
),
);
}
mainAxisAlignment: MainAxisAlignment.end .2
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
45
],
),
),
),
),
);
}
mainAxisAlignment: MainAxisAlignment.spaceBetween .3
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
46
children: <Widget>[
],
),
),
),
),
);
}
mainAxisAlignment: MainAxisAlignment.spaceEvenly .4
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
47
],
),
),
),
),
);
}
crossAxisAlignment: CrossAxisAlignment.stretch ‫يمكن إضافة‬

child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
48
:‫بإمكان إستعمال هذه الخصائص مع عنصر الصف‬
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: SafeArea(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
],
),
),
),
),
);
}
49
Button Widgets ‫األزرار‬ 2.2
:‫تحتوي منصة فالتر على أنواع عديدة من االزرار‬

FloatingActionButton -
RaisedButton -
FlatButton -
IconButton -
MaterialButton -
Toggle Buttons -
DropdownButton -
OutlineButton -
ButtonBar -
PopupMenuButton -
50
Floating Action Button ‫ زر اإلجراء العائم‬2.2.1
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {

// This widget is the root of your application.
@override
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {

MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {

String _value = '';
void _onClicked() => setState(() => _value = new DateTime.now().toString());
@override
return Scaffold(
appBar: AppBar(
title: Text('Floting Action Button'),
),
floatingActionButton: FloatingActionButton(
onPressed: _onClicked,
backgroundColor: Colors.red,
mini: false,
child: Icon(Icons.timer),
),
51
body: Container(
child: Center(
child: Column(
children: <Widget>[Text(_value)],
),
)),
);
}
}
‫تغيير مكان الزر‬

final String title;
@override
52
}

String _value = '';
void _onClicked() => setState(() => _value = new DateTime.now().toString());
@override
return Scaffold(
appBar: AppBar(
title: Text('Floting Action Button'),
),
onPressed: _onClicked,
mini: false,
child: Icon(Icons.timer),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
body: Container(
child: Center(
child: Column(
children: <Widget>[Text(_value)],
),
)),
);
}
}
53
‫روابط مفيدة‬
https://api.flutter.dev/flutter/material/FloatingActionButton-class.html
https://pub.dev/packages/fab_circular_menu
RaisedButton 2.2.1
2 ‫مثال‬
void main() {
runApp(MyApp());
}

@override
54
return MaterialApp(
theme: ThemeData(
),
home: MyHomePage(title: 'Flutter RisedButton Demo'),
);
}
}

final String title;
@override
}

String _value = 'Welcome';
void _onPressed() {
setState(() {
_value = 'Welcome in Flutter Course';
});
}
@override
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
child: Column(
children: <Widget>[
Text(_value),
RaisedButton(
onPressed: _onPressed,
child: new Text('Click me'),
)
],
),
),
55
);
}
}
1 ‫مثال‬
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
home: MyHomePage(title: 'Flutter RisedButton Demo'),
);
}
}

final String title;
@override
}
56
void _onPressed(String v) {
setState(() {
_value = v;
});
}
@override
return Scaffold(
appBar: AppBar(
),
body: Container(
child: Column(
children: <Widget>[
Text(_value),
RaisedButton(
onPressed: () => _onPressed('Welcome in Flutter Course'),
)
],
),
),
);
}
}
1 ‫مثال‬
RaisedButton(
color: Colors.greenAccent,
onPressed: () => _onPressed('Welcome in Flutter Course'),
),
57
RaisedButton(
disabledColor: Colors.greenAccent[100],
disabledTextColor: Colors.blue[100],
onPressed: null,
),
.‫ال يمكن الضغط على الزر‬
RaisedButton(
onPressed: () => _onPressed('Welcome'),
elevation: 15.0,
),
58
RaisedButton(
splashColor: Colors.yellow[200],
onPressed: () => _onPressed('Welcome'),
elevation: 10.0,
),
:‫إضافة محيط للزر‬
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.black),
),
splashColor: Colors.yellow[200],
onPressed: () => _onPressed('Saudi Arabia'),
elevation: 10.0,
),
59
RaisedButton(
padding: EdgeInsets.all(
5.0), //distance of all the sides to the //child
borderRadius: BorderRadius.circular(0.0),
side: BorderSide(color: Colors.black)),
onPressed: () => _onPressed('Saudi Arabia'),
elevation: 10.0,
),
FlatButton 2.2.2
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
home: MyHomePage(title: 'Flutter FlatButton Demo'),
);
}
}
60
final String title;
@override
}

void _onPressed() {
setState(() {
_value = new DateTime.now().toString();
});
}
@override
return Scaffold(
appBar: AppBar(
),
body: Container(
padding: const EdgeInsets.all(32.0),
child: Center(
child: Column(
children: <Widget>[
Text(_value),
SizedBox(
height: 16.0,
),
RaisedButton(
child: new Text('RB Click me'),
),
SizedBox(
height: 16.0,
),
FlatButton(
child: Text('FB Click me'),
)
],
),
)),
);
61
}
}
FlatButton(
color: Colors.blueAccent,
textColor: Colors.white,
child: Text('FB Click me'),
),
62
IconButton 2.2.2
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

int _value = 0;
void _add() {
setState(() {
_value++;
});
}
void _subtract() {
setState(() {
_value--;
});
}
@override
return Scaffold(
63
appBar: AppBar(
),
body: Container(
child: Center(
child: Column(
children: <Widget>[
Text('Value = ${_value}'),
SizedBox(
height: 16.0,
),
IconButton(icon: new Icon(Icons.add), onPressed: _add),
IconButton(icon: new Icon(Icons.remove), onPressed: _subtract)
],
),
)),
);
}
}

@override
return Scaffold(
appBar: AppBar(
),
body: Container(
child: Center(
64
child: Column(
children: <Widget>[
Ink(
decoration: const ShapeDecoration(
color: Colors.lightBlue,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(
Icons.local_airport,
),
iconSize: 100,
onPressed: () {},
),
),
],
),
)),
);
}
}
MaterialButton 2.2.2
MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: () {},
65
color: Colors.lightBlueAccent,
child: Text(
'Log in',
style: TextStyle(color: Colors.white),
),
),
Material(
//Wrap with Material
borderRadius: BorderRadius.circular(22.0)),
elevation: 18.0,
color: Color(0xFF801E48),
clipBehavior: Clip.antiAlias, // Add This
child: MaterialButton(
minWidth: 200.0,
height: 35,
color: Color(0xFF801E48),
child: new Text('Sign up',
style:
new TextStyle(fontSize: 16.0, color: Colors.white)),
onPressed: () {},
),
),
66
Toggle Buttons 2.2.2
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

List<bool> _selections = List.generate(3, (_) => false);
@override
67
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Center(child: Text('ToggleButtons')),
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: Center(
child: ToggleButtons(
children: <Widget>[
Icon(Icons.camera),
Icon(Icons.airline_seat_individual_suite),
Icon(Icons.add_location),
],
isSelected: _selections,
onPressed: (int index) {
setState(() {
_selections[index] = !_selections[index];
});
},
),
),
),
],
),
),
);
}
}
Circular Button
68
List<bool> _selections = List.generate(3, (_) => false);
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Center(child: Text('ToggleButtons')),
),
body: Center(
child: SizedBox.fromSize(
size: Size(80, 80), // button width and height
child: ClipOval(
child: Material(
color: Colors.pink[300], // button color
child: InkWell(
splashColor: Colors.yellow, // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.linked_camera), // icon
Text("Picture"), // text
],
),
),
),
),
),
),
),
);
}
}
69
DropdownButton 2.2.2
.‫هذا العنصر يشبه شريط المهام أو القائمة المنسدلة التي تُمكن المستخدم من اختيار عنصر من القائمة‬

var country = ['KSA', 'Tunisa', 'Eqypt', 'Morocco'];
var firstcountry = 'KSA';
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('DropdownButtons'),
),
body: SafeArea(
child: Column(
children: <Widget>[
Center(
child: SafeArea(
child: Text(
70
"Welcome to Flutter course",
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.black,
fontSize: 25.0),
),
),
),
DropdownButton<String>(
items: country.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(dropDownStringItem),
);
}).toList(),
onChanged: (String newUserValue) {
setState(() {
this.firstcountry = newUserValue;
});
},
value: firstcountry,
// Here, firstcountry variable value is KSA.
// value:firstcountry means, the default country value which will
// appear to the app user.
),
// End of DropdownButton Code //
],
),
),
),
);
}
}
71
OutlineButton 2.2.2
.‫ مع إضافة محيط رمادي‬FlatButton ‫ يشبه‬OutlineButton

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
),
body: SafeArea(
child: Column(
children: <Widget>[
Center(
child: SafeArea(
child: Text(
style: TextStyle(
fontSize: 20.0),
),
),
),
OutlineButton(
shape: StadiumBorder(),
highlightedBorderColor: Colors.blue,
child: Text('Outline Button'),
onPressed: () {},
),
72
],
),
),
),
);
}
}
ButtonBar 1.1.1

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Buttons'),
),
body: SafeArea(
child: Column(
children: <Widget>[
ButtonBar(
alignment: MainAxisAlignment.center,
children: [
OutlineButton(
child: Text('Flights'),
onPressed: () {},
),
OutlineButton(
child: Text('Hotels'),
73
onPressed: () {},
),
OutlineButton(
child: Text('Cars'),
onPressed: () {},
),
],
),
],
),
),
),
);
}
}
PopupMenuButton 2.2.2
.‫ يفتح قائمة منسدلة‬،‫ عندما يضغط المستخدم عليه‬.‫يمكن إضافة هذا الزر في أي مكان من التطبيق‬

@override
74
return MaterialApp(
home: Scaffold(
appBar: AppBar(
actions: <Widget>[
PopupMenuButton(
onSelected: choiceAction,
itemBuilder: (BuildContext context) {
return Item.choices.map((choice) {
return PopupMenuItem(
value: choice,
child: Text(choice),
);
}).toList();
},
)
],
),
body: SafeArea(
child: Column(
children: <Widget>[
Center(
child: SafeArea(
child: Text(
style: TextStyle(
fontSize: 20.0),
),
),
),
],
),
),
),
);
}
void choiceAction(choice) {
if (choice == Item.Inbox) {
print('Inbox');
} else if (choice == Item.SentItems) {
print('Sent Items');
} else if (choice == Item.JunckEmail) {
print('Junck E-mail');
} else if (choice == Item.SignOut) {
75
print('Sign Out');
}
}
}
class Item {
static const Inbox = 'Inbox';
static const SentItems = 'Sent Items';
static const JunckEmail = 'Junck E-mail';
static const SignOut = 'Sign Out';
static const List choices = [Inbox, SentItems, JunckEmail, SignOut];
}
Navigation and Routing ‫ اإلنتقال بين الواجهات‬2
76
Navigate to a New Screen and Back ‫اإلنتقال إلى واجهة جديدة والرجوع‬ 2.1
‫ تمكن من االنتقال إلى مسار ثاني‬Navigator.push()

.‫ تمكن من الرجوع إلى المسار االول‬Navigator.pop()
.‫ ونبين لكم كيفية اإلنتقال بين هذه الصفحات‬.‫ سنقوم من برمجة ثالث صفحات أو ثالث واجهات‬،‫في هذا المثال‬
main.dart :‫الملف األول‬
import './screen1.dart';
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
);
77
}
}

final String title;
@override
}

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Navigation'),
),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
color: Colors.blue,
child: Text('Go To Screen 1'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return Screen1();
}),
);
},
),
],
),
),
),
);
}
}
78
‫من خالل هذه الواجهة االولى‪ ،‬يمكن النتقال إلى الواجهة الثانية بالضغط على الزر‪.‬‬
‫(‪Navigator.push‬‬
‫‪context,‬‬
‫{ )‪MaterialPageRoute(builder: (context‬‬
‫;)(‪return Screen1‬‬
‫‪}),‬‬
‫;)‬
‫هذا الجزء من الكود هو المسؤول على االنتقال إلى الصفحة التالية‪.‬‬
‫‪79‬‬
screen1.dart :‫الملف الثاني‬
class Screen1 extends StatelessWidget {

@override
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('Screen 1'),
),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
Navigator.push(
context,
return Screen2();
}),
);
},
),
],
)),
);
}
}
80
screen2.dart:‫الملف الثالث‬

@override
return Scaffold(
appBar: AppBar(
),
body: Center(
child: Column(
children: <Widget>[
81
RaisedButton(
child: Text('Return'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
);
}
}
82
.‫ سيتم غلق الصفحة وبالتالي الرجوع إلى الصفح الثانية‬،Return ‫ إذا ضغطنا على‬،‫من خالل هذه الواجهة الثالثة‬
.‫هذا الجزء من الكود هو المسؤول عن غلق الصفحة الحالية‬
// Move from SplashScreen to Another screen after 500 ms

import 'dart:async';
Timer _timer;
@override
void initState() {
_timer = Timer(Duration(milliseconds: 500), () {
// SOMETHING: pushReplacement
});
super.initState();
}
@override
void dispose() {
if (_timer != null) {
_timer.cancel();
_timer = null;
}
super.dispose();
}
‫كذاك‬
RaisedButton(
color: Colors.blue,
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) =>
return Screen1()),
);
},
),
Navigate with Named Routes ‫اإلنتقال باستعمال المسارات المحددة‬ 2.1
:‫ تمكن من النتقال إلى المسار المحدد كما هو موضح في المثال التالي‬Navigator.pushNamed()
:main.dart ‫ملف‬
import './homepage.dart';
83
main() {
runApp(
MyApp(),
);
}

@override
return MaterialApp(
home: HomePage(),
routes: {
'0': (context) => Screen0(),
},
);
}
}
:‫الحظ هنا كيف كتبنا المسارات الثالثة‬

routes: {
},
:homepage.dart ‫ملف‬
class HomePage extends StatelessWidget {

@override
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
84
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
Navigator.pushNamed(context, '0');
}),
RaisedButton(
onPressed: () {
}),
RaisedButton(
onPressed: () {
}),
],
),
),
);
}
}
:‫ وذلك باستعمال الكود التالي‬.‫ يمكن اإلنتقال إلى كل واجهة حسب المسار‬،‫في أي مكان من التطبيق‬
85
:screen2.dart ،screen1.dart ،screen0.dart ‫ثم بقية الصفحات‬

@override
return Scaffold(
appBar: AppBar(
),
body: Center(
child: Column(
children: <Widget>[
86
RaisedButton(
onPressed: () {
},
),
],
)),
);
}
}
87
Send and Return Data Among Screens ‫نقل البيانات بين الصفحات‬ 2.2
.‫ نحتاج إلى نقل بيانات من واجهة إلى أخرى‬،‫في بعض األحيان‬

.‫الكود التالي يوضح طريقة نقل البيانات‬
:screen1.dart ‫ملف‬

@override
return Scaffold(
appBar: AppBar(
),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
Navigator.push(
context,
return Screen2(
firstName: 'Your name',
);
}),
);
},
),
],
)),
);
}
}
screen2.dart ‫ملف‬
88
String firstName = "";
Screen2({Key key, this.firstName}) : super(key: key);
@override
return Scaffold(
appBar: AppBar(
title: Text(firstName),
),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
},
),
],
),
),
);
}
}
89
Animate a Widget Across Screens 2.2
pubspec.yaml ‫ملف‬
assets:
- assets/images/
import './second.dart';
main() {
runApp(
MyApp(),
);
}

@override
return MaterialApp(
title: 'Transition Demo',
home: MainScreen(),
);
}
}
class MainScreen extends StatelessWidget {

@override
return Scaffold(
appBar: AppBar(
title: Text('Book Order'),
),
body: GestureDetector(
child: Hero(
tag: 'imageHero',
child: Image(
90
image: AssetImage('assets/images/book.png'),
width: 120.0,
height: 120.0,
),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) {
return Second();
}),
);
},
),
);
}
}
:second.dart ‫ملف‬
class Second extends StatelessWidget {

@override
return Scaffold(
appBar: AppBar(
title: Text('Book Pile'),
),
body: GestureDetector(
child: Center(
child: Hero(
tag: 'imageHero',
child: Image(
width: 400.0,
height: 400.0,
),
),
),
onTap: () {
},
),
);
}
}
91
‫عنصر الويب ‪WebView‬‬ ‫‪2.2‬‬
‫‪92‬‬
dependencies:
flutter:
sdk: flutter
webview_flutter: ^1.0.7
import 'package:webview_flutter/webview_flutter.dart';
main() {
runApp(
MyApp(),
);
}

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Web View'),
),
93
body: WebView(
initialUrl: 'http://al-soger.com/',
javascriptMode: JavascriptMode.unrestricted),
),
);
}
}
94
‫ عناصر متقدمة‬2
BottomNavigationBar ‫شريط التنقل السفلي‬ 2.1
.‫ لعرض شريط تنقل أسفل السقالة‬Bottom Navigation Bar ‫يتم استخدام‬
main() {
runApp(
MyApp(),
);
}

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Bar '),
),
body: Container(),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
fixedColor: Colors.white,
iconSize: 30.0,
currentIndex: 0,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
icon: Icon(Icons.access_alarm),
label: 'Alarm',
),
icon: Icon(Icons.business),
label: 'Business',
),
icon: Icon(Icons.school),
95
label: 'School',
),
],
),
),
);
}
}
:‫ممكن تغير ألوان شريط التنقل كاآلتي‬

bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
//fixedColor: Colors.white,
96
backgroundColor: Colors.black54,
selectedItemColor: Colors.white,
selectedFontSize: 19.0,
unselectedFontSize: 14.0,
iconSize: 30.0,
currentIndex: 0,
circular_bottom_navigation ‫ مكتبة‬2.1.1
circular_bottom_navigation.‫ مكتبة تسمى‬،‫يوجد في موقع المكتبات التابعة للفالتر‬

:‫هذه المكتبة تعطي شريط تنقل سفلي متميز كما هو مبين في هذا المثال‬
DefaultTabController , TabBar , and TabBarView Widgets 2.1
main.dart ‫ملف‬
import 'package:flutter/cupertino.dart';
import 'screen1.dart';
main() {
runApp(
MyApp(),
97
);
}

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Tab View'),
),
body: DefaultTabController(
length: 3,
child: Column(
children: <Widget>[
Container(
child: TabBar(
labelColor: Colors.black,
unselectedLabelColor: Colors.blue,
indicatorColor: Colors.red,
labelStyle: TextStyle(
fontFamily: 'Arial',
fontSize: 20.0),
tabs: [
Tab(text: "Home"),
Tab(text: "Orders"),
Tab(text: "Login"),
]),
),
Expanded(
child: Container(
child: TabBarView(
children: [
Container(
child: Screen1(),
),
Container(
child: Screen2(),
),
Container(
child: Screen3(),
),
],
),
),
),
],
98
),
),
),
);
}
}
:screen3.dart ،screen2.dart ،screen1.dart ‫ملف‬


@override
return Scaffold(
body: Center(
child: Container(
child: Text(
'Home',
style: (TextStyle(fontSize: 30)),
)),
),
);
}
}
99
ListTile Widget 2.2
void main() => runApp(MyApp());

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListTile Widget'),
),
body: Column(
children: <Widget>[
ListTile(
leading: Icon(Icons.phone),
title: Text('Main Title'),
subtitle: Text('This is my sub title'),
100
trailing: Icon(Icons.shopping_cart),
onTap: () => print('onTap Action'),
onLongPress: () => print('On Long Press Action'),
dense: false, // true means intensive content.
selected: true, // sets this tile as default.
enabled: true, // means that it can be tapped.
),
ListTile(
leading: Icon(Icons.school),
trailing: Icon(Icons.share),
onLongPress: () => print('On Long Press Action'),
dense: false,
selected: true,
enabled: true,
),
],
)),
);
}
}
101
ListView Widget 2.2

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListView Widget'),
),
body: ListView(
children: <Widget>[
ListTile(
102
),
ListTile(
selected: true,
),
Image(
height: 120.0,
),
],
),
),
);
}
}
103
Drawer Widget 2.2
:home.dart ‫ماف‬
class Home extends StatelessWidget {

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Drawer Widget'),
),
drawer: Drawer(),
body: Center(
child: Container(
child: Text(
'Welcome',
style: TextStyle(fontSize: 20.0),
),
),
),
),
);
}
}
import './home.dart';

@override
return MaterialApp(
home: Home(),
);
104
}
}
.‫اآلن سنضيف عناصر في القائمة‬

:home.dart ‫نغير ملف‬
class Home extends StatelessWidget {

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Drawer Widget'),
),
drawer: Drawer(
child: ListView(children: <Widget>[
ListTile(
leading: Icon(
Icons.mail,
105
color: Colors.blue,
),
title: Text(
'Inbox',
style: TextStyle(color: Colors.blue, fontSize: 20.0),
),
trailing: Icon(Icons.arrow_right),
onTap: () => print('1'),
),
ListTile(
leading: Icon(
Icons.send,
color: Colors.blue,
),
title: Text(
'Sent Items',
),
),
ListTile(
leading: Icon(
Icons.person,
color: Colors.blue,
),
title: Text(
'Profile',
),
),
ListTile(
leading: Icon(
Icons.settings,
color: Colors.blue,
),
title: Text(
'Settngs',
),
106
),
ListTile(
leading: Icon(
Icons.calendar_today,
color: Colors.blue,
),
title: Text(
'Calendar',
),
trailing: Icon(
Icons.arrow_right,
color: Colors.blue,
),
),
]),
),
body: Center(
child: Container(
child: Text(
'Welcome',
),
),
),
),
);
}
}
107
:‫نضيف عنوان‬
drawer: Drawer(
child: ListView(children: <Widget>[
Container(
height: 70.0,
child: DrawerHeader(
margin: EdgeInsets.all(2.0),
child: Text(
'Flutter course',
style: TextStyle(fontSize: 20.0, color: Colors.white),
),
decoration: BoxDecoration(color: Colors.blue),
),
),
108
DataTable Widget 2.2

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Data Table Widget'),
),
body: Center(
child: Container(
child: DataTable(columns: [
DataColumn(label: Text('Car Make')),
DataColumn(label: Text('Model')),
DataColumn(label: Text('Price')),
], rows: [
109
DataRow(
cells: [
DataCell(Text('Honda')),
DataCell(Text('2010')),
],
),
DataRow(
cells: [
],
),
DataRow(
cells: [
],
),
]),
),
)),
);
}
}
110
SelectableText Widget 2.2

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('SelectableText Widget'),
),
body: SelectableText(
'These training courses have been developed and calibrated by a team of
Android experts for some years. These courses empower application developers and IT
-
oriented employees with the skills to build advanced Android applications. After co
mpleting these courses, developer scan sit for online exams which entitle them to b
ecome Certified Android Developers.',
111
),
),
);
}
}
body: SelectableText(
'T...',
showCursor: true,
cursorColor: Colors.green,
cursorWidth: 20,
),
Stack Widget 2.2
112
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget'),
),
body: Stack(children: <Widget>[
Positioned(
bottom: -20,
right: 0,
child: Container(
color: Colors.teal,
width: 100.0,
height: 100.0,
),
),
]),
),
);
}
}
113

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget'),
),
body: Stack(
children: <Widget>[
Positioned(
top: 150,
right: 50,
child: Container(
color: Colors.teal,
width: 100.0,
height: 100.0,
114
),
),
Positioned(
top: 150,
right: 100,
child: Container(
color: Colors.yellow,
width: 100.0,
height: 100.0,
),
),
Positioned(
top: 210,
right: 160,
child: Container(
color: Colors.grey,
width: 50.0,
height: 50.0,
),
),
],
),
),
);
}
}
115
‫‪Text Field Widget‬‬ ‫‪2.2‬‬
‫هذه األداة تستعمل غالبا إلدخال بيانات النص مثل كتابة االسم وكلمة المرور‪ .‬فالتر يعتمد على ‪ TextField‬و ‪.TextFormField‬‬
‫في هذه الفقرة‪ ،‬سندرس أداة ‪ .TextField‬ثم في الفقرة الموالية‪ ،‬سندرس أداة ‪.TextFormField‬‬
‫لكن قبل ذلك سنتعرض فيما يلي إلى الفرق بين هذين األداتين‪:‬‬
‫للحصول على إدخال المستخدم ‪ TextField‬كافية‪ .‬لكن‪ ،‬إذا كنت تقوم بعمل نموذج ‪ Form‬بحيث تحتاج إلى حفظ العمليات ‪ save‬أو إعادة‬
‫تعيينها ‪ reset‬أو التحقق من صحتها ‪ ،validate‬فاستخدم ‪.TextFormField‬‬
‫إذن‪ TextField ،‬هو حقل النص األساسي بدون استعمال النموذج‪.‬‬
‫;'‪import 'package:flutter/material.dart‬‬
‫;))(‪void main() => runApp(MyApp‬‬
‫{ ‪class MyApp extends StatelessWidget‬‬

‫‪// This widget is the root of your application.‬‬
‫‪@override‬‬
‫{ )‪Widget build(BuildContext context‬‬
‫(‪return MaterialApp‬‬
‫(‪home: Scaffold‬‬
‫‪116‬‬
appBar: AppBar(
title: Text('Input Data'),
),
body: Padding(
child: Stack(
children: <Widget>[
ListView(
shrinkWrap: true,
children: <Widget>[
Text(
'Please enter the following information',
style: TextStyle(
fontSize: 22.0,
color: Colors.blue,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 10.0,
),
Row(
children: [
Text(
'Full Name:',
),
SizedBox(
width: 20.0,
),
SizedBox(
width: 220.0,
child: TextField(),
),
],
),
],
),
],
),
),
),
);
}
}
117

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Input Data'),
),
body: Padding(
child: Stack(
children: <Widget>[
ListView(
shrinkWrap: true,
children: <Widget>[
Text(
'Please enter the following information',
style: TextStyle(
118
fontSize: 22.0,
color: Colors.blue,
),
SizedBox(
height: 10.0,
),
Row(
children: [
Text(
'Full Name:',
),
SizedBox(
width: 20.0,
),
SizedBox(
width: 220.0,
child: TextField(
maxLength: 25,
style: TextStyle(fontSize: 20, color: Colors.blue),
keyboardType: TextInputType.text,
textInputAction: TextInputAction.done,
autocorrect: true,
cursorColor: Colors.red,
decoration: InputDecoration(
hintText: 'Enter your name',
border: InputBorder.none,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(7.0)),
borderSide: BorderSide(color: Colors.blue),
),
),
),
)
],
),
SizedBox(
height: 10.0,
),
// ****************Email Address ****************
Row(
children: [
Text(
'Email Address:',
),
119
SizedBox(
width: 20.0,
),
SizedBox(
width: 220.0,
child: TextField(
maxLength: 50,
keyboardType: TextInputType.emailAddress,
autocorrect: false,
icon: Icon(Icons.email),
hintText: 'Your Email',
borderRadius:
),
),
),
),
],
),
SizedBox(
height: 10.0,
),
// **************** Password ****************
Row(
children: [
Text(
'Password:',
),
SizedBox(
width: 20.0,
),
SizedBox(
width: 220.0,
child: TextField(
maxLength: 50,
obscureText: true,
autocorrect: false,
120
borderRadius:
),
),
),
),
],
),
SizedBox(
height: 10.0,
),
// **************** Telephone ****************
Row(
children: [
Text(
'Telephone:',
),
SizedBox(
width: 20.0,
),
SizedBox(
width: 220.0,
child: TextField(
maxLength: 12,
keyboardType: TextInputType.number,
autocorrect: false,
borderRadius:
),
),
),
)
],
),
],
),
121
],
),
),
),
);
}
}
‫ طريقة ثانية‬2.2.1
void main() {
runApp(MyApp());
}

@override
122
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

String _value = '';
@override
return Scaffold(
appBar: AppBar(
title: Text('Name here'),
),
body: new Container(
padding: new EdgeInsets.all(32.0),
child: new Center(
child: new Column(
children: <Widget>[
Text(_value),
TextField(
decoration: new InputDecoration(
labelText: 'Welcome ',
hintText: 'Hint',
icon: Icon(Icons.people)),
autocorrect: true,
autofocus: true,
onChanged: (value) {
setState(() => _value = 'Change: ${value}');
},
onSubmitted: (value) {
123
setState(() => _value = 'Submit: ${value}');
},
)
],
),
),
),
);
}
}
:‫يمكن تحسين الكود عن طريق إضافة دالتين‬
void main() {
runApp(MyApp());
}
124
@override
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

String _value = '';
void _onChange(String value) {

setState(() => _value = 'Change: ${value}');
}
void _onSubmit(String value) {

setState(() => _value = 'Submit: ${value}');
}
@override
return Scaffold(
appBar: AppBar(
title: Text('Name here'),
),
body: new Container(
padding: new EdgeInsets.all(32.0),
child: new Center(
child: new Column(
children: <Widget>[
Text(_value),
125
TextField(
decoration: new InputDecoration(
labelText: 'Welcome ',
hintText: 'Hint',
icon: Icon(Icons.people)),
autocorrect: true,
autofocus: true,
onChanged: _onChange,
onSubmitted: _onSubmit,
)
],
),
)),
);
}
}
TextEditingController ‫ استعمال‬2.12
‫ و ذلك باتباع‬TextEditingController ‫ نتعرف على كيفية استرداد النص الذي أدخله المستخدم في حقل النص باستخدام‬،‫في هذه الفقرة‬
:‫الخطوات التالية‬
TextEditingController.‫ إنشاء‬.１
TextField.‫ إلى‬TextEditingController ‫ إلحاق‬.２
.‫ عرض القيمة الحالية لحقل النص‬.３
:‫هذه الخطوات مجموعة في الكود التالي‬
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
126
theme: ThemeData(
),
);
}
}

final String title;
@override
}

// Create a text controller and use it to retrieve the current value
// of the TextField.
final myController = TextEditingController();
@override
void dispose() {
// Clean up the controller when the widget is disposed.
myController.dispose();
super.dispose();
}
@override
return Scaffold(
appBar: AppBar(
title: Text('Retrieve Text Input'),
),
body: Padding(
child: TextField(
controller: myController,
),
),
// When the user presses the button, show an alert dialog containing
// the text that the user has entered into the text field.
onPressed: () {
return showDialog(
context: context,
127
builder: (context) {
return AlertDialog(
// Retrieve the text the that user has entered by using the
// TextEditingController.
content: Text(myController.text),
);
},
);
},
tooltip: 'Show me the value!',
child: Icon(Icons.text_fields),
),
);
}
}
128
‫‪ 2.11‬استعمال ‪ AutoFocus‬و ‪FocusNode‬‬
‫بعض واجهات الجوال تعتمد على عدة حقول نص‪ .‬ومن المناسب عندما تظهر هذه الواجهة أن يكون النص األول يحتوي على بداية الكتابة ثم‬
‫إذا انتهى المستخدم وضغط على ‪ Enter‬في لوحة المفاتيح أن ينتقل مباشرة إلى الحقل الثاني الموالي‪.‬‬
‫فيما يلي سنستعرض مثالين لهذا االستعمال‪:‬‬
‫المثال األول‬ ‫‪1.55.5.5‬‬

‫ملف ‪ main.dart‬يحتوي على الكود التالي المتكون من حقلين نص‪.‬‬
‫‪129‬‬
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

FocusNode _focusNode;
@override
void initState() {
_focusNode = FocusNode();
super.initState();
}
@override
void dispose() {
_focusNode.dispose();
super.dispose();
}
@override
return Scaffold(
appBar: AppBar(
title: Text('Focus Node'),
130
),
body: Padding(
child: Column(
children: [
TextField(
autofocus: true,
onEditingComplete: () => _focusNode.requestFocus(),
),
SizedBox(
height: 16.0,
),
TextField(
focusNode: _focusNode,
),
],
),
),
);
}
}
131
‫في هذا المثال‪ ،‬عندنا متغير ‪ _focusNode‬نقوم بإنشائه في الدالة )(‪ initState‬ونقوم بحذفه في الدالة )(‪.dispose‬‬
‫هذا المتغير نربطه بالحقل الثاني‪.‬‬
‫في الحقل األول‪ ،‬نقوم بإعطاء الخاصية ‪ autofocus‬يساوي ‪ true‬وذلك لكي يأخذ النص بداية الكتابة عند ظهور الواجهة‪.‬‬
‫والخاصية ‪ onEditingComplete‬نعطيها الكود )(‪ _focusNode.requestFocus‬الذي من خالله يتمكن الحقل الثاني من أخذ بداية‬
‫الكتابة عندما يضغط المستخدم على ‪ Enter‬من الحقل األول‪.‬‬
‫بهذه الطريقة يتم التنقل من الحقل األول إلى الحقل الثاني‪.‬‬
‫المثال الثاني‬ ‫‪5.5.5.5‬‬

‫ملف ‪ main.dart‬يحتوي على ثالث حقول نص‪:‬‬
‫{ )(‪void main‬‬
‫;))(‪runApp(MyApp‬‬
‫}‬
‫‪132‬‬
@override
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

@override
return Scaffold(
appBar: AppBar(
title: Text('AutoFocus'),
),
body: Padding(
child: Column(
children: [
TextField(
autofocus: true,
onEditingComplete: () => FocusScope.of(context).nextFocus(),
),
SizedBox(
height: 16.0,
),
TextField(
onEditingComplete: () => FocusScope.of(context).nextFocus(),
),
SizedBox(
height: 16.0,
),
133
‫(‪TextField‬‬
‫‪onEditingComplete: () => FocusScope.of(context).unfocus(),‬‬
‫‪),‬‬
‫‪],‬‬
‫‪),‬‬
‫‪),‬‬
‫;)‬
‫}‬
‫}‬
‫في البداية عند ظهور الواجهة‪ ،‬الحقل األول يحتوي على بداية الكتابة (ما يسمى ال ‪ .)focus‬وكل مرة يضغط المستخدم على ‪ ،Enter‬ينتقل‬
‫إلي الحقل الموالي وذلك باستعمال )(‪FocusScope.of(context).nextFocus‬‬
‫في الحقل األخير ينفذ األمر )(‪ FocusScope.of(context).unfocus‬و ذلك لتختفي لوحة المفاتيح وينتهي ال ‪.focus‬‬
‫هنا يمكن مثال تنفيذ أوامر أخرى مثل تسجيل البيانات واالنتقال إلى واجهة أخرى‪.‬‬
‫إ‬
‫‪134‬‬
‫فادة‬
keyboardType: TextInputType.number,
keyboardType: TextInputType.emailAddress,
keyboardType: TextInputType.phone,
keyboardType: TextInputType.url,
TextFormField ‫ حقل النص‬2.11
reset ‫ أو إعادة تعيينها‬save ‫ ولديها ميزات خاصة تحتاج إلى حفظ العمليات‬Form ‫هذه األداة تشبه األداة السابقة لكنها تُستعمل داخل النموذج‬
.validate ‫أو التحقق من صحتها‬
:‫غالبا نحتاج إلى الخطوات التالية‬

GlobalKey ‫إنشاء نموذج باستخدام‬ -
‫ مع كيفية التحقق من صحة البيانات‬TextFormField ‫إضافة‬ -
.‫إنشاء زر للتحقق من النموذج وإرساله‬ -
dependencies:
fluttertoast: ^7.1.8
import 'package:fluttertoast/fluttertoast.dart';
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
);
}
}
135
final String title;
@override
}

final _formKey = GlobalKey<FormState>();
String name = '';
@override
// Build a Form widget using the _formKey created above.
return Scaffold(
appBar: AppBar(title: Text('Form')),
body: Form(
key: _formKey,
child: Column(
children: <Widget>[
// Add TextFormFields and RaisedButton here.
TextFormField(
decoration: const InputDecoration(
icon: Icon(Icons.person),
hintText: 'What do people call you?',
labelText: 'Name *',
),
onChanged: (text) {
name = text;
},
onSaved: (String value) {
// This optional block of code can be used to run
// code when the user saves the form.
},
// The validator receives the text that the user has entered.
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text.';
}
if (value.contains('@')) {
return 'Do not use the @ char.';
}
return null;
},
),
SizedBox(
height: 16.0,
136
),
RaisedButton(
onPressed: () {
final _form = _formKey.currentState;
// Validate returns true if the form is valid, otherwise false.
if (_form.validate()) {
// If the form is valid, display a toast message. In the real wor
ld,
// you'd often call a server or save the information in a databas
e.
_form.save();
Fluttertoast.showToast(
msg: "Processing Data: " + name,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
fontSize: 16.0);
}
},
child: Text('Submit'),
),
],
),
),
);
}
}
137
‫نحتاج إلى معرف موحد‬Unique Identifier ‫ يتيح لنا‬.‫ الستعمال النموذج‬GlobalKey ‫إنشاء معرف موحد على مستوى التطبيق‬
:‫يمكننا ربطه بنموذجنا‬
final _formKey = GlobalKey<FormState>();
body: Form(
key: _formKey,
"‫ نستعمل "المدقق‬،‫للتحقق من صحة البيانات المدخلة‬validator.
return 'Please enter some text.';
}
if (value.contains('@')) {
return 'Do not use the @ char.';
}
return null;
138
},
:‫ نضيف زر يؤدي إلى‬،‫في األخير‬

‫ التحقق من صحة النموذج‬-
.‫ في كل أداة من النموذج‬onSaved ‫ نقوم بحفظ البيانات مثال وتشغيل جميع وظائف‬،‫إذا كانت البيانات صحيحة‬ -
.‫ نقوم بعرض البيانات في رسالة تظهر على الشاشة‬،‫في المثال السابق‬

RaisedButton(
onPressed: () {
// If the form is valid, display a toast message. In the real world,
// you'd often call a server or save the information in a database.
_form.save();
fontSize: 16.0);
}
},
),
_form.reset(); ‫يمكن إضافة زر إلعادة النموذج من جديد وذلك باستعمال األمر‬
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
// If the form is valid, display a toast message. In the real world,
// you'd often call a server or save the information in a database.
//_form.save();
139
fontSize: 16.0);
}
},
),
SizedBox(
width: 16.0,
),
RaisedButton(
onPressed: () {
_form.reset();
},
child: Text('Reset'),
),
],
),
LoginForm ‫ واجهة تسجيل الدخول‬1 ‫ مثال‬2.11.1
.‫كثير من تطبيقات الجوال تعتمد على تسجيل دخول المستخدم من خالل إدخال اسم المستخدم وكلمة المرور‬
.‫فيما يلي نستعرض كود لواجهة تحتوي على نموذج الدخول‬
import 'package:flutter/services.dart';
140
final kHintTextStyle = TextStyle(
color: Colors.white54,
fontFamily: 'OpenSans',
);
final kLabelStyle = TextStyle(

color: Colors.white,
);
final kBoxDecorationStyle = BoxDecoration(

color: Color(0xFF6CA8F1),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 6.0,
offset: Offset(0, 2),
),
],
);
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
home: LoginPage(),
);
}
}
class LoginPage extends StatefulWidget {

@override
_LoginPageState createState() => new _LoginPageState();
// State<StatefulWidget> createState() {
// return _LoginPageState();
141
// }
}
class _LoginPageState extends State<LoginPage> {

final scaffoldKey = new GlobalKey<ScaffoldState>();
final formKey = new GlobalKey<FormState>();
// FormType _formType = FormType.login;

String _userName = "";
String _password = "";
void validateAndSave() {
final form = formKey.currentState;
if (form.validate()) {
form.save();
performLogin();
print(_userName + ' - ' + _password);
}
}
void performLogin() {
final snackbar = new SnackBar(
content: new Text("Username : $_userName, password : $_password"),
);
scaffoldKey.currentState.showSnackBar(snackbar);
}
Widget _buildUserNameTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Username',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextFormField(
autovalidate: false,
style: TextStyle(
142
),
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.account_circle,
),
hintText: 'Enter your Username',
hintStyle: kHintTextStyle,
),
return value.isEmpty ? 'Username is Required.' : null;
},
onSaved: (value) {
return _userName = value;
},
),
),
],
);
}
Widget _buildPasswordTF() {
return Column(
children: <Widget>[
Text(
'Password',
style: kLabelStyle,
),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextFormField(
obscureText: true,
autovalidate: false,
style: TextStyle(
),
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.lock,
143
),
hintText: 'Enter your Password',
hintStyle: kHintTextStyle,
),
validator: (String value) {
return 'Password is Required.';
}
if (value.length < 6) {
return 'Password too short.';
}
return null;
// return value.isEmpty ? 'Password is Required.' : null;
// || value.length < 6 ? 'Password too short' : null;
},
onSaved: (String value) {
return _password = value;
},
// validator: (val) =>
// val.length < 6 ? 'Password too short' : null,
// onSaved: (val) => _password = val,
),
),
],
);
}
Widget _buildLoginBtn() {
return Container(
padding: EdgeInsets.symmetric(vertical: 25.0),
width: double.infinity,
child: Form(
child: RaisedButton(
elevation: 5.0,
onPressed: () {
validateAndSave();
},
// => print('Login Button Pressed'),
),
child: Text(
'LOGIN',
style: TextStyle(
color: Color(0xFF527DAA),
144
letterSpacing: 1.5,
fontSize: 18.0,
),
),
),
),
);
}
@override
return Scaffold(
key: scaffoldKey,
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Stack(
children: <Widget>[
Container(
height: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF73AEF5),
Color(0xFF61A4F1),
Color(0xFF478DE0),
Color(0xFF398AE5),
],
stops: [0.1, 0.4, 0.7, 0.9],
),
),
),
Container(
height: double.infinity,
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.symmetric(
horizontal: 40.0,
vertical: 120.0,
),
child: Form(
key: formKey,
145
child: Column(
children: <Widget>[
Text(
'Sign In',
style: TextStyle(
fontSize: 30.0,
),
),
_buildUserNameTF(),
SizedBox(
height: 30.0,
),
_buildPasswordTF(),
_buildLoginBtn(),
],
),
),
),
)
],
),
),
),
);
}
}
146
‫‪ 2.11.1‬مثال ‪ 2‬واجهة تسجيل الدخول ‪LoginScreen‬‬
‫نستعرض فيما يلي واجهة أخرى لتسجيل الدخول‪ .‬تحتوي على‪:‬‬

‫‪ -‬حقل نص لكتابة اسم المستخدم‬
‫‪ -‬حقل نص لكتابة كلمة المرور‬
‫‪ FlatButton‬في حالة نسيان كلمة المرور‬ ‫‪-‬‬
‫‪ RaisedButton‬للدخول‬ ‫‪-‬‬
‫‪ FlatButton‬لتسجيل مستخدم جديد‬ ‫‪-‬‬
‫{ )(‪void main‬‬
‫‪147‬‬
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

TextEditingController nameController = TextEditingController();
TextEditingController passwordController = TextEditingController();
@override
return Scaffold(
appBar: AppBar(
title: Text('Sample App: Login Screen'),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.center,
child: Text(
'Flutter Book',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w500,
148
fontSize: 30),
)),
Container(
alignment: Alignment.center,
child: Text(
'Sign in',
style: TextStyle(fontSize: 20),
)),
Container(
child: TextField(
controller: nameController,
border: OutlineInputBorder(),
labelText: 'Username',
),
),
),
Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: TextField(
obscureText: true,
controller: passwordController,
border: OutlineInputBorder(),
labelText: 'Password',
),
),
),
FlatButton(
onPressed: () {
//forgot password screen
},
textColor: Colors.blue,
child: Text('Forgot Password'),
),
Container(
height: 50,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.blue,
child: Text('Login'),
onPressed: () {
print(nameController.text);
print(passwordController.text);
149
},
)),
Container(
child: Row(
children: <Widget>[
Text('Does not have account?'),
FlatButton(
textColor: Colors.blue,
child: Text(
'Sign in',
style: TextStyle(fontSize: 20),
),
onPressed: () {
//signup screen
},
)
],
),
),
],
),
),
);
}
}
150
CheckboxGroup and RadioButtonGroup Widgets 2.12
dependencies:
grouped_buttons: ^1.0.4
import 'package:grouped_buttons/grouped_buttons.dart';

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Checkbox & Radio Buttons'),
),
body: Padding(
child: Column(
children: <Widget>[
SizedBox(
height: 10.0,
),
Text(
'Select Your Pizza Toppings :',
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
CheckboxGroup(
labelStyle: TextStyle(fontSize: 20.0),
labels: <String>[
"Onions",
"Mushrooms",
"Black olives",
"Green peppers",
"Extra cheese",
],
onSelected: (List<String> checked) => print(checked.toString()),
),
SizedBox(
height: 10.0,
151
),
Text(
'Select Your Pizza Size :',
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
RadioButtonGroup(
labelStyle: TextStyle(fontSize: 20.0),
labels: <String>[
"Small",
"Medium",
"Large",
],
onSelected: (String selected) => print(selected),
),
],
),
),
),
);
}
}
152
Radio Widget ‫ زر الراديو‬2.12
.‫يستعمل زر الراديو مثال في الخيارات المتعددة بحيث يستطيع المستخدم أن يختار اإلجابة الصحيحة للسؤال‬
onChanged‫و‬groupValue ، parameters: value‫يأخذ عنصر زر الراديو ثالث معلمات‬

1 ‫ و‬2 ‫ و‬5 :‫ ستكون قيمة كل منها‬،‫ مثال إذا عندنا ثالث أزرار على التوالي‬.‫ رقم الترتيب‬value ‫تأخذ‬
. ‫ القيمة المختارة لمجموعة األزرار بأكملها‬groupValue ‫يمثل‬
.‫ الذي يستدعى وينفذ في كل مرة حصل تغيير في الزر‬callback ‫ هو‬onChanged ‫و‬
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

int _value1 = 0;
void _setValue1(int value) => setState(() => _value1 = value);
Widget makeRadios() {
List<Widget> list = List<Widget>();
153
for (int i = 0; i < 3; i++) {
list.add(Radio(
value: i,
groupValue: _value1,
onChanged: _setValue1,
));
}
Column column = Column(

children: list,
);
return column;
}
@override
return Scaffold(
appBar: AppBar(
title: Text('Radio buttons'),
),
body: Container(
child: Center(
child: Column(
children: <Widget>[
Text(
'${_value1}',
style: new TextStyle(
color: new Color.fromARGB(255, 117, 117, 117),
fontSize: 25.0,
),
makeRadios(),
],
),
)),
);
}
}
154
loop for‫ أضفنا ثالث أزرار راديو باستعمال التكرار‬،‫في هذا المثال‬
1 ‫ أو‬2 ‫ أو‬5 :‫ يستعرض لنا رقم الترتيب‬،‫وفي كل مرة نضغط على زر معين‬
RadioListTile:‫هناك طريقة ثانية تتمثل في استعمال‬
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
home: MyHomePage2(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage2 extends StatefulWidget {

MyHomePage2({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePage2State createState() => _MyHomePage2State();
}
155
class _MyHomePage2State extends State<MyHomePage2> {
int _value2 = 0;
void _setValue2(int value) => setState(() => _value2 = value);
Widget makeRadioTiles() {
List<Widget> list = List<Widget>();
for (int i = 0; i < 3; i++) {

list.add(RadioListTile(
value: i,
groupValue: _value2,
onChanged: _setValue2,
activeColor: Colors.green,
controlAffinity: ListTileControlAffinity.trailing,
title: Text('Item: ${i}'),
subtitle: Text('sub title'),
));
}
Column column = Column(

children: list,
);
return column;
}
@override
return Scaffold(
appBar: AppBar(
title: Text('Radio buttons'),
),
body: Container(
child: Center(
child: Column(
children: <Widget>[
Text(
'${_value2}',
style: new TextStyle(
color: new Color.fromARGB(255, 117, 117, 117),
fontSize: 25.0,
),
makeRadioTiles(),
],
),
156
)),
);
}
}
Switch Widget ‫ زر المفتاح‬2.12
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
);
}
}
157
final String title;
@override
}

bool _value1 = false;
bool _value2 = false;
void _onChanged1(bool value) => setState(() => _value1 = value);

void _onChanged2(bool value) => setState(() => _value2 = value);
@override
return Scaffold(
appBar: AppBar(
title: Text('Switch Button'),
),
body: Container(
child: Center(
child: Column(
children: <Widget>[
Text(
'${_value1}',
style: TextStyle(
fontSize: 20.0,
color: Colors.blue),
),
Switch(
value: _value1,
onChanged: (bool value) => setState(() => _value1 = value),
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
),
Divider(
color: Colors.teal.shade100,
thickness: 3.0,
),
Text(
'${_value2}',
style: TextStyle(
158
fontSize: 20.0,
color: Colors.blue),
),
SwitchListTile(
value: _value2,
onChanged: _onChanged2,
title: Text(
'Are you student?',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.blue),
),
)
],
),
)),
);
}
}
Slider Widget ‫ المنزلق‬2.12
void main() {
runApp(MyApp());
}
159
@override
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

double _value = 0.0;
//void _setvalue(double newvalue) => setState(() => _value = newvalue);
@override
return Scaffold(
appBar: AppBar(
title: Text('Slider'),
),
body: Container(
child: Center(
child: Column(
children: <Widget>[
Text(
'Value: ${(_value * 100).round()}',
style: TextStyle(
fontSize: 20.0,
),
),
Slider(
value: _value,
onChanged: (double newvalue) =>
160
setState(() => _value = newvalue),
//Slider(value: _value, onChanged: _setvalue),
),
],
),
),
),
);
}
}
:SliderTheme ‫ممكن إضافة ألوان وهيئات أخرى عن طريق إضافة‬
SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.red[700],
inactiveTrackColor: Colors.red[100],
trackShape: RectangularSliderTrackShape(),
trackHeight: 4.0,
thumbColor: Colors.redAccent,
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
overlayColor: Colors.red.withAlpha(32),
overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
),
child: Slider(
value: _value,
setState(() {
_value = value;
});
},
),
),
161
:‫وتعديل آخر‬
SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.red[700],
inactiveTrackColor: Colors.red[100],
trackShape: RoundedRectSliderTrackShape(),
trackHeight: 4.0,
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
thumbColor: Colors.redAccent,
overlayColor: Colors.red.withAlpha(32),
overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
tickMarkShape: RoundSliderTickMarkShape(),
activeTickMarkColor: Colors.red[700],
inactiveTickMarkColor: Colors.red[100],
valueIndicatorShape: PaddleSliderValueIndicatorShape(),
valueIndicatorColor: Colors.redAccent,
valueIndicatorTextStyle: TextStyle(
),
),
child: Slider(
value: _value,
min: 0,
max: 100,
divisions: 10,
label: '$_value',
setState(
() {
_value = value;
},
);
},
),
),
162
DatePicker ‫ تحديد التاريخ‬2.12
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

String _value = '';
Future _selectDate() async {

DateTime picked = await showDatePicker(
context: context,
initialDate: new DateTime.now(),
firstDate: new DateTime(2016),
lastDate: new DateTime(2099),
);
if (picked != null) setState(() => _value = picked.toString());
}
@override
return Scaffold(
163
appBar: AppBar(
title: Text('Date Picker'),
),
body: Container(
child: Center(
child: Column(
children: <Widget>[
Text(
_value,
style: TextStyle(
fontSize: 20.0,
),
),
RaisedButton(
onPressed: _selectDate,
child: new Text('Show DatePicker'),
)
],
),
),
),
);
}
}
164
TimePicker ‫ تحديد الوقت‬2.12
void main() {
runApp(MyApp());
}
165
@override
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

TimeOfDay selectedTime = TimeOfDay.now();
Future _selectDate() async {

TimeOfDay picked_s = await showTimePicker(
context: context,
initialTime: selectedTime,
builder: (BuildContext context, Widget child) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
child: child,
);
});
if (picked_s != null && picked_s != selectedTime)

setState(() {
selectedTime = picked_s;
});
}
@override
return Scaffold(
166
appBar: AppBar(
),
body: Container(
child: Center(
child: Column(
children: <Widget>[
Text(
("Current Time: ${selectedTime.format(context)}"),
style: TextStyle(
fontSize: 20.0,
),
),
RaisedButton(
onPressed: _selectDate,
child: new Text('Show TimePicker'),
)
],
),
),
),
);
}
}
167
CupertinoDatePicker 2.12
CupertinoDatePicker ‫يوجد كالس فالتر تسمى‬
168
Container(
height: 200,
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.date,
initialDateTime: DateTime(2020, 1, 1),
onDateTimeChanged: (DateTime newDateTime) {
// Do something
},
),
),
:‫إضافة الوقت‬
Container(
height: 200,
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.dateAndTime,
initialDateTime: DateTime(2020, 1, 1, 10, 33),
onDateTimeChanged: (DateTime newDateTime) {
//Do Some thing
},
use24hFormat: false,
minuteInterval: 1,
),
),
169
flutter_datetime_picker ‫ مكتبة‬2.12.1
dependencies:
flutter:
sdk: flutter
flutter_datetime_picker:
git:
url: https://github.com/ditheshthegreat/flutter_datetime_picker # Repo
ref: patch-1 # Branch name
jiffy: ^3.0.1
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
import 'package:jiffy/jiffy.dart';
void main() {
runApp(MyApp());
}

@override
170
return MaterialApp(
theme: ThemeData(
),
);
}
}

final String title;
@override
}

DateTime dateTime;
@override
return Scaffold(
appBar: AppBar(
),
body: Container(
child: Center(
child: Column(
children: <Widget>[
Container(
height: 50,
child: Padding(
padding: const EdgeInsets.only(bottom: 5.0),
child: FlatButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
color: Colors.blueAccent,
onPressed: () {
DatePicker.showDateTimePicker(context,
showTitleActions: true,
minTime: DateTime(2020, 1, 1),
maxTime: DateTime(2040, 12, 31),
171
theme: DatePickerTheme(
headerColor: Colors.orange,
itemStyle: TextStyle(
fontSize: 18),
doneStyle: TextStyle(
fontSize: 16)), onChanged: (date) {
//print('2change $date in time zone ' +
// date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
//print('2confirm $date');
setState(() {
dateTime = date;
});
}, currentTime: DateTime.now(), locale: LocaleType.ar);
},
child: Text(
Jiffy(dateTime).yMMMMEEEEdjm,
//style: TextStyle(color: Colors.blue),
)),
),
),
],
),
),
),
);
}
}
172
Bottom Sheet Widget 2.12
Modal Bottom Sheet - 2.12.1
void main() {
runApp(MaterialApp(home: MyApp()));
173
}

_showModalBottomSheet(context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200.0,
alignment: Alignment.topCenter,
child: Text(
'Flutter course',
style: TextStyle(
fontSize: 20.0,
),
),
);
});
}
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Alert Dialog Widget'),
),
body: Center(
child: Padding(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 200,
height: 50,
color: Colors.blue,
child: Text(
'Bottom Sheet',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
onPressed: () {
_showModalBottomSheet(context);
},
),
174
),
],
),
],
),
),
),
),
);
}
}
Persistent Bottom Sheet 2.12.1
void main() {
}
175
@override
}

final _scaffoldkey = GlobalKey<ScaffoldState>();
VoidCallback _showpersistentSheet;
@override
void initState() {
super.initState();
_showpersistentSheet = _sheetBottomSheet;
}
void _sheetBottomSheet() {
setState(() {
_showpersistentSheet = null;
});
_scaffoldkey.currentState
.showBottomSheet((content) {
return Container(
color: Colors.blue,
height: 200,
child: Center(
child: Text(
'Welcome to Flutter course',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
);
})
.closed
.whenComplete(() {
if (mounted) {
setState(() {
_showpersistentSheet = _sheetBottomSheet;
});
}
});
}
@override
return MaterialApp(
home: Scaffold(
key: _scaffoldkey,
appBar: AppBar(
title: Text('Persistent Bottom Sheet'),
176
),
body: Center(
child: Padding(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 200,
height: 50,
color: Colors.blue,
child: Text(
'Bottom Sheet',
),
onPressed: _showpersistentSheet,
),
),
],
),
SizedBox(
height: 20.0,
),
Row(
children: <Widget>[
Container(
width: 200,
height: 50,
color: Colors.blue,
child: Text(
'Test Button',
),
onPressed: () {},
),
),
],
),
],
),
),
),
),
);
}
177
}
Expansion Panel Widget 2.11
void main() {
}

178
@override
}
class MyItem {
MyItem({this.isExpanded: false, this.header, this.body});
bool isExpanded;
final String header;
final String body;
}

List<MyItem> _items = <MyItem>[
MyItem(header: "Header 1", body: "Body 1"),
];
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Expansion Panel'),
),
body: Padding(
child: ListView(
children: <Widget>[
ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_items[index].isExpanded = !_items[index].isExpanded;
});
},
children: _items.map((MyItem item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return Text(
item.header,
);
},
isExpanded: item.isExpanded,
body: Container(
child: Text(
item.body,
179
),
));
}).toList(),
)
],
),
),
),
);
}
}
Snack Bar Widget 2.11
void main() {
180
}

@override
}

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
_showSnackBar() {
final snackBar = SnackBar(
content: Row(
children: [
Icon(Icons.thumb_up),
SizedBox(
width: 10.0,
),
SizedBox(
child: Text(
'Hey I am a SnackBar !',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
],
),
duration: Duration(seconds: 3),
);
_scaffoldKey.currentState.showSnackBar(snackBar);
}
@override
return MaterialApp(
home: Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text('Snack Bar Widget'),
),
body: Padding(
color: Colors.blue,
child: Text(
'Notification Message',
181
),
onPressed: _showSnackBar,
),
),
),
);
}
}
182
Firebase 2
‫ الموقع‬2
dependencies:
google_maps_flutter: ^2.0.1
183
import 'package:google_maps_flutter/google_maps_flutter.dart';

@override
}

final LatLng _location = const LatLng(21.4359571, 39.9866326);
GoogleMapController mapController;
void _myMapCreated(GoogleMapController controller) {
mapController = controller;
}
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Maps Sample App'),
),
body: GoogleMap(
onMapCreated: _myMapCreated,
initialCameraPosition: CameraPosition(target: _location, zoom: 10.0),
),
),
);
}
}
184
Adding a Google Map Marker 2.1
MapMarkers.dart
Marker cnTowerkarker = Marker(

markerId: MarkerId("Makka"),
position: const LatLng(21.4359571, 39.9866326),
infoWindow: InfoWindow(title: "Makka "),
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueMagenta));
main.dart ‫ملف‬
import 'MapMarkers.dart';

@override
185
}

final LatLng _location = const LatLng(21.4359571, 39.9866326);
late GoogleMapController mapController;
}
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
),
body: GoogleMap(
markers: {cnTowerkarker},
),
),
);
}
}
186
Google Map Types 2.1
Normal: It is the default value that you get when you run your app in the last time.
Satellite: Displays Google Earth satellite images. Hybrid: Displays a mixture of normal and satellite
views. Terrain: Displays a physical map based on terrain information. None: You will get an empty
map. Only you can see the map markers.
body: GoogleMap(
mapType: MapType.hybrid,
187
),
Moving the Camera (Camera Animation) 2.2
188
@override
}

final LatLng _location = const LatLng(43.6425701, -79.3892455);
}
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
),
body: GoogleMap(
),
floatingActionButton: FloatingActionButton.extended(
onPressed: gotoNiagaraFalls,
label: Text('To Niagara Falls!'),
icon: Icon(Icons.directions_boat),
),
),
);
}
static final CameraPosition NiagaraFalls = CameraPosition(

target: LatLng(43.0807790, -79.0785500),
bearing: 45.0,
tilt: 50.0,
zoom: 14.0);
Future<void> gotoNiagaraFalls() async {
final GoogleMapController controller = await mapController;
controller.animateCamera(
CameraUpdate.newCameraPosition(NiagaraFalls),
);
}
}
Capture an App User’s Location 2.2
dependencies:
geolocator: ^7.0.1
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
189
import 'package:geolocator/geolocator.dart';
@override
}
final LatLng _location = const LatLng(43.6425701, -79.3892455);
}
void getCurrentLocation() async {
final Position position = await Geolocator
.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
final CameraPosition MyLocation = CameraPosition(
target: LatLng(position.latitude, position.longitude),
bearing: 45.0,
tilt: 50.0,
zoom: 11.0,
);
setState(() async {
final GoogleMapController controller = await mapController;
controller.animateCamera(
CameraUpdate.newCameraPosition(MyLocation),
);
});
}
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
),
body: GoogleMap(
initialCameraPosition: CameraPosition(target: _location, zoom:13.0),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: getCurrentLocation,
label: Text('To My Location'),
icon: Icon(Icons.directions_boat),
),
),
);
}
}
190
191

Book Flutter

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Book Flutter

Uploaded by

Copyright:

Available Formats

‫دورة برمجة تطبيقات الجوال باستعمال إطار الفالتر‬

‫ولغة البرمجة الدارت‬

‫د‪ .‬أمير محمد المنصف الحمامي‬

‫التاريخ‪ :‬شعبان ‪2441‬‬

11 ...................................................................................... Android Emulator ‫تثبيت المحاكي‬ 2.7

11 ............................................................. Flutter Widgets ‫مقدمة إلى عناصر الفالتر‬ 2.10

15 ........................................................................................................Button Widgets ‫األزرار‬ 3.4

14 .......................................................................................................................... RaisedButton 3.4.2

61 .............................................................................................................................. IconButton 3.4.4

76 .................................................................. Navigation and Routing ‫اإلنتقال بين الواجهات‬ 4

15 .............................................................................................. Animate a Widget Across Screens 4.4

11 ................................................................... BottomNavigationBar ‫شريط التنقل السفلي‬ 5.1

17 ................................................... DefaultTabController , TabBar , and TabBarView Widgets 1.1

255 ............................................................................................................................ ListTile Widget 1.1

254 ............................................................................................................................. Drawer Widget 5.5

222 ................................................................................................................ SelectableText Widget 1.7

221 ................................................................................................................................ Stack Widget 5.8

216 .......................................................................................... TextEditingController ‫استعمال‬ 5.10

245 .............................................................................. LoginForm ‫ واجهة تسجيل الدخول‬1 ‫مثال‬ 5.12.1

271 .............................................................................................................. Bottom Sheet Widget 5.20

211 ................................................................................................... Adding a Google Map Marker 7.1

main() ‫يبدأ تشغيل البرنامج من خالل األوامر الموجودة في الدالة‬

Variables ‫المتغيرات‬ 1.1

String lastName = "Otaibi";

num to declare an integer or a double number:

Explicitly and Implicitly Data type

1.5 IF – Else Statement

1.7 IF Else and Logical Operators

1.8 For Loops

1.10 Do-while Loops

1.11 Break Statement

1.12 Switch Case Statement

Function Return Data Types

1.13.1 Void Function

1.13.2 Function Returning Expression

1.13.3 Functions and Variable Scope

var name = 'Microsoft';

var name = 'Microsoft';

1.14 Object-Oriented Programming (OOP)

print("Car Type is: ${toyota.type}");

Adding Methods to Classes

1.14.1 Providing Constructors for Your Classes

car(type, color, MaxSpeed, NumOfSeats) {

car(this.type, this.color, this.MaxSpeed, this.NumOfSeats);

1.14.2 Class — Getters and Setters

1.14.3 Class Inheritance

class Teacher extends Student {}

1.14.4 Abstract Class

abstract class Student {

class ITStudent extends Student {

abstract class Student {

class ITStudent extends Student {

‫ماهو الفالتر‬ ‫‪1.1‬‬

‫تثبيت بيئة البرمجة‪ :‬فالتر ‪SDK‬‬ ‫‪1.1‬‬

‫تثبيت بيئة البرمجة‪ :‬المحرر ‪Visual Studio Code Editor‬‬ ‫‪1.2‬‬

‫تثبيت بيئة البرمجة‪Android Studio IDE :‬‬ ‫‪1.2‬‬

‫تثبيت بيئة البرمجة‪Xcode IDE :‬‬ ‫‪1.2‬‬

‫إنشاء مشروع فالتر جديد‬ ‫‪1.2‬‬

‫تثبيت المحاكي ‪Android Emulator‬‬ ‫‪1.2‬‬

‫تشغيل التطبيق على المحاكي‬ ‫‪1.2‬‬

‫تشغيل التطبيق على جوال حقيقي‬ ‫‪1.2‬‬

‫‪ 1.12‬مقدمة إلى عناصر الفالتر ‪Flutter Widgets‬‬

‫‪ 2‬العنصر األساسية للفالتر ‪Flutter Widgets Fundamentals‬‬