كيف تبني تطبيقات Flutter أسرع باستخدام Snippets

كيف تبني تطبيقات Flutter أسرع باستخدام Snippets

إذا كنت مطورًا يستخدم Flutter وAndroid Studio، فإن استخدام Snippets يمكن أن يكون أداة قوية لتوفير الوقت وزيادة الإنتاجية. سنتناول في هذا المقال مفهوم Snippets وكيفية إنشائها وأهميتها في تطوير تطبيقات Flutter، مع تقديم شرح تفصيلي وخطوات عملية.

ما هو Snippets؟

مقتطف التعليمات البرمجية (Snippets) هو جزء قابل للتكرار من التعليمات البرمجية التي تم تعريفها مسبقًا في بيئة التطوير لتسهيل كتابة التعليمات البرمجية المتكررة. بدلاً من كتابة نفس الرمز مرارًا وتكرارًا، يمكنك كتابة اختصار محدد لاستبداله تلقائيًا بالرمز الكامل.

أمثلة على المقتطفات الشائعة:

• stl: إنشاء أداة عديمة الحالة.
• stf: إنشاء StatefulWidget.

ما الاستفاده من هذه الاخصارات ؟

1. تسريع عملية التطوير

بدلاً من كتابة التعليمات البرمجية يدويًا، يمكنك فقط كتابة اختصارات صغيرة لإنشاء المكونات الأساسية لتطبيقك.

2. تقليل أخطاء البرمجة

عند استخدام مقتطفات التعليمات البرمجية، يتم إنشاء التعليمات البرمجية دائمًا بنفس التنسيق، مما يقلل من احتمال حدوث أخطاء إملائية أو منطقية.

3. زيادة الإنتاجية

يساعدك على التركيز على منطق التطبيق بدلاً من كتابة المكونات المتكررة.

كيفية إنشاء مقتطفات التعليمات البرمجية في Android Studio؟

1. الوصول إلى إعدادات snippets

افتح أندرويد ستوديو.

اختر من القائمة:

ملف > الإعدادات > المحرر > القوالب المباشرة

حدد مجموعة موجودة (مثل Flutter) أو قم بإنشاء مجموعة جديدة بالنقر فوق + وتحديد مجموعة قوالب.

انقر فوق + وحدد قالبًا مباشرًا.

3. مقتطفات التعليمات البرمجية المخصصة

الاختصار: اختصار لتنشيط مقتطف (مثل stl أو hcw).

نص القالب: أضف الكود الذي تريد تكراره، على سبيل المثال:

السياق: اختر سياقًا مناسبًا، مثل ملف Flutter أو Dart.

4. المتغيرات المخصصة

انقر فوق "تحرير المتغيرات" لتحديد متغير، مثل $CLASS_NAME$، والذي يتم ملؤه تلقائيًا عند كتابة الاختصار.

إنشاء أداة HookConsumerWidget

إذا كنت تستخدم Riverpod، فيمكنك إعداد جزء لـ HookConsumerWidget الخاص بك مثل هذا:

الاختصار: bc

import 'package:flutter/material.dart';
import 'package:my_pos_adv/utils/resources/resources_exporter.dart';

class $CLASS_NAME$ extends ConsumerStatefulWidget {
  const $CLASS_NAME$({super.key});

  @override
  ConsumerState<$CLASS_NAME$> createState() => _$CLASS_NAME$State();
}

class _$CLASS_NAME$State extends ConsumerState<$CLASS_NAME$> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: MyText(title:'$CLASS_NAME$'),
      ),
      body: 
    );
  }
}

HookConsumerWidget اختصار لعمل

الاختصار: hc

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:my_pos_adv/utils/resources/resources_exporter.dart';
import 'package:flutter_hooks/flutter_hooks.dart';


class $CLASS_NAME$ extends HookConsumerWidget {
  const $CLASS_NAME$({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const MyText(title:'$CLASS_NAME$'),
      ),
    );
  }
}