بعد اكثر من اربع سنوات من انشاء القناة

انشائنا مجموعة للمناقشات وطرح الاسئله

سنجيب عند التفرغ ويمكن لطلابنا افادتكم ايضا

بالتوفيق

https://t.me/+G1OlF0vnOMhjYjU0

https://flutter.github.io/samples/web/material_3_demo/#/

رابط موقع عرض ادوات الفلاتر و خصائص المظهر كاملة ( الوان , خطوط وغيره)

https://fonts.google.com/icons


موقع يعرض كل ايقونات الفلاتر

https://fonts.google.com/

موقع يعرض كل خطوط الفلاتر المتاحة بأضافة مكتبة

google_fonts

وهذا الرابط الخاص بها
https://pub.dev/packages/google_fonts

طريقة استخدام المكتبة بعد اضافتها

تستخدم الفلاتر في بناء واجهات التطبيقات المالية و توفر جودة عالية في هذا النوع من التطبيقات .

طلبت من ChatGPT مساعدتي في كتابة كود جلب صورة من الاستديو ثم اقتصاصها في flutter

وكانت النتيجة
https://sl.bing.net/iYCixYecxuC

هذا الكود الذي اعطاني اياه


import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:image_cropper/image_cropper.dart';

class ImagePickerPage extends StatefulWidget {
@override
_ImagePickerPageState createState() => _ImagePickerPageState();
}

class _ImagePickerPageState extends State<ImagePickerPage> {
// متغير لتخزين الصورة المحددة
File _image;

// دالة لاختيار الصورة من الاستديو
Future _pickImage() async {
// استخدام image_picker لفتح الاستديو واختيار صورة
final pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);

// التحقق من أن المستخدم اختار صورة
if (pickedFile != null) {
// تحديث الحالة وتعيين الصورة المحددة
setState(() {
_image = File(pickedFile.path);
});
}
}

// دالة لاقتصاص الصورة
Future _cropImage() async {
// استخدام image_cropper لفتح واجهة اقتصاص الصورة
final croppedFile = await ImageCropper.cropImage(
sourcePath: _image.path,
aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1), // نسبة الاقتصاص
compressQuality: 100, // جودة الصورة
maxWidth: 700, // العرض الأقصى للصورة
maxHeight: 700, // الارتفاع الأقصى للصورة
compressFormat: ImageCompressFormat.jpg, // صيغة الصورة
androidUiSettings: AndroidUiSettings( // إعدادات واجهة الاقتصاص لنظام الأندرويد
toolbarTitle: 'اقتصاص الصورة', // عنوان الشريط العلوي
toolbarColor: Colors.blue, // لون الشريط العلوي
toolbarWidgetColor: Colors.white, // لون الأيقونات في الشريط العلوي
initAspectRatio: CropAspectRatioPreset.original, // النسبة الافتراضية للصورة
lockAspectRatio: false, // قفل النسبة أو السماح بتغييرها
),
);

// التحقق من أن المستخدم اقتص الصورة
if (croppedFile != null) {
// تحديث الحالة وتعيين الصورة المقصوصة
setState(() {
_image = croppedFile;
});
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('جلب واقتصاص الصورة'),
),
body: Center(
child: _image == null
? Text('لم تختر صورة بعد')
: Image.file(_image),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: _pickImage,
tooltip: 'اختر صورة',
child: Icon(Icons.photo_library),
),
SizedBox(height: 10),
FloatingActionButton(
onPressed: _cropImage,
tooltip: 'اقتص الصورة',
child: Icon(Icons.crop),
),
],
),
);
}
}

لتغيير اتجاه واجهات المشروع كامل من اليمين الى اليسار ..

اختصر وقت كتابة كلاس الموديل لجداول قاعدة البيانات كالتالي:

انسخ كود الجدول
ثم اخبره بانشاء الكود كما في الصورة