ايقاف عمل CircularProgressIndicator في فلاتر

Flutter Dev · 14 مارس 2021

السلام عليكم ورحمة الله وبركاته

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

قمت بعمل CircularProgressIndicator في حالة لم توجد بيانات الدائر تظهر وتستمر في الدوران

المشكلة الان ان لو ما كان فيه بيانات بالاساس في قاعدة البيانات هذا الدائرة لا تختفي بمعنى لن تتوقف بل سوف تستمر في الدوران الى ما لا نهاية

كيف يمكن حل هذا المشكلة بحيث لو لم يكن هنالك بيانات مثلا لمدة 5 ثواني سوف تتوقف وتختفي من تلقاء نفسها

لقد قمت بمحاولة عمل ذلك من خلال timer ولكن على ما يبدو خبرتي قليله فالامر لم ينجح لدي

وهذا كود الصفحه كامله:





class YourPost extends StatefulWidget {

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

class _HomePageState extends State<YourPost> {

  MyPreferences _myPreferences = MyPreferences();
  String URL;
  var UserP;
  var C;
  var User;



  final TextEditingController _filter = new TextEditingController();
  List<Flowerdata> _flowersData = List<Flowerdata>();
  List<Flowerdata> _flowersDataForTheListView = List<Flowerdata>();
  var refreshKey = GlobalKey<RefreshIndicatorState>();

  Future<List<Flowerdata>> fetchNotes() async {
    UserP = _myPreferences.id;
    final String url = 'https://*********.com/*********.php?User=' +
        UserP.toString();
    var response = await http.get(url);
    var flowers = List<Flowerdata>();

    if (response.statusCode == 200) {
      var flowersJsonData = json.decode(response.body);
      for (var flower in flowersJsonData) {
        flowers.add(Flowerdata.fromJson(flower));
      }
    }
    else {

      throw Exception('Failed to load data from Server.');
    }
    return flowers;
  }

  @override
  void initState() {
    // initial();
    ShowNotifications.initialization();
    ShowNotifications.notification();
    C= _myPreferences.NameCuntry;

    URL =
        'http://*********/*********.php?C=' +
            C.toString();
    fetchNotes().then((value) {
      setState(() {
        _flowersData.addAll(value);
        _flowersDataForTheListView = _flowersData;
      });
    });
    super.initState();
  }




  @override
  Widget build(BuildContext context) {


    return Scaffold(

      body: RefreshIndicator(
          key: refreshKey,
          child: Column

            (
              children: <Widget>[
                Expanded(
                  child: (_flowersDataForTheListView.isEmpty || _flowersDataForTheListView == null) ?

                  Center(  child: CircularProgressIndicator(
                    valueColor: new AlwaysStoppedAnimation<Color>(Colors.black),
                  ),)

                      : ListView.builder(
                    padding: EdgeInsets.all(5.0),
                    itemCount: _flowersDataForTheListView.length,
                    itemBuilder: (BuildContext context, int index) {

                      return Card(
                        child: Padding(
                          padding: EdgeInsets.all(5.0),
                          child: Column(
                            children: <Widget>[
                              GestureDetector(
                                child: Row(
                                  children: [
                                    _flowersDataForTheListView[index].StateTopic=='0'?
                                    Column(
                                        children: <Widget>[
                                          Container(
                                            height: 70,
                                            width: 5,
                                            child: Align(
                                              alignment: Alignment.centerLeft,
                                              child: Container(
                                                //  height: double.infinity,
                                                //width: 7,
                                                decoration: BoxDecoration(
                                                  color: Color(0xFF81C784),
                                                  borderRadius: new BorderRadius.all(Radius.circular(2.0)),
                                                ),
                                              ),
                                            ),
                                          )
                                        ]
                                    ):

                                    Column(
                                        children: <Widget>[
                                          Container(
                                            height: 70,
                                            width: 5,
                                            child: Align(
                                              alignment: Alignment.centerLeft,
                                              child: Container(
                                                //  height: double.infinity,
                                                //width: 7,
                                                decoration: BoxDecoration(
                                                  color: Colors.blueAccent,
                                                  borderRadius: new BorderRadius.all(Radius.circular(2.0)),
                                                ),
                                              ),
                                            ),
                                          )
                                        ]
                                    ),
                                    Expanded(

                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: <Widget>[

                                          Text(_flowersDataForTheListView[index].Name,style: TextStyle(fontSize: 17)),
                                          SizedBox(height: 5.0,),


                                        ],
                                      ),

                                    ),
                                  ],
                                ),

                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  ),
                )





              ]

    )
    )
      //   onRefresh: refreshList, ),
    );

  }










}

كيف يمكن حل هذا المشكله لمن لديه خبره في هذا الامر لو تكرمتو ماذا يجب ان اغير في الكود

بلال زيادة · 14 مارس 2021

يمكنك استخدام FutureBuilder و التأكد من انه يرجع بيانات أو لا بحيث إذا يرجع بيانات تقوم بإضهارها و إذا لا يرجع تقوم بعرض واجهة فارغ أو نص يخبر المستخدم أنه لا يوجد داتا.

كيف يمكن ذلك FutureBuilder تمكنك من استخدام AsyncSnapshot و هذه تحتوي على خاصية hasData للتأكد من رجوع البيانات أو أنه فارغ فمثلا

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final Future<String> _calculation = Future<String>.delayed(
    const Duration(seconds: 2),
    () => 'Data Loaded',
  );

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: Theme.of(context).textTheme.headline2!,
      textAlign: TextAlign.center,
      child: FutureBuilder<String>(
        future: _calculation, // a previously-obtained Future<String> or null
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          List<Widget> children;
          if (snapshot.hasData) {
            children = <Widget>[
              const Icon(
                Icons.check_circle_outline,
                color: Colors.green,
                size: 60,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Text('Result: ${snapshot.data}'),
              )
            ];
          } else if (snapshot.hasError) {
            children = <Widget>[
              const Icon(
                Icons.error_outline,
                color: Colors.red,
                size: 60,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Text('Error: ${snapshot.error}'),
              )
            ];
          } else {
            children = const <Widget>[
              SizedBox(
                child: CircularProgressIndicator(),
                width: 60,
                height: 60,
              ),
              Padding(
                padding: EdgeInsets.only(top: 16),
                child: Text('Awaiting result...'),
              )
            ];
          }
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: children,
            ),
          );
        },
      ),
    );
  }
}

Flutter Dev · 14 مارس 2021

بتاريخ منذ ساعة مضت قال بلال زيادة:

يمكنك استخدام FutureBuilder و التأكد من انه يرجع بيانات أو لا بحيث إذا يرجع بيانات تقوم بإضهارها و إذا لا يرجع تقوم بعرض واجهة فارغ أو نص يخبر المستخدم أنه لا يوجد داتا.

كيف يمكن ذلك FutureBuilder تمكنك من استخدام AsyncSnapshot و هذه تحتوي على خاصية hasData للتأكد من رجوع البيانات أو أنه فارغ فمثلا


/// Flutter code sample for FutureBuilder

// This sample shows a [FutureBuilder] that displays a loading spinner while it
// loads data. It displays a success icon and text if the [Future] completes
// with a result, or an error icon and text if the [Future] completes with an
// error. Assume the `_calculation` field is set by pressing a button elsewhere
// in the UI.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

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

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final Future<String> _calculation = Future<String>.delayed(
    const Duration(seconds: 2),
    () => 'Data Loaded',
  );

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: Theme.of(context).textTheme.headline2!,
      textAlign: TextAlign.center,
      child: FutureBuilder<String>(
        future: _calculation, // a previously-obtained Future<String> or null
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          List<Widget> children;
          if (snapshot.hasData) {
            children = <Widget>[
              const Icon(
                Icons.check_circle_outline,
                color: Colors.green,
                size: 60,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Text('Result: ${snapshot.data}'),
              )
            ];
          } else if (snapshot.hasError) {
            children = <Widget>[
              const Icon(
                Icons.error_outline,
                color: Colors.red,
                size: 60,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Text('Error: ${snapshot.error}'),
              )
            ];
          } else {
            children = const <Widget>[
              SizedBox(
                child: CircularProgressIndicator(),
                width: 60,
                height: 60,
              ),
              Padding(
                padding: EdgeInsets.only(top: 16),
                child: Text('Awaiting result...'),
              )
            ];
          }
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: children,
            ),
          );
        },
      ),
    );
  }
}

مرحبا اخي قمت بتطبيق ذلك بشكل التالي :





class YourPost extends StatefulWidget {

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

class _HomePageState extends State<YourPost> {
  MyPreferences _myPreferences = MyPreferences();
  String URL;
  var UserP;
  var C;
  var User;



  final TextEditingController _filter = new TextEditingController();
  List<Flowerdata> _flowersData = List<Flowerdata>();
  List<Flowerdata> _flowersDataForTheListView = List<Flowerdata>();
  var refreshKey = GlobalKey<RefreshIndicatorState>();

  Future<List<Flowerdata>> fetchNotes() async {
    UserP = _myPreferences.id;
    final String url = 'https://*********.com/*********.php?User=' +
        UserP.toString();
    var response = await http.get(url);
    var flowers = List<Flowerdata>();

    if (response.statusCode == 200) {
      var flowersJsonData = json.decode(response.body);
      for (var flower in flowersJsonData) {
        flowers.add(Flowerdata.fromJson(flower));
      }
    }
    else {

      throw Exception('Failed to load data from Server.');
    }
    return flowers;
  }

  @override
  void initState() {
   
    C= _myPreferences.NameCuntry;

    URL =
        'http://*********/*********.php?C=' +
            C.toString();
    fetchNotes().then((value) {
      setState(() {
        _flowersData.addAll(value);
        _flowersDataForTheListView = _flowersData;
      });
    });
    super.initState();
  }



  @override
  Widget build(BuildContext context) {


    return Scaffold(

      body: RefreshIndicator(
          key: refreshKey,

          child: Column

            (
              children: <Widget>[



                Expanded(

                  child: FutureBuilder<List<Flowerdata>>(


                    future: fetchNotes(),

                    builder: (context, snapshot) {
                      List<Widget> children;
                      if (!snapshot.hasData){

                        return ListView(
                          padding: EdgeInsets.all(8),
                          children: snapshot.data.map((data) =>

                              Card(

                                child: Column(

                                  children: <Widget>[

                                    GestureDetector(

                                      child: Row(

                                        // mainAxisAlignment: MainAxisAlignment.end ,

                                          children: [

                                            Container(
                                                margin: EdgeInsets.all(5),
                                                

                                                )
                                            ),



                                            Flexible(
                                              child: Column(
                                                crossAxisAlignment: CrossAxisAlignment.start,
                                                children: <Widget>[
                                                  Text(data.Name,style: TextStyle(fontSize: 17)),
                                                  SizedBox(height: 5.0,),

                                                  
                                                  )
                                                ],
                                              ),


                                            ),




                                          ]
                                      ),
                                    ),
                                    // Divider(color: Colors.black),
                                  ],




                                ),

                              )

                          )

                              .toList(),
                        );


                      }else if(!snapshot.hasError){





                      }else {
                        children = const <Widget>[
                          SizedBox(
                            child: CircularProgressIndicator(),
                            width: 60,
                            height: 60,
                          ),
                          Padding(
                            padding: EdgeInsets.only(top: 16),
                            child: Text('Awaiting result...'),
                          )
                        ];
                      }





                    },

                  ),),




              ]

    )
      )
      
    );

  }










}

ولكن احصل على الخطاء التالي:

The method 'map' was called on null.
Receiver: null
Tried calling: map<Card>(Closure: (Flowerdata) => Card)

بلال زيادة · 14 مارس 2021

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

مرحبا اخي قمت بتطبيق ذلك بشكل التالي :






class YourPost extends StatefulWidget {

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

class _HomePageState extends State<YourPost> {
  MyPreferences _myPreferences = MyPreferences();
  String URL;
  var UserP;
  var C;
  var User;



  final TextEditingController _filter = new TextEditingController();
  List<Flowerdata> _flowersData = List<Flowerdata>();
  List<Flowerdata> _flowersDataForTheListView = List<Flowerdata>();
  var refreshKey = GlobalKey<RefreshIndicatorState>();

  Future<List<Flowerdata>> fetchNotes() async {
    UserP = _myPreferences.id;
    final String url = 'https://*********.com/*********.php?User=' +
        UserP.toString();
    var response = await http.get(url);
    var flowers = List<Flowerdata>();

    if (response.statusCode == 200) {
      var flowersJsonData = json.decode(response.body);
      for (var flower in flowersJsonData) {
        flowers.add(Flowerdata.fromJson(flower));
      }
    }
    else {

      throw Exception('Failed to load data from Server.');
    }
    return flowers;
  }

  @override
  void initState() {
   
    C= _myPreferences.NameCuntry;

    URL =
        'http://*********/*********.php?C=' +
            C.toString();
    fetchNotes().then((value) {
      setState(() {
        _flowersData.addAll(value);
        _flowersDataForTheListView = _flowersData;
      });
    });
    super.initState();
  }



  @override
  Widget build(BuildContext context) {


    return Scaffold(

      body: RefreshIndicator(
          key: refreshKey,

          child: Column

            (
              children: <Widget>[



                Expanded(

                  child: FutureBuilder<List<Flowerdata>>(


                    future: fetchNotes(),

                    builder: (context, snapshot) {
                      List<Widget> children;
                      if (!snapshot.hasData){

                        return ListView(
                          padding: EdgeInsets.all(8),
                          children: snapshot.data.map((data) =>

                              Card(

                                child: Column(

                                  children: <Widget>[

                                    GestureDetector(

                                      child: Row(

                                        // mainAxisAlignment: MainAxisAlignment.end ,

                                          children: [

                                            Container(
                                                margin: EdgeInsets.all(5),
                                                

                                                )
                                            ),



                                            Flexible(
                                              child: Column(
                                                crossAxisAlignment: CrossAxisAlignment.start,
                                                children: <Widget>[
                                                  Text(data.Name,style: TextStyle(fontSize: 17)),
                                                  SizedBox(height: 5.0,),

                                                  
                                                  )
                                                ],
                                              ),


                                            ),




                                          ]
                                      ),
                                    ),
                                    // Divider(color: Colors.black),
                                  ],




                                ),

                              )

                          )

                              .toList(),
                        );


                      }else if(!snapshot.hasError){





                      }else {
                        children = const <Widget>[
                          SizedBox(
                            child: CircularProgressIndicator(),
                            width: 60,
                            height: 60,
                          ),
                          Padding(
                            padding: EdgeInsets.only(top: 16),
                            child: Text('Awaiting result...'),
                          )
                        ];
                      }





                    },

                  ),),




              ]

    )
      )
      
    );

  }










}

ولكن احصل على الخطاء التالي:


The method 'map' was called on null.
Receiver: null
Tried calling: map<Card>(Closure: (Flowerdata) => Card)

في قيمة خاطئة داخل Model وهي map يمكنك تفادي إذا كانت null تقوم بإرجاع null أو تتركها فارغة مثل

map: json['map'] == null ? null : json["map"],

ايقاف عمل CircularProgressIndicator في فلاتر

السؤال

Flutter Dev

3 أجوبة على هذا السؤال

Recommended Posts

بلال زيادة

Flutter Dev

بلال زيادة

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية