كيفية عمل مصباح مضيئ داخل flutter وتغير ثيم التطبيق من light الى dark والعكس

كيفية عمل مصباح مضيئ داخل flutter وتغير ثيم التطبيق من light الى dark والعكس

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

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

نحن تهتم في موقعنا في مساعتدكم على تعلم وتطوير تطبيقاات الاندرويد و ios باستخدام تقنية flutter وهي تقنيه حديثه مقدمه لنا من العملاق جوجل والتي تهدف وتسعى ان الى توسع علم البرمجه وتسهل على المستخدمين التعامل مع مختلف الاجهزه بلغة واحده مثل تطوير تطبيقات android , ios , embeded , desktop بلغة واحده وهذا ما يميز هذه اللغه ونسبة الوظائف بها اصبحت مطلوبه بشكل كبير عن غيرها من التقنيات ولكن في نهاية الامر هي تعد cross platform .

الكود المستخدم لعمل تصميم المصباح المضيئ في flutter

يمكنك استخدام الكود التالي وهو عباره عن شكل للمصباح والصورة قمنا بالحصول عليها من متصفح الويب جوجل صورة لشكل المصباح وهو مضيئ واخرى وهي غير مضيئ ببساطة يمكنك استخدام الكود التالي والتعديل عليه الى ان تصل الى الشكل الذي ترغب به وهذا الامر سيكون جميل بالنسبة لك وتكون قد تعلمت شيئ مختلف عن باقي الاكواد التقليديه التي نقدمها لكم 

import 'package:flutter/material.dart';

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

  @override
  _LightSwitchState createState() => _LightSwitchState();
}

class _LightState extends State<Light> with SingleTickerProviderStateMixin {
  
  bool _isOn = false;

  late double _scale;
  late AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(
        milliseconds: 300,
      ),
      lowerBound: 0.0,
      upperBound: 0.1,
    )..addListener(() {
      setState(() {});
    });

    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    _scale = 1 - _controller.value;
    return Scaffold(
      body: Stack(
        children: [
          
Positioned(
            top: 0,
            bottom: 0,
            right: 0,
            left: 0,
            child: AnimatedContainer(
              duration: Duration(milliseconds: 300),
              color: _isOn ? Colors.yellow : Colors.grey.shade700,
            ),
          ),
          Positioned(
            left: MediaQuery.of(context).size.width / 2 - 4,
            right: MediaQuery.of(context).size.width / 2 - 4,
            child: Container(
              height: 200,
              decoration: BoxDecoration(
                color: Colors.grey.shade900,
                borderRadius: BorderRadius.circular(50),
              ),
            ),
          ),
          _isOn ?
Positioned(
//  ابعاد التصميم عندما يتم تشغيل المصباح

            left: MediaQuery.of(context).size.width / 2 - 75,
            right: MediaQuery.of(context).size.width / 2 - 75,
            top: 202,
            child: Transform.scale(
              scale: _scale,
              child: Transform.rotate(
                angle: 3.15,
                child: GestureDetector(
                  onTapDown: _tapDown,
                  onTapUp: _tapUp,
                  onTap: () {
                    setState(() {
                      _isOn = false;
                    });
                  },
child: Image.network('https://ouch-cdn2.icons8.com/X5fB-F4h5Z-W9fimJnFUJ_So5Z2Kh6ULPuw-I6jK790/rs:fit:784:1134/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvNzQ3/LzU1YzYyNmUxLTI5/ZTctNDFmNS04M2Rk/LTZmOTFiMzkwMTQ4/MS5zdmc.png', width: 150,)
                )
              ),
            ),
          ):
            
Positioned(
//  ابعاد التصميم عندما يتم اغلاق المصباح

            left: MediaQuery.of(context).size.width / 2 - 75,
            right: MediaQuery.of(context).size.width / 2 - 75,
            top: 202,
            child: Transform.scale(
              scale: _scale,
              child: Transform.rotate(
                angle: 3.15,
                child: GestureDetector(
                  onTapDown: _tapDown,
                  onTapUp: _tapUp,
                  onTap: () {
                    setState(() {
                      _isOn = true;
                    });
},
child: Image.network('https://ouch-cdn2.icons8.com/GCKndOXpaXkSHmDQvtUOP2yMUrV9LSpXXJRneOqvM2o/rs:fit:784:1134/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvMTY1/L2Q2ZDBkNTkwLTBl/ZDAtNDA5MC05ZjUw/LTIzNGJjZjRmZDdm/Yy5zdmc.png', color: Colors.grey.shade800, width: 150,)
                )
              ),
            ),
          )
        ],
      ),
    );
  }

  void _tapDown(TapDownDetails details) {
    _controller.forward();
  }

  void _tapUp(TapUpDetails details) {
    _controller.reverse();
  }
}

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