شرح كيفية تحريك و اسقاط العناصر في فلاتر | drag and drop widget in Flutter

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

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

drag and drop widget in Flutter

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

main1.dart


class _GeeCodersState extends State<GeeCoders> {
  Offset _offset = const Offset(200,250);

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: LayoutBuilder(
          builder: (context, constraints) {
            return Stack(
              children: [
                Positioned(
                  left: _offset.dx,
                  top: _offset.dy,
                  child: LongPressDraggable(
                    feedback: Image.network("https://images.unsplash.com/photo-1669490893279-4589b3b1cf4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",height: 200,color: Colors.cyan,),
                    child: Image.network("https://images.unsplash.com/photo-1669490893279-4589b3b1cf4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",height: 200,),
                    onDragEnd: (details) {
                      setState(() {
                        final adjustment = MediaQuery.of(context).size.height -
                            constraints.maxHeight;
                        _offset = Offset(
                            details.offset.dx, details.offset.dy - adjustment);

                        print(_offset.dx);
                        print(_offset.dy);
                      });
                    },
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

How to Dropping an item Flutter

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

main2.dart


class _GeeCodersState extends State<GeeCoders> {
  String img = 'https://images.unsplash.com/photo-1669490893279-4589b3b1cf4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80';
  final String _color = 'red';
  bool _isDropped = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            Draggable(
              // Data is the value this Draggable stores.
              data: _color,
              // after long click
              childWhenDragging: SizedBox(
                height: 220.0,
                width: 220.0,
                child: Center(
                  child: Container(
                    color: Colors.grey,
                    // height: 200,
                  ),
                ),
              ),
              // after drag
              feedback: SizedBox(
                height: 220.0,
                width: 220.0,
                child: Center(
                  child: Image.network(
                    img,
                    fit: BoxFit.cover,
                    width: 220.0,
                    height: 200,
                  ),
                ),
              ),
              // child
              child: SizedBox(
                height: 220.0,
                width: 220.0,
                child: Center(
                  child: _isDropped ? const SizedBox.shrink() : Image.network(img,fit: BoxFit.cover,height: 220,width: 220,),
                ),
              ),
            ),
            SizedBox(height: 100,),
            DragTarget(
              builder: (
                  BuildContext context,
                  List<dynamic> accepted,
                  List<dynamic> rejected,
                  ) {
                return Container(
                  height: 220,
                  width: 220,
                  child: Center(
                    child: _isDropped ? Image.network(img,fit: BoxFit.cover,height: 220,width: 220,) : Container(height: 220,width: 220,color: Colors.grey,),
                  ),
                );
              },
              onWillAccept: (data) {
                return data == 'red';
              },
              onAccept: (data) {
                setState(() {

                  showTopSnackBar(
                    Overlay.of(context),
                    CustomSnackBar.success(
                      message:
                      "Good job",
                    ),
                  );

                  _isDropped = true;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

شارك المقالة

شرح كيفية تحريك و اسقاط العناصر في فلاتر | drag and drop widget in Flutter