• 0

تحديد قيمة او عدد Dots في PageView في flutter

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

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

قمت بستعمال PageView  لعرض مجموعة من الصور ويوجد موشر Dots  لعرض حركة الصور من قبل المستخدم. 

المشكله ان Dots  استطيع وضع قيمته اعتمادنا على  رقم انا اقوم بتحديده  في بداية الامر  من خلال :

  static const int MAX = 4;

 

ولكن قد يكون ليس لدي هذا العدد او القيمة من الصور في قاعدة البيانات التي تجلب  الصور للمستخدم بمعنى سوف يكون Dots  فارغ لو لم يحتوي على صور .

كيف يمكن التحكم في عدد Dots  بحيث لو كنت امتلك ثلاث صور على سبيل المثال يظهر فقط  ثلاثل  Dots  

قمت بستعمال الكود التالي لعمل هذا الامر:




class BadUserMain extends StatefulWidget {
  
  @override
  State<StatefulWidget> createState() {
    return new JsonImageListWidget();
  }
}

class JsonImageList extends StatefulWidget {

  JsonImageListWidget createState() => JsonImageListWidget();

}

class JsonImageListWidget extends State {


  List<UsersData> users = List();
  List<UsersData> filteredUsers = List();

  int page = 0;
  static const int MAX = 4;



  var apiURL;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();


    FetchUserData().then((value) {
      setState(() {
        users.addAll(value);
        filteredUsers = users;
      });
    });
  }


  Future<List<UsersData>> FetchUserData() async {
    apiURL = 'https://*****************.php';
    var response = await http.post(Uri.parse(apiURL));
    
    if (response.statusCode == 200) {
      final items = json.decode(response.body).cast<Map<String, dynamic>>();
      List<UsersData> listOfFruits = items.map<UsersData>((json) {
        return UsersData.fromJson(json);
      }).toList();

      return listOfFruits;

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





  @override
  Widget build(BuildContext context) {
    return
      Scaffold(
        body: SingleChildScrollView(
        child: Column(
        children: <Widget>[
        Card(
        shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)),
    elevation: 2,
    margin: EdgeInsets.all(0),
    child: Container(
      width: double.infinity,
      height: 400,
    child: Stack(
        children: <Widget>[
   PageView.builder(

       onPageChanged: onPageViewChange,
              itemCount: filteredUsers.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(

                                child: Column(
                                  children: <Widget>[

                                InkWell(
                                        child: Image.network(
                                    filteredUsers[index].     image.toString(),
                                          width: double.infinity,
                                          height: 400,
                                          fit: BoxFit.cover,
                                        ),
                              
                                        ),
                                        ]
                                    ),



                );
              }
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              height: 40,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.black.withOpacity(0.0), Colors.black.withOpacity(0.5)])
              ),
              child: Align(
                alignment: Alignment.center,
                child: buildDots(context),
              ),
            ),
          )
      ]

    ),
    )
    )
    ]
        )
        ),


      );

  }


  void onPageViewChange(int _page) {
    page = _page;
    setState(() {});
  }

  Widget buildDots(BuildContext context){
    Widget widget;

    List<Widget> dots = [];
    for(int i=0; i<MAX; i++){
      Widget w = Container(
        margin: EdgeInsets.symmetric(horizontal: 5),
        height: 8,
        width: 8,
        child: CircleAvatar(
          backgroundColor: page == i ? Colors.blue : Colors.grey[100],
        ),
      );
      dots.add(w);
    }
    widget = Row(
      mainAxisSize: MainAxisSize.min,
      children: dots,
    );
    return widget;
  }


}

 

تمّ تعديل بواسطة مروان مروان3
1 شخص أعجب بهذا

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


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

يمكنك تمرير عدد List المستخدمة إلى Widget BuildDots بحيث في شرط التكرار 

for(int i=0; i<MAX; i++){
	....
}

يكون مثلا متغير i أصغر من عدد List بهذا الشكل 

filteredUsers.length

فيصبح شرك التكرار بهذا الشكل 

for(int i=0; i<filteredUsers.length; i++){
	....
}

يمكنك تجربة ذلك 

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

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1
بتاريخ 1 دقيقة مضت قال مروان مروان3:

لقد نجح الامر

شكرا لك اخي الكريم

هل يمكنك وضع الكود كاملا هنا بعد نجاحه ليستفيد منه الاخرين. 

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

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 9 دقائق مضت قال بلال زيادة:

يمكنك تمرير عدد List المستخدمة إلى Widget BuildDots بحيث في شرط التكرار 


for(int i=0; i<MAX; i++){
	....
}

يكون مثلا متغير i أصغر من عدد List بهذا الشكل 


filteredUsers.length

فيصبح شرك التكرار بهذا الشكل 


for(int i=0; i<filteredUsers.length; i++){
	....
}

يمكنك تجربة ذلك 

لقد نجح الامر

شكرا لك اخي الكريم

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

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 5 دقائق مضت قال بلال زيادة:

هل يمكنك وضع الكود كاملا هنا بعد نجاحه ليستفيد منه الاخرين. 

بطبع اخي الكريم

الكود بعد التعديل اصبح كالتالي:

class BadUserMain extends StatefulWidget {
  
  @override
  State<StatefulWidget> createState() {
    return new JsonImageListWidget();
  }
}

class JsonImageList extends StatefulWidget {

  JsonImageListWidget createState() => JsonImageListWidget();

}

class JsonImageListWidget extends State {


  List<UsersData> users = List();
  List<UsersData> filteredUsers = List();

  int page = 0;
  



  var apiURL;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();


    FetchUserData().then((value) {
      setState(() {
        users.addAll(value);
        filteredUsers = users;
      });
    });
  }


  Future<List<UsersData>> FetchUserData() async {
    apiURL = 'https://*****************.php';
    var response = await http.post(Uri.parse(apiURL));
    
    if (response.statusCode == 200) {
      final items = json.decode(response.body).cast<Map<String, dynamic>>();
      List<UsersData> listOfFruits = items.map<UsersData>((json) {
        return UsersData.fromJson(json);
      }).toList();

      return listOfFruits;

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





  @override
  Widget build(BuildContext context) {
    return
      Scaffold(
        body: SingleChildScrollView(
        child: Column(
        children: <Widget>[
        Card(
        shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)),
    elevation: 2,
    margin: EdgeInsets.all(0),
    child: Container(
      width: double.infinity,
      height: 400,
    child: Stack(
        children: <Widget>[
   PageView.builder(

       onPageChanged: onPageViewChange,
              itemCount: filteredUsers.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(

                                child: Column(
                                  children: <Widget>[

                                InkWell(
                                        child: Image.network(
                                    filteredUsers[index].     image.toString(),
                                          width: double.infinity,
                                          height: 400,
                                          fit: BoxFit.cover,
                                        ),
                              
                                        ),
                                        ]
                                    ),



                );
              }
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              height: 40,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.black.withOpacity(0.0), Colors.black.withOpacity(0.5)])
              ),
              child: Align(
                alignment: Alignment.center,
                child: buildDots(context),
              ),
            ),
          )
      ]

    ),
    )
    )
    ]
        )
        ),


      );

  }


  void onPageViewChange(int _page) {
    page = _page;
    setState(() {});
  }

  Widget buildDots(BuildContext context){
    Widget widget;

    List<Widget> dots = [];
    for(int i=0; i<filteredUsers.length; i++){
      Widget w = Container(
        margin: EdgeInsets.symmetric(horizontal: 5),
        height: 8,
        width: 8,
        child: CircleAvatar(
          backgroundColor: page == i ? Colors.blue : Colors.grey[100],
        ),
      );
      dots.add(w);
    }
    widget = Row(
      mainAxisSize: MainAxisSize.min,
      children: dots,
    );
    return widget;
  }


}

 

تمّ تعديل بواسطة مروان مروان3
1 شخص أعجب بهذا

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


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

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

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

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


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

تسجيل الدخول

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


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