تطوير Flutter في Cursor: الدليل الكامل

يمكّن Flutter المطورين من بناء تطبيقات مجمعة أصلياً للهاتف المحمول والويب وسطح المكتب من قاعدة كود واحدة. عندما يقترن بتجربة التحرير الأصلية للذكاء الاصطناعي في Cursor، يصبح تطوير Flutter أكثر بديهية. يغطي هذا الدليل برمجة Dart في Cursor، والاستفادة من إعادة التحميل السريع، وبناء الواجهات بكفاءة، واستخدام الذكاء الاصطناعي لإنشاء وتحسين واجهات المستخدم.

---

إعداد Flutter في Cursor

تضمن بيئة Flutter المكونة بشكل صحيح تطويراً سلساً عبر جميع المنصات المستهدفة. يرث Cursor ملحقات Flutter وDart من VS Code، مما يوفر سير عمل مألوفاً ومحسناً.

تثبيت Flutter وDart SDK

تحقق من التثبيت في طرفية Cursor:

flutter doctor

يتحقق هذا الأمر من Flutter SDK وسلسلة أدوات Android وXcode (على macOS) والأجهزة المتصلة. عالج أي مشكلات تم الإبلاغ عنها قبل المتابعة.

تلميح

قم بتشغيل flutter doctor -v للحصول على مخرجات مفصلة إذا واجهت مشكلات في المسار أو الصلاحيات. تحتفظ طرفية Cursor ببيئة الصدفة الخاصة بك، لذا تنطبق تكوينات PATH فوراً.

تثبيت الملحقات في Cursor

قم بتثبيت الملحقات التالية من سوق Cursor:

• Flutter: دعم كامل لـ Flutter بما في ذلك اختيار الجهاز وتشغيل المحاكي وإنشاء هيكل المشروع
• Dart: دعم لغة Dart مع IntelliSense وإعادة الهيكلة والمساعدات الخاصة بـ Flutter

تمكن هذه الملحقات مقتطفات الكود ومساعدات تغليف الواجهات والاستيرادات التلقائية.

warning

تأكد من أن مجموعة واحدة فقط من ملحقات Dart/Flutter نشطة. يمكن أن تسبب الملحقات المتعارضة تشخيصات مكررة وإكمال كود معطل.

تهيئة المشروع وهيكله

أنشئ مشروع Flutter جديد من طرفية Cursor:

flutter create my_app
cd my_app

يحتوي مشروع Flutter القياسي على:

my_app/
  android/
  ios/
  lib/
    main.dart
  test/
  pubspec.yaml

يحتفظ دليل lib/ بكود Dart الخاص بك، بينما يدير pubspec.yaml الاعتماديات والموارد.

---

برمجة Dart في Cursor

Dart هي اللغة التي تشغل Flutter. تساعدك ميزات الذكاء الاصطناعي في Cursor على كتابة كود Dart نظيف وآمن النوع مع الحد الأدنى من الكود المبدئي.

الاستفادة من الذكاء الاصطناعي لإنشاء كود Dart

صف واجهة أو دالة باللغة الطبيعية، وسيقوم Cursor بإنشاء Dart اصطلاحي:

// A reusable card widget that displays a title, subtitle, and trailing icon

ينتج Cursor:

import 'package:flutter/material.dart';

class InfoCard extends StatelessWidget {
  final String title;
  final String subtitle;
  final IconData icon;
  final VoidCallback? onTap;

  const InfoCard({
    super.key,
    required this.title,
    required this.subtitle,
    required this.icon,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 2,
      child: ListTile(
        leading: Icon(icon, color: Theme.of(context).primaryColor),
        title: Text(title, style: Theme.of(context).textTheme.titleMedium),
        subtitle: Text(subtitle),
        trailing: const Icon(Icons.chevron_right),
        onTap: onTap,
      ),
    );
  }
}

تلميح

استخدم super.key في جميع منشئات الواجهات. تتضمن مقتطفات Dart في Cursor هذا بشكل افتراضي، مما يضمن اتباع واجهاتك لاصطلاحات Flutter الحديثة.

الأمان من القيم الفارغة واستدلال النوع

يمنع أمان القيم الفارغة في Dart أخطاء المرجع الفارغ في وقت التشغيل. يبرز Cursor الأنواع القابلة للقيمة الفارغة وغير القابلة للقيمة الفارغة:

String? userName;        // قابل للقيمة الفارغة
late String displayName; // غير قابل للقيمة الفارغة، يتم تهيئته لاحقاً
final String id = 'abc'; // غير قابل للقيمة الفارغة، غير قابل للتغيير

عند ترحيل الكود القديم، اسأل دردشة الذكاء الاصطناعي في Cursor:

حول هذه الدالة لاستخدام أمان القيم الفارغة وتعليقات النوع المناسبة

أنماط غير المتزامن والتدفقات

يعتمد Flutter بشكل كبير على البرمجة غير المتزامنة. ينشئ Cursor أنماط async/await ومنشئي التدفقات:

Future<List<Product>> fetchProducts() async {
  final response = await http.get(Uri.parse('/api/products'));
  if (response.statusCode == 200) {
    final List<dynamic> data = jsonDecode(response.body);
    return data.map((json) => Product.fromJson(json)).toList();
  }
  throw Exception('Failed to load products');
}

لتحديثات واجهة المستخدم التفاعلية مع التدفقات:

StreamBuilder<List<Order>>(
  stream: orderRepository.watchOrders(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }
    if (snapshot.hasError) {
      return ErrorWidget(snapshot.error!);
    }
    return OrderList(orders: snapshot.data ?? []);
  },
)

---

بناء الواجهات وتكوين واجهة المستخدم

شجرة الواجهات في Flutter قوية ولكنها قد تصبح مطولة. تعمل مساعدات Cursor وإنشاء الذكاء الاصطناعي على تبسيط بناء الواجهات.

إعادة التحميل السريع والتطوير التكراري

إعادة التحميل السريع هي الميزة القاتلة لـ Flutter. في Cursor، اضغط r في الطرفية التي تشغل flutter run لرؤية تغييرات الكود فوراً. يعمل هذا لمعظم تغييرات واجهة المستخدم وأجسام الطرق وخصائص الواجهات.

warning

تحافظ إعادة التحميل السريع على حالة التطبيق. للتغييرات في main() أو المتغيرات العامة أو الحقول الثابتة، استخدم إعادة التشغيل السريع (R) بدلاً من ذلك.

تغليف الواجهات وإعادة الهيكلة

يوفر ملحق Flutter في Cursor إصلاحات سريعة لعمليات الواجهات الشائعة. ضع المؤشر على واجهة واستخدم قائمة المصباح لـ:

• التغليف بـ Container
• التغليف بـ Center
• التغليف بـ Padding
• استخراج الواجهة
• إزالة الواجهة

تبقي هذه المساعدات شجرة الواجهات قابلة للقراءة دون قص ولصق يدوي.

بناء التخطيطات المعقدة بالذكاء الاصطناعي

صف تخطيطاً باللغة الإنجليزية البسيطة ودع Cursor ينشئ شجرة الواجهات:

شاشة ملف شخصي مع صورة رمزية دائرية في أعلى المركز،
متبوعة باسم المستخدم وسيرته الذاتية، ثم شبكة من الصور المصغرة،
وزر إجراء عائم لتحرير الملف الشخصي

يجمع Cursor:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Column(
              children: [
                const SizedBox(height: 40),
                CircleAvatar(
                  radius: 60,
                  backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
                ),
                const SizedBox(height: 16),
                Text(
                  'Jane Doe',
                  style: Theme.of(context).textTheme.headlineSmall,
                ),
                const SizedBox(height: 8),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 32),
                  child: Text(
                    'Mobile developer and open source enthusiast.',
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.bodyMedium,
                  ),
                ),
                const SizedBox(height: 24),
              ],
            ),
          ),
          SliverPadding(
            padding: const EdgeInsets.all(16),
            sliver: SliverGrid(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
              ),
              delegate: SliverChildBuilderDelegate(
                (context, index) => ClipRRect(
                  borderRadius: BorderRadius.circular(8),
                  child: Image.network(
                    'https://example.com/photo_$index.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
                childCount: 12,
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Navigator.pushNamed(context, '/edit-profile'),
        child: const Icon(Icons.edit),
      ),
    );
  }
}

التصميم المتجاوب والتكيفي

قم ببناء تخطيطات تتكيف مع أحجام الشاشات المختلفة:

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

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;

    if (width > 1200) {
      return const DesktopLayout();
    } else if (width > 600) {
      return const TabletLayout();
    }
    return const MobileLayout();
  }
}

تلميح

فكر في استخدام LayoutBuilder بدلاً من MediaQuery عندما تحتاج إلى الاستجابة لقيود واجهة أصل محددة بدلاً من الشاشة الكاملة.

---

إدارة الحالة

إدارة الحالة أمر بالغ الأهمية في Flutter. يساعدك Cursor في تنفيذ أنماط من setState البسيط إلى الحلول المتقدمة مثل Riverpod وBloc.

الكود المبدئي لإدارة الحالة المولد بالذكاء الاصطناعي

اطلب من Cursor إنشاء مزود Riverpod:

import 'package:flutter_riverpod/flutter_riverpod.dart';

final authProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
  return AuthNotifier(ref.read(authRepositoryProvider));
});

class AuthState {
  final User? user;
  final bool isLoading;
  final String? error;

  const AuthState({this.user, this.isLoading = false, this.error});

  AuthState copyWith({User? user, bool? isLoading, String? error}) {
    return AuthState(
      user: user ?? this.user,
      isLoading: isLoading ?? this.isLoading,
      error: error ?? this.error,
    );
  }
}

class AuthNotifier extends StateNotifier<AuthState> {
  final AuthRepository _repository;

  AuthNotifier(this._repository) : super(const AuthState());

  Future<void> signIn(String email, String password) async {
    state = state.copyWith(isLoading: true, error: null);
    try {
      final user = await _repository.signIn(email, password);
      state = state.copyWith(user: user, isLoading: false);
    } catch (e) {
      state = state.copyWith(error: e.toString(), isLoading: false);
    }
  }
}

التكامل مع واجهة المستخدم

استهلك المزودين في واجهاتك:

class LoginScreen extends ConsumerWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final authState = ref.watch(authProvider);

    return Scaffold(
      body: authState.isLoading
          ? const Center(child: CircularProgressIndicator())
          : LoginForm(
              onSubmit: (email, password) {
                ref.read(authProvider.notifier).signIn(email, password);
              },
              error: authState.error,
            ),
    );
  }
}

warning

تجنب استدعاء ref.read داخل طرق build للحالة التي تؤثر على العرض. استخدم ref.watch لضمان إعادة بناء الواجهة عند تغير الحالة.

---

إنشاء واجهة المستخدم بالذكاء الاصطناعي

يتجاوز الذكاء الاصطناعي في Cursor إكمال الكود لإنشاء شاشات وسمات ورسوم متحركة كاملة من الأوصاف.

إنشاء الشاشات من الأوصاف

صف شاشة ودع Cursor ينشئ التنفيذ الكامل:

شاشة إعدادات بها أقسام للحساب والإشعارات والمظهر.
يحتوي كل قسم على مفاتيح تبديل وصفوف تنقل.
استخدم سمة فاتحة بتصميم Material 3.

ينشئ Cursor شاشة منظمة بالكامل مع SwitchListTile وتنقل ListTile وفواصل أقسام مناسبة.

إنشاء السمة ونظام الألوان

قم بإنشاء تكوين ThemeData كامل:

final appTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xFF6750A4),
    brightness: Brightness.light,
  ),
  textTheme: const TextTheme(
    headlineLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
    bodyLarge: TextStyle(fontSize: 16, height: 1.5),
  ),
  cardTheme: CardTheme(
    elevation: 0,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
  ),
);

الرسوم المتحركة والحركة

يمكن لـ Cursor إنشاء رسوم متحركة باستخدام AnimatedContainer وHero ومتحكمات الرسوم المتحركة الصريحة:

class AnimatedButton extends StatefulWidget {
  const AnimatedButton({super.key});

  @override
  State<AnimatedButton> createState() => _AnimatedButtonState();
}

class _AnimatedButtonState extends State<AnimatedButton>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => _controller.forward(),
      onTapUp: (_) => _controller.reverse(),
      child: ScaleTransition(
        scale: Tween<double>(begin: 1.0, end: 0.95).animate(_controller),
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('Press Me'),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

تلميح

تخلص دائماً من متحكمات الرسوم المتحركة واشتراكات التدفقات ومتحكمات تحرير النص في طريقة dispose() لمنع تسرب الذاكرة.

---

اختبار وتصحيح تطبيقات Flutter

تتطلب تطبيقات Flutter عالية الجودة اختباراً شاملاً. يدعم Cursor اختبارات الوحدة والواجهات والتكامل مع إنشاء اختبارات بمساعدة الذكاء الاصطناعي.

اختبارات الواجهات

قم بإنشاء اختبارات واجهات تتحقق من سلوك واجهة المستخدم:

import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    await tester.pumpWidget(const MyApp());

    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

تصحيح مشكلات التخطيط

استخدم أدوات تصحيح الأخطاء المضمنة في Flutter داخل Cursor:

• Debug Paint: اضغط p في الطرفية لتصور المسافات والهوامش والمحاذاة
• Widget Inspector: قم بتشغيل DevTools من ملحق Flutter لاستكشاف شجرة الواجهات
• Performance Overlay: اضغط P لرؤية أوقات عرض الإطارات

warning

أخطاء تجاوز التخطيط شائعة في Flutter. عندما ترى خطأ مخطط بالأصفر والأسود، استخدم Widget Inspector لتحديد الحاوية المقيدة واضبط استخدام Expanded أو Flexible أو SingleChildScrollView.

---

الخاتمة

يجمع تطوير Flutter في Cursor بين القوة التعبيرية لواجهات Dart والإنتاجية المدفوعة بالذكاء الاصطناعي. من إنشاء واجهة المستخدم الفوري وتكرار إعادة التحميل السريع إلى إدارة الحالة القوية والاختبار، يسرع Cursor كل مرحلة من مراحل التطوير متعدد المنصات. استخدم دردشة الذكاء الاصطناعي للنماذج الأولية السريعة، واستخدم مساعدات الواجهات للحفاظ على كودك نظيفاً، واختبر دائماً على أجهزة حقيقية قبل الإصدار. مع Cursor كـ IDE لـ Flutter، يصبح بناء تطبيقات جميلة لأي شاشة أسرع وأكثر متعة.