• 0

تعريف ثلاث خيارت للمستخدم في فلاتر

هل أقوم بعمل الشكل التالي؟

بحيث: يمكن للمستخدم اختيار خيار واحد فقط مع كيفية الحصول على القيمة المدخلة

hsoub.jpg

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

يمكنك أستخدام   Widget RadioListTile بحيث تضع أكثر من خيار و عندما يقوم المستخدم بأختيار أي خيار موجود تأخذ قيمته, ستقوم بتعريف enum تحتوي الخيارات الثلاثة 

enum RadioValues { _, yes, no}

ثم تقوم بتعريف متغير وليكن اسمه _values 

RadioValues  _values = RadioValues.yes;

وتقوم بإعطاءه قيمة افتراضية, ثم تنشأ Column لأحتواء الخيارات الثلاثة مثل 

Column(
      children: [
        RadioListTile<RadioValues>(
            title: Text("_"),
            value: RadioValues._,
            groupValue: _values,
            onChanged: (RadioValues value){
              setState(() {
                _values = value;
              });
            }),

        RadioListTile<RadioValues>(
            title: Text("Yes"),
            value: RadioValues.yes,
            groupValue: _values,
            onChanged: (RadioValues value){
              setState(() {
                _values = value;
              });
            }),

        RadioListTile<RadioValues>(
            title: Text("No"),
            value: RadioValues.no,
            groupValue: _values,
            onChanged: (RadioValues value){
              setState(() {
                _values = value;
              });
            }),
      ],
    );

و في دالة onChanged تقوم بتعريف setState ليقوم عند التغيير إلى خيار يحفظ قيمة الخيار الجديد وتخزينها في متغير values_. 

كامل الكود 

import 'package:flutter/material.dart';

enum RadioValues { _, yes, no}

class RadioTest extends StatefulWidget {
  @override
  _RadioTestState createState() => _RadioTestState();
}

class _RadioTestState extends State<RadioTest> {

  RadioValues  _values = RadioValues.yes;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            RadioListTile<RadioValues>(
                title: Text("_"),
                value: RadioValues._,
                groupValue: _values,
                onChanged: (RadioValues value){
                  setState(() {
                    _values = value;
                  });
                }),

            RadioListTile<RadioValues>(
                title: Text("Yes"),
                value: RadioValues.yes,
                groupValue: _values,
                onChanged: (RadioValues value){
                  setState(() {
                    _values = value;
                  });
                }),

            RadioListTile<RadioValues>(
                title: Text("No"),
                value: RadioValues.no,
                groupValue: _values,
                onChanged: (RadioValues value){
                  setState(() {
                    _values = value;
                  });
                }),
          ],
        ),
      ),
    );
  }
}

 

10.png

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن