كيفية اضافة صور 3D الى تطبيقك في فلاتر | How to Add 3d Images in Flutter project

كيفية اضافة صور 3D الى تطبيقك في فلاتر | How to Add 3d Images in Flutter project

كما نعلم ان الصور ال3d والتي يمكنك تحريكها والتحكم بها في flutter يعد امر معقد لدى البعض ولكن في هذه المقالة سوف نشارك معكم كيف تقوم بتنفيذ هذه الصور في مشروعك باسهل طريقة حيث في هذه المقالة سوف نقدم لكم طريقتين الاولى تعتمد على رفع الصورة على احد المواقع المخصصه في تصميم ال3d والثانيه تعتمد على الصورة ويجب ان تكون قابلة للتحريك وبالاخص صيغة glb وهي الصيغ التي تدعم التحريك وال3d وتكون ناتجه من احد البرامج المخصصه في التصميم 3d .

عادة ، من وجهة نظر المطور ، تتناقض أطر العمل والمكتبات عبر الأنظمة الأساسية مع بعضها البعض. على الرغم من أن هذا مفيد من الناحية الفنية عند الاختيار بين Flutter و React Native ، على سبيل المثال ، إلا أنه لا يمثل نظرة عامة شاملة على قدرات Flutter.

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

يمتلك المطور كل ما يحتاجه لبدء إنشاء التطبيقات إذا كان لديه معرفة سابقة بـ Flutter ، وقام للتو بتنزيل SDK ، ويستخدم محرر كود مناسب. حاليًا ، يمكن لـ Flutter إنشاء تطبيقات لأنظمة iOS و Windows و Linux و macOS.

add packages

  webview_flutter: ^3.0.4

  babylonjs_viewer: ^1.1.4

How to display image 3d from website into flutter project

هذه الطريقة تعتمد على مكتبة webview_flutter وهيا التي تسمح لنا بعرض صفحة من الانترنت في تطبيقك وبعدها استخدمنا موقع app.vectary.com وهو من اشهر المواقع التي تسمح لنا بتصميم اشكال 3d وتعرض لك رابط مباشر للشكل الذي قمت بتصميمه وبعد نسخ الرابط يمكنك عرضه من خلال المشروع الخاص بك كما هو موضح بالكود التالي ولا تنسى تفعيل خاصية الjavaScript .

web.dart

class PasswordField extends StatefulWidget {
  const PasswordField({Key? key}) : super(key: key);

  @override
  State<PasswordField> createState() => _PasswordFieldState();
}

class _PasswordFieldState extends State<PasswordField> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text(
          'Sneaker',
          style: TextStyle(
              color: Colors.black, fontSize: 28, fontStyle: FontStyle.italic),
        ),
        centerTitle: true,
        elevation: 0.1,
        backgroundColor: Colors.white,
        actions: [
          IconButton(
              onPressed: () {},
              icon: const Icon(
                Icons.shopping_cart,
                color: Colors.deepPurpleAccent,
              ))
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(
              height: 350,
              width: double.infinity,
              child: WebView(
                initialUrl: 'https://app.vectary.com/p/7Rkk09lqFGjKTngQ1jjyYk',
                javascriptMode: JavascriptMode.unrestricted,
              ),
            ),
            const Text(
              'Sneaker ||',
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                  fontSize: 25),
            ),
            const Expanded(
              child: Text(
                '''Product details
Package Dimensions ‏ : ‎ 29 x 23 x 11 cm; 1 Kilograms
Date First Available ‏ : ‎ 7 December 2021
Manufacturer ‏ : ‎ Dejavu
ASIN ‏ : ‎ B09N7QF9S6
Item model number ‏ : ‎ PMA-DVTT-010
Department ‏ : ‎ Womens''',
                style: TextStyle(
                  color: Colors.grey,
                ),
              ),
            ),
            Row(
              children: [
                const Text(
                  'Quantity',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 25,
                      fontWeight: FontWeight.bold),
                ),
                IconButton(
                    onPressed: () {},
                    icon: const Icon(
                      Icons.remove,
                      color: Colors.deepPurpleAccent,
                    )),
                Text(
                  '1',
                  style: TextStyle(color: Colors.black, fontSize: 25),
                ),
                IconButton(
                    onPressed: () {},
                    icon: const Icon(
                      Icons.add,
                      color: Colors.deepPurpleAccent,
                    )),
              ],
            ),
          ],
        ),
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Container(
          height: 50,
          width: double.infinity,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30),
              color: Colors.deepPurpleAccent),
          child: const Center(
              child: Text(
            'Save',
            style: TextStyle(color: Colors.white, fontSize: 28),
          )),
        ),
      ),
    );
  }
}

كيفية عرض صورة 3d سواء من الجهاز او من الانترنت داخل مشروعك في فلاتر

بالنسبة للطريقة الثانيه فهي محالية بمعنى لن نستخدم فيها الانترنت فقط يمكنك تحميل الملف الخاص بالتصميم ورفعه داخل ملفات المشروع assets وبعدها تقوم بإستدعاءه كما هو موضح ولن تتمكن من استخدام الامر BabylonJSViewer الا عندما تقوم بتثبيت المكتبة الخاصه به وهيا موجوده بالاعلى .

3d.dart

Center(
          child: Container(
            color: Colors.white,
            child: BabylonJSViewer(
              src: 'https://models.babylonjs.com/boombox.glb',
              //or
              // src: 'assets/black_boc.glb',
            ),
          ),
        ),
        

android sdk manager تحميل flutter developers applications create app android android studio mac