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

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

Flutter Dev

السؤال

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

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

قمت بستعمال 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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 دقيقة مضت قال مروان مروان3:

لقد نجح الامر

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

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

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

  • 0
بتاريخ 9 دقائق مضت قال بلال زيادة:

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


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

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


filteredUsers.length

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


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

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

لقد نجح الامر

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

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

  • 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...