اذهب إلى المحتوى
  • 0

تنفيذ Switch مخصص بثلاث حالات مع إظهار نص بعد الضغط عليه في Flutter

جود بدر

السؤال

السلام عليكم 

ابي اسوي Switch من ثلاث خانات لكن يكون عبارة عن ايقونة وبعد ما اضغط عليه يطلع Text 

ارفقت صور لتوضيع الطلب 

IMG_1647.jpg

IMG_1645.jpg

تم التعديل في بواسطة Mustafa Suleiman
تعديل عنوان السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

أولاً، تحتاج إلى إضافة الصورة والنص في الواجهة. باستخدام Row لعرضهما جنبًا إلى جنب:

import 'package:flutter/material.dart';

class CustomSwitch extends StatefulWidget {
  @override
  _CustomSwitchState createState() => _CustomSwitchState();
}

class _CustomSwitchState extends State<CustomSwitch> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(
          _isSwitched ? Icons.check_box : Icons.check_box_outline_blank,
          color: _isSwitched ? Colors.green : Colors.grey,
        ),
        SizedBox(width: 8),
        GestureDetector(
          onTap: () {
            setState(() {
              _isSwitched = !_isSwitched;
            });
          },
          child: Text(
            _isSwitched ? 'تم التفعيل' : 'غير مفعل',
            style: TextStyle(
              color: _isSwitched ? Colors.green : Colors.grey,
            ),
          ),
        ),
      ],
    );
  }
}

ثم استخدم CustomSwitch في أي مكان ترغب فيه داخل تطبيقك، كالتالي:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Switch'),
        ),
        body: Center(
          child: CustomSwitch(),
        ),
      ),
    );
  }
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...