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

التعامل مع FutureBuilder في flutter

Flutter Dev

السؤال

تحيه طيبه للجميع

لدي استفسار لو تكرمتم 

لماذا list view  لدى استعمالها مع Future Builder تعمل بدون ان اضع الدالة في initState()؟

وهل يوجد حل حتى اجعلها تعمل فقط لو قمت بوضعها في initState()؟

 

مثل الصفحة التالية:





class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {


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

class _MyHomePageState extends State<MyHomePage> {





  @override
  void initState() {


    super.initState();
  }

  bool showicon=false;
  var apiURL;
  Future getdataCat() async {
    setState(() {
      showicon=true;
    });
    apiURL = '***********************';
    var response = await http.post(Uri.parse(apiURL));
    var responsebody = jsonDecode(response.body);
    if (responsebody.length >0){
      return responsebody;
    }else{
      showicon=false;

    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Flexible(
              child: FutureBuilder(
                future: getdataCat(),
                builder: (context, AsyncSnapshot snapshot) {
                  if (!snapshot.hasData) {
                    // still waiting for data to come
                    return showicon
                        ? Center(
                        child: CircularProgressIndicator(
                          color: Colors.black,

                        ))
                        : SizedBox(
                        height: MediaQuery.of(context).size.height / 1.3,
                        child: Center(
                            child: Image.asset(
                              'assets/data.png',
                              fit: BoxFit.contain,
                              width: 180,
                              height: 180,
                            )));
                  } else if (snapshot.hasData &&
                      snapshot.data.isEmpty &&
                      snapshot.data <= 0) {
                    // got data from snapshot but it is empty

                    return SizedBox(
                        height: MediaQuery.of(context).size.height / 1.3,
                        child: Center(
                            child: Image.asset(
                              'assets/data.png',
                              fit: BoxFit.contain,
                              width: 180,
                              height: 180,
                            )));
                  } else {
                    // got data and it is not empty
                    return

                      GridView.builder(
                        physics: ScrollPhysics(),
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            childAspectRatio: 3.4),
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index) {
                          return Container(
                            child: Card(
                              child: Column(
                                crossAxisAlignment:
                                CrossAxisAlignment.stretch,
                                children: <Widget>[
                                  Flexible(
                                      child: GestureDetector(
                                        child: Column(
                                            crossAxisAlignment:
                                            CrossAxisAlignment.stretch,
                                            children: <Widget>[
                                              Flexible(
                                                child: CachedNetworkImage(
                                                  imageUrl:
                                                  "${snapshot
                                                      .data[index]['image']}",
                                                  height: 180,
                                                  fit: BoxFit.cover,
                                                  errorWidget:
                                                      (context, url, error) =>
                                                      Icon(Icons.error),
                                                ),
                                              ),
                                              Center(
                                                child: Text(
                                                    "${snapshot
                                                        .data[index]['name']}"
                                                )
                                              )
                                            ]),
                                     
                                       
                                      )),
                                ],
                              ),
                            ),
                          );
                              
                        },
                      );

                  }
                },
              ),
            )

          ],
        ),
      ),

    );
  }
}

 

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

Recommended Posts

  • 1
بتاريخ 1 دقيقة مضت قال مروان مروان3:

مرحبا اخي الكريم تم رفع كود الصفحة لو تلاحظ انا لم اضع الميثود getdataCat() في دالة الاستدعاء initState() ولكن رغم ذلك هيا تعمل بشكل مباشر

أرجو تمرير الدالة بالاسم فقط، وليس تنفيذها 

future: getdataCat(),
                 ^^^
=>

future: getdataCat,

حيث أن هذا ما يسبب التنفيذ المباشر

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

  • 1
بتاريخ 3 دقائق مضت قال مروان مروان3:

اعمل كذا احصل على الخطاء التالي اخي:

سبب الشكلة هو نمط الإعادة للدالة getdataCat حاول عملها أن تعيد  كالتالي:

if (responsebody.length >0){
      return Future.value(responsebody);
    }

 

ربما تعدل تعريف الدالة:

Future<List<String>> getdataCat()

 

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

  • 1
بتاريخ 3 دقائق مضت قال مروان مروان3:

لم افهم عليك اخي جيدا

getdataCat تعيد قائمة إن كانت قائمة أغراض برمجية، أي العنصر فيه عدة قيم سوف تكون قائمة من dynamic لأذلك نعدل نمط إرجاع الدالة


Future<<List<dynamic>> getdataCat()..
  
  Future.value(responsebody);

وإذا كانت تعيد سلاسل نصية؟

نوع القيمة المعادة يجب أن يكون نفسه من نمط ما تحسبه و تعيده الدالة.

Future<<List<String>> getdataCat()..
  
  Future.value(responsebody);

أي ما يعيده jsonDecode إن كان كما قلت فسوف نعيد تعديل نمطه من dynamic إلى string

jsonDecode(responsebody).cast<List<String>();

 

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

  • 1
بتاريخ 27 دقائق مضت قال مروان مروان3:

المشكلة اخي الكريم ليس في نوع البيانات المعادة قمت بتجربة كل ما ذكرته انت الدالة تعمل بشكل جيد ولكن الخطاء يظهر مع كلمة future: في FutureBuilder بنفس لما أقوم بإزالة الاقواس يظهر خط احمر اسفل اسم الدالة

طيب متى تريد تنفيذ الدالة

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

  • 0
بتاريخ 5 دقائق مضت قال Wael Aljamal:

هل هي مستدعاة ضمن دالة؟ أرجو إرفاق الملف

مرحبا اخي الكريم تم رفع كود الصفحة لو تلاحظ انا لم اضع الميثود getdataCat() في دالة الاستدعاء initState() ولكن رغم ذلك هيا تعمل بشكل مباشر

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

  • 0
بتاريخ 2 دقائق مضت قال Wael Aljamal:

أرجو تمرير الدالة بالاسم فقط، وليس تنفيذها 


future: getdataCat(),
                 ^^^
=>

future: getdataCat,

حيث أن هذا ما يسبب التنفيذ المباشر

لما اعمل كذا احصل على الخطاء التالي اخي:

The argument type 'Future<dynamic> Function()' can't be assigned to the parameter type 'Future<dynamic>?'.

 

 

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

  • 0
بتاريخ 2 دقائق مضت قال Wael Aljamal:

سبب الشكلة هو نمط الإعادة للدالة getdataCat حاول عملها أن تعيد  كالتالي:


if (responsebody.length >0){
      return Future.value(responsebody);
    }

 

لم ينجح الامر اخي بعدها تظهر خطاء اعتذر على ذلك

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

  • 0
بتاريخ الآن قال مروان مروان3:

لم ينجح الامر اخي بعدها تظهر خطاء

التعليق معدل، تعديل نمط الدالة getdataCat

بتاريخ 3 دقائق مضت قال Wael Aljamal:

سبب الشكلة هو نمط الإعادة للدالة getdataCat حاول عملها أن تعيد  كالتالي:


if (responsebody.length >0){
      return Future.value(responsebody);
    }

 

ربما تعدل تعريف الدالة:


Future<List<String>> getdataCat()

 

 

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

  • 0
بتاريخ 2 دقائق مضت قال Wael Aljamal:

هل تتغير رسالة الخطأ؟

 

لدى استعمال :

 Future<List<String>?> getdataCat() async {

احصل على

The argument type 'Future<List<String>?> Function()' can't be assigned to the parameter type 'Future<dynamic>?

 

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

  • 0
بتاريخ 23 دقائق مضت قال Wael Aljamal:

getdataCat تعيد قائمة إن كانت قائمة أغراض برمجية، أي العنصر فيه عدة قيم سوف تكون قائمة من dynamic لأذلك نعدل نمط إرجاع الدالة



Future<<List<dynamic>> getdataCat()..
  
  Future.value(responsebody);

وإذا كانت تعيد سلاسل نصية؟

نوع القيمة المعادة يجب أن يكون نفسه من نمط ما تحسبه و تعيده الدالة.


Future<<List<String>> getdataCat()..
  
  Future.value(responsebody);

أي ما يعيده jsonDecode إن كان كما قلت فسوف نعيد تعديل نمطه من dynamic إلى string


jsonDecode(responsebody).cast<List<String>();

 

المشكلة اخي الكريم ليس في نوع البيانات المعادة قمت بتجربة كل ما ذكرته انت الدالة تعمل بشكل جيد ولكن الخطاء يظهر مع كلمة future: في FutureBuilder بنفس لما أقوم بإزالة الاقواس يظهر خط احمر اسفل اسم الدالة

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

  • 0
بتاريخ الآن قال Wael Aljamal:

طيب متى تريد تنفيذ الدالة

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

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

  • 0
بتاريخ 50 دقائق مضت قال مروان مروان3:

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

الحالة الافتراضية هنا هو بناء الشجرة مباشرة، وأنت تريد تأخير ذلك. حاول نقل Future Builder ك widget بالكامل إلى دالة، واستدعيها عند الحاجة من خلال تغير في أحد متغيرات الحالة أو نقر زر..

 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...