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

أولاً، تحتاج إلى إضافة الصورة والنص في الواجهة. باستخدام 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(),
        ),
      ),
    );
  }
}