ربط carousel_slider مع قاعدة بيانات flutter

Flutter Dev · 12 أبريل 2021

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

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

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

قمت بستعمال المكون الاضافي من فلاتر carousel_slider

المشكله انني حاولت القيام بربطه مع قاعدة بيانات mysql ولكن لم ينجح الامر لدي

احتاج الى مساعده في ربطه مع قاعدة بيانات mysql

هذا الكود المستعمل بشكل كامل وهو الان شغال 100%100 ولكن الان ليس من قاعدة بيانات ياتي بصور

قمت بانشاء قاعدة البيانات وقمت باضافة 3 حقول بشكل التالي

id - image - name

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

final List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];

void main() => runApp(CarouselWithIndicator());



final List child = map<Widget>(
  imgList,
      (index, i) {
    return Container(
      margin: EdgeInsets.all(5.0),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(5.0)),
        child: Stack(children: <Widget>[
          Image.network(i, fit: BoxFit.cover, width: 1000.0),
          Positioned(
            bottom: 0.0,
            left: 0.0,
            right: 0.0,
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Color.fromARGB(200, 0, 0, 0), Color.fromARGB(0, 0, 0, 0)],
                  begin: Alignment.bottomCenter,
                  end: Alignment.topCenter,
                ),
              ),
              padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
              child: Text(
                'No. $index image',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ]),
      ),
    );
  },
).toList();

List<T> map<T>(List list, Function handler) {
  List<T> result = [];
  for (var i = 0; i < list.length; i++) {
    result.add(handler(i, list[i]));
  }

  return result;
}

class CarouselWithIndicator extends StatefulWidget {
  @override
  _CarouselWithIndicatorState createState() => _CarouselWithIndicatorState();
}

class _CarouselWithIndicatorState extends State<CarouselWithIndicator> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Carousel slider demo')),
        body: ListView(
          children: <Widget>[

         Column(children: [
          CarouselSlider(
          items: child,
          autoPlay: true,
          enlargeCenterPage: true,
          aspectRatio: 2.0,
          onPageChanged: (index) {
            setState(() {
              _current = index;
            });
          },
        ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: map<Widget>(
              imgList,
                  (index, url) {
                return Container(
                  width: 8.0,
                  height: 8.0,
                  margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: _current == index
                          ? Color.fromRGBO(0, 0, 0, 0.9)
                          : Color.fromRGBO(0, 0, 0, 0.4)),
                );
              },
            ),
          ),
          ]),

          ],
        ),
      ),
    );

  }
}

ايضا ملف php جاهز لدي وهو يعمل 100%100:

<?php


include 'con.php';


$sql = "SELECT * FROM SlideShow";

$stmt = $con->prepare($sql); 



$stmt->execute();

$result = $stmt->get_result();

 

 
if ($result) {
 
 
	 while($row[] = $result->fetch_assoc()) {
	 
	 $item = $row;
	 
	 $json = json_encode($item, JSON_NUMERIC_CHECK);
	 
	 }
 
} else {
  
   echo "No Data Found.";
}
 echo $json;
$con->close();

فقط مشكلتي في كود لفلاتر ياليت من لديه خبره يساعدنا ولكم جزيل الشكر

بلال زيادة · 12 أبريل 2021

حتضيف متغير وليكن هكذا

var items = [];

ثم حتعمل loop بهذا الشكل للبيانات التي تم إرجاعها من api

for (int i = 0; i < kSlidersImages.length; i++) {
	items.add(Image.network(kSlidersImages[i]));
}

ثم بداخل SliderCarousel ستضع التالي

items: items,

Flutter Dev · 12 أبريل 2021

مرحبا اخي @بلال زيادة

شكرا على ردك

ولكن لم يكن قصدي بشكل الذي تفضلت به

انظر لقد قمت بتعديل الكود واصبح يعمل بشكل تمام ولكن توجد مشكله مختلفه

كيف يمكنني نقل الصوره عند الضغط عليها الى صفحه مختلفه؟ بحيث يكون لو المستخدم نقل على الصوره الصوره سوف تنتقل الى صفحه مختلفه ؟

او هل يمكن نقل ال id الخاص ب صوره؟

كل صوره في قاعدة البيانات لدي تمتلك id منفرد لو امكن نقل id مع النقر على الصوره استطيع استعماله لجلب بيانات الصوره في الصفحة التاليه

هل يمكن نقله ؟




void main() => runApp(MaterialApp(home: Demo()));

class Demo extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<Demo> {
String SelectIdCategory;
bool lodaing=true;
  List data;
  Future GetAllCategory()async{
    var response=await http.get("https://**********************.php"
        , headers: {"Accept": "application/json"}
    );
    var jsoBody = response.body;
    var jsoData =json.decode(jsoBody);
    setState(() {
      data= jsoData;
      lodaing=false;
    });
   //   print('cvdddbnm$jsoData');
  }
@override
  void initState() {
    // TODO: implement initState
    super.initState();

    GetAllCategory();
  }

  @override
  Widget build(BuildContext context) {


    return Scaffold(
      body:lodaing?   CircularProgressIndicator() :

      GestureDetector(

        child: Center(
        child: SizedBox(
          height: 150.0,
          width: 300.0,

          child: InkWell(
            onTap: () {
              

            },

            child: Carousel(
            //    onImageTap:(index) { print(index.toString()); } ,
              boxFit: BoxFit.cover,
              autoplay: true,
              dotSize: 4.0,
              dotSpacing: 15.0,
              dotColor: Colors.lightGreenAccent,
              indicatorBgPadding: 5.0,
              dotBgColor: Colors.purple.withOpacity(0.5),
              borderRadius: true,
              //   onImageChange: (prev, next) {_selectedIndex = next;}, initialIndex: selectedItem,
              images:

              data  .map(
                    (list) {

                  return Image.network(list['image']);


                },
              ).toList(),


            ),



          ),
        ),
      ),
      )




    );
  }
}
class ImageScreen extends StatefulWidget {
  final String url;
  ImageScreen(this.url);

  @override
  _MyImageScreen createState() => _MyImageScreen(url);
}

class _MyImageScreen extends State<ImageScreen> {
  final String url;
  _MyImageScreen(this.url);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('ImageScreen'),
        ),
        body: Image.network(url, width: double.infinity));
  }

Wael Aljamal · 12 أبريل 2021

بتاريخ 6 ساعات قال مروان مروان3:

كل صوره في قاعدة البيانات لدي تمتلك id منفرد لو امكن نقل id مع النقر على الصوره استطيع استعماله لجلب بيانات الصوره في الصفحة التاليه

مرحبا مروان،

نعم نستطيع معرفة الصورة المنقولة و الأفضل أن تستعمل shared_preference فهي الأسهل و الأسرع و لمنع تكرار الصور استخدم المكتية cached_network_image

أعتقد أن الأفضل من تخزين الصور ك imgList List احفظهم بصيغة جيسون بحيث تحوي على ال id و الرابط وأيضا يمكنك تحميلها و تخزينها في shared_preference و دائما الوصول للصورة عن طريق المعرف ومن خلال غرض json نقراء الرابط و نطلبه من خلال cached_network_image ليتم جلب الصور بسرعة

Flutter Dev · 12 أبريل 2021

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

مرحبا مروان،

نعم نستطيع معرفة الصورة المنقولة و الأفضل أن تستعمل shared_preference فهي الأسهل و الأسرع و لمنع تكرار الصور استخدم المكتية cached_network_image

أعتقد أن الأفضل من تخزين الصور ك imgList List احفظهم بصيغة جيسون بحيث تحوي على ال id و الرابط وأيضا يمكنك تحميلها و تخزينها في shared_preference و دائما الوصول للصورة عن طريق المعرف ومن خلال غرض json نقراء الرابط و نطلبه من خلال cached_network_image ليتم جلب الصور بسرعة

مرحبا اخي

شاكر لك ملاحظاتك الغالي

بس ياليت لو تكرمت اذا فيه اكواد لعمل هذا حقيقه الامر صعب علي قليلا بدون بعض الاكواد

ياليت اذا فيه مثال على ذلك

Wael Aljamal · 12 أبريل 2021

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

ياليت اذا فيه مثال على ذلك

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

رابط المكتبة : cached_network_image

إذا كانت الفكرة صعبة .. قم فقط بتخزين رقم الصورة التي نقر عليها المستخدم ثم حفظها في shared_preference ومن ثم استدعاء نفس الصورة لنفس الدليل ضمن imgList.

يمكنك استخدام التأثير HERO في flutter الذي يعطي تأثير انتقال جميل بين الشاشات بتكبير الصورة و عمل تأثيرات حركية.

بالتوفيق

Flutter Dev · 12 أبريل 2021

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

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

رابط المكتبة : cached_network_image

إذا كانت الفكرة صعبة .. قم فقط بتخزين رقم الصورة التي نقر عليها المستخدم ثم حفظها في shared_preference ومن ثم استدعاء نفس الصورة لنفس الدليل ضمن imgList.

يمكنك استخدام التأثير HERO في flutter الذي يعطي تأثير انتقال جميل بين الشاشات بتكبير الصورة و عمل تأثيرات حركية.

بالتوفيق

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

 images:

              data  .map(
                    (list) {

                 
                  return Image.network(list['image']+list['id'].toString());



                },

              )
                  .toList(),

Wael Aljamal · 12 أبريل 2021

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

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

تمام، من خلال ال id يمكن الوصول للرابط عن طريق الدليل أي

imgList[id]

ضع الرابط مباشرة في shared_preference واستخدمه في الشاشة التالية

بلال زيادة · 13 أبريل 2021

بتاريخ 15 ساعات قال مروان مروان3:

مرحبا اخي @بلال زيادة

شكرا على ردك

ولكن لم يكن قصدي بشكل الذي تفضلت به

انظر لقد قمت بتعديل الكود واصبح يعمل بشكل تمام ولكن توجد مشكله مختلفه

كيف يمكنني نقل الصوره عند الضغط عليها الى صفحه مختلفه؟ بحيث يكون لو المستخدم نقل على الصوره الصوره سوف تنتقل الى صفحه مختلفه ؟

او هل يمكن نقل ال id الخاص ب صوره؟

كل صوره في قاعدة البيانات لدي تمتلك id منفرد لو امكن نقل id مع النقر على الصوره استطيع استعماله لجلب بيانات الصوره في الصفحة التاليه

هل يمكن نقله ؟





void main() => runApp(MaterialApp(home: Demo()));

class Demo extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<Demo> {
String SelectIdCategory;
bool lodaing=true;
  List data;
  Future GetAllCategory()async{
    var response=await http.get("https://**********************.php"
        , headers: {"Accept": "application/json"}
    );
    var jsoBody = response.body;
    var jsoData =json.decode(jsoBody);
    setState(() {
      data= jsoData;
      lodaing=false;
    });
   //   print('cvdddbnm$jsoData');
  }
@override
  void initState() {
    // TODO: implement initState
    super.initState();

    GetAllCategory();
  }

  @override
  Widget build(BuildContext context) {


    return Scaffold(
      body:lodaing?   CircularProgressIndicator() :

      GestureDetector(

        child: Center(
        child: SizedBox(
          height: 150.0,
          width: 300.0,

          child: InkWell(
            onTap: () {
              

            },

            child: Carousel(
            //    onImageTap:(index) { print(index.toString()); } ,
              boxFit: BoxFit.cover,
              autoplay: true,
              dotSize: 4.0,
              dotSpacing: 15.0,
              dotColor: Colors.lightGreenAccent,
              indicatorBgPadding: 5.0,
              dotBgColor: Colors.purple.withOpacity(0.5),
              borderRadius: true,
              //   onImageChange: (prev, next) {_selectedIndex = next;}, initialIndex: selectedItem,
              images:

              data  .map(
                    (list) {

                  return Image.network(list['image']);


                },
              ).toList(),


            ),



          ),
        ),
      ),
      )




    );
  }
}
class ImageScreen extends StatefulWidget {
  final String url;
  ImageScreen(this.url);

  @override
  _MyImageScreen createState() => _MyImageScreen(url);
}

class _MyImageScreen extends State<ImageScreen> {
  final String url;
  _MyImageScreen(this.url);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('ImageScreen'),
        ),
        body: Image.network(url, width: double.infinity));
  }

يمكنك من صنع دالة يكون استخدامها عند الضغط على الصورة

void _gotoSingleImage(ImageModel imageModel, BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SingleImage(imageModel)),
    );
}

ثم في دالة onPressed تضع التالي

_gotoSingleImage(imageModel[index], context);

ثم في الواجهة الثانية وليكن مثلا اسم الكلاس هو

class ImageCategory extends StatefulWidget {

	// باقي كود الواجهة
}

قم بإنشاء متغير وليكن هكذا

final ImageModel imageModel;

ثم constructor يكون بهذا الشكل

ImageCategory(this.imageModel);

أي يكون الكلاس بهذا الشكل

class SingleImage extends StatefulWidget {
  final ImageModel imageModel;
  SingleImage(this.imageModel);

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

class _SingleImageState extends State<SingleImage> {

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
		// باقي كود الواجهة
	);
  }
}

ثم باستخدام

widget.

يمكنك الوصول إلى المتغير imageModel وجلب محتوياته.

ثم يكون ImageModel بهذا الشكل

class ImageModel {
  ImageModel({
    this.id,
    this.images,
  });

  int id;
  List<ImageUrl> images;

  factory ImageModel.fromJson(Map<String, dynamic> json) =>
      ImageModel(
        id: json["id"],
        images: List<ImageUrl>.from(json["images"].map((x) => ImageUrl.fromJson(x))),
        
      );

  Map<String, dynamic> toJson() => {
		"id": id,
        "images": List<dynamic>.from(images.map((x) => x.toJson())),
        
      };
}


class ImageUrl {
  ImageUrl({
    this.id,
    this.src,
    this.name,
    this.alt,
  });

  int id;
  String src;
  String name;
  String alt;

  factory ImageUrl.fromJson(Map<String, dynamic> json) => ImageUrl(
        id: json["id"],
        src: json["src"],
        name: json["name"],
        alt: json["alt"],
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "src": src,
        "name": name,
        "alt": alt,
      };
}

Flutter Dev · 13 أبريل 2021

مرحبا اخي شاكر لك ردك اخوي @بلال زيادة

قمت بتطبيق ما سبق وذكرته واصبح الكود كامل التطبيق بشكل التالي :

طبعا انا وضعت الكود في صفحه واحده ليسهل العمل الان بعدها ساقوم بتقسميه لا توجد مشكله



void main() => runApp(MaterialApp(home: Demo()));

class Demo extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<Demo> {
String SelectIdCategory;
bool lodaing=true;
  List data;
  Future GetAllCategory()async{
    var response=await http.get("https://******************.php"
        , headers: {"Accept": "application/json"}
    );
    var jsoBody = response.body;
    var jsoData =json.decode(jsoBody);
    setState(() {
      data= jsoData;
      lodaing=false;
    });
      print('show all data $jsoData');
  }
@override
  void initState() {
    // TODO: implement initState
    super.initState();

    GetAllCategory();
  }

var getId;

void _gotoSingleImage(ImageModel imageModel, BuildContext context) {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SingleImage(imageModel)),
  );
}


  @override
  Widget build(BuildContext context) {


    return Scaffold(
      body:lodaing?   CircularProgressIndicator() :

      GestureDetector(

        child:

        Center(
        child: SizedBox(
          height: 150.0,
          width: 300.0,

          child: InkWell(
            onTap: () {

              _gotoSingleImage(imageModel[index], context);
           

            },

            child: Carousel(

     
              boxFit: BoxFit.cover,
              autoplay: true,
              dotSize: 4.0,
              dotSpacing: 15.0,
              dotColor: Colors.lightGreenAccent,
              indicatorBgPadding: 5.0,
              dotBgColor: Colors.purple.withOpacity(0.5),
              borderRadius: true,

           
              images:

              data  .map(
                    (list) {

              

                  return Image.network(list['image']);



                },

              )
                  .toList(),


            ),



          ),

        ),
      ),
      )




    );
  }
}

class SingleImage extends StatefulWidget {
  final ImageModel imageModel;
  SingleImage(this.imageModel);

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

class _SingleImageState extends State<SingleImage> {

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

    print(widget.imageModel);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('ImageScreen'),
        ),
        body: Center(
         
        ));
  }
}


class ImageModel {
  ImageModel({
    this.id,
    this.images,
  });

  int id;
  List<ImageUrl> images;

  factory ImageModel.fromJson(Map<String, dynamic> json) =>
      ImageModel(
        id: json["id"],
        images: List<ImageUrl>.from(json["image"].map((x) => ImageUrl.fromJson(x))),

      );

  Map<String, dynamic> toJson() => {
    "id": id,
    "image": List<dynamic>.from(images.map((x) => x.toJson())),

  };
}


class ImageUrl {
  ImageUrl({
    this.id,
    this.src,
    this.name,
    this.alt,
  });

  int id;
  String src;
  String name;
  String alt;

  factory ImageUrl.fromJson(Map<String, dynamic> json) => ImageUrl(
    id: json["id"],
    src: json["src"],
    name: json["name"],
    alt: json["alt"],
  );

  Map<String, dynamic> toJson() => {
    "id": id,
    "src": src,
    "name": name,
    "alt": alt,
  };
}

لا اعلم اذا كانت توجد مشكله في تطبيقي لكلامك ولكن ظهر المشكله التاليه فقط في الكود صوره لتوضيح :

Undefined name 'imageModel'.

هل توجد مشكله في ما فعلته ام يوجد شي ناقص؟

بلال زيادة · 13 أبريل 2021

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

مرحبا اخي شاكر لك ردك اخوي @بلال زيادة

قمت بتطبيق ما سبق وذكرته واصبح الكود كامل التطبيق بشكل التالي :

طبعا انا وضعت الكود في صفحه واحده ليسهل العمل الان بعدها ساقوم بتقسميه لا توجد مشكله




void main() => runApp(MaterialApp(home: Demo()));

class Demo extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<Demo> {
String SelectIdCategory;
bool lodaing=true;
  List data;
  Future GetAllCategory()async{
    var response=await http.get("https://******************.php"
        , headers: {"Accept": "application/json"}
    );
    var jsoBody = response.body;
    var jsoData =json.decode(jsoBody);
    setState(() {
      data= jsoData;
      lodaing=false;
    });
      print('show all data $jsoData');
  }
@override
  void initState() {
    // TODO: implement initState
    super.initState();

    GetAllCategory();
  }

var getId;

void _gotoSingleImage(ImageModel imageModel, BuildContext context) {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SingleImage(imageModel)),
  );
}


  @override
  Widget build(BuildContext context) {


    return Scaffold(
      body:lodaing?   CircularProgressIndicator() :

      GestureDetector(

        child:

        Center(
        child: SizedBox(
          height: 150.0,
          width: 300.0,

          child: InkWell(
            onTap: () {

              _gotoSingleImage(imageModel[index], context);
           

            },

            child: Carousel(

     
              boxFit: BoxFit.cover,
              autoplay: true,
              dotSize: 4.0,
              dotSpacing: 15.0,
              dotColor: Colors.lightGreenAccent,
              indicatorBgPadding: 5.0,
              dotBgColor: Colors.purple.withOpacity(0.5),
              borderRadius: true,

           
              images:

              data  .map(
                    (list) {

              

                  return Image.network(list['image']);



                },

              )
                  .toList(),


            ),



          ),

        ),
      ),
      )




    );
  }
}

class SingleImage extends StatefulWidget {
  final ImageModel imageModel;
  SingleImage(this.imageModel);

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

class _SingleImageState extends State<SingleImage> {

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

    print(widget.imageModel);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('ImageScreen'),
        ),
        body: Center(
         
        ));
  }
}


class ImageModel {
  ImageModel({
    this.id,
    this.images,
  });

  int id;
  List<ImageUrl> images;

  factory ImageModel.fromJson(Map<String, dynamic> json) =>
      ImageModel(
        id: json["id"],
        images: List<ImageUrl>.from(json["image"].map((x) => ImageUrl.fromJson(x))),

      );

  Map<String, dynamic> toJson() => {
    "id": id,
    "image": List<dynamic>.from(images.map((x) => x.toJson())),

  };
}


class ImageUrl {
  ImageUrl({
    this.id,
    this.src,
    this.name,
    this.alt,
  });

  int id;
  String src;
  String name;
  String alt;

  factory ImageUrl.fromJson(Map<String, dynamic> json) => ImageUrl(
    id: json["id"],
    src: json["src"],
    name: json["name"],
    alt: json["alt"],
  );

  Map<String, dynamic> toJson() => {
    "id": id,
    "src": src,
    "name": name,
    "alt": alt,
  };
}

لا اعلم اذا كانت توجد مشكله في تطبيقي لكلامك ولكن ظهر المشكله التاليه فقط في الكود صوره لتوضيح :


Undefined name 'imageModel'.

هل توجد مشكله في ما فعلته ام يوجد شي ناقص؟

لم تقم بإستدعاء model ImageModel يجب استدعاءه في الأعلى

final List<ImageModel> imageModel;

Flutter Dev · 13 أبريل 2021

اهلا اخي @بلال زيادة

قمت باضافته بشكل التالي:

class _HomePageState extends State<Demo> {
String SelectIdCategory;
bool lodaing=true;
  List data;
List<ImageModel> imageModel;

بدون finalلني لما وضعت فاينل احصل على خطاء في imageModel

الان اصبح ياتيني خطاء في index

60757e85a9408_Screenshot2021-04-13152029.png.3ad7ed5a100902338c77f647c2c3944a.png

بلال زيادة · 13 أبريل 2021

بتاريخ 3 دقائق مضت قال مروان مروان3:
اهلا اخي @بلال زيادة

قمت باضافته بشكل التالي:
class _HomePageState extends State<Demo> {
String SelectIdCategory;
bool lodaing=true;
  List data;
List<ImageModel> imageModel;
بدون finalلني لما وضعت فاينل احصل على خطاء في imageModel

الان اصبح ياتيني خطاء في index

يبدو أنك اخطأت في وضع بعض الأكواد, هل ممكن ترفق كود الملف كاملاً بشكل مضغوط؟

Flutter Dev · 13 أبريل 2021

بتاريخ 4 دقائق مضت قال بلال زيادة:

يبدو أنك اخطأت في وضع بعض الأكواد, هل ممكن ترفق كود الملف كاملاً بشكل مضغوط؟

تم ارفق المشروع بشكل مضغوط

ربي يعطيك الف عافيه

sslideshow.rar

بلال زيادة · 13 أبريل 2021

بتاريخ 1 ساعة قال مروان مروان3:

تم ارفق المشروع بشكل مضغوط

ربي يعطيك الف عافيه

sslideshow.rar

يمكنك تعديل Model ليصبح

class ImageModel {
  int id;
  String src;

  ImageModel({
    this.id,
    this.src,
  });

  factory ImageModel.fromJson(Map<String, dynamic> json) => ImageModel(
        id: json["id"],
        src: json["src"],
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "src": src,
      };
}

ثم تعديل دالة _gotoSingleImage

_gotoSingleImage(imageModel, context);

Flutter Dev · 13 أبريل 2021

بتاريخ 5 ساعات قال بلال زيادة:

يمكنك تعديل Model ليصبح


class ImageModel {
  int id;
  String src;

  ImageModel({
    this.id,
    this.src,
  });

  factory ImageModel.fromJson(Map<String, dynamic> json) => ImageModel(
        id: json["id"],
        src: json["src"],
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "src": src,
      };
}

ثم تعديل دالة _gotoSingleImage


_gotoSingleImage(imageModel, context);

مرحبا اخي اعتذر على تاخر الرد

لا يزال الخطاء متواجد في السطر

6075e36b18729_Screenshot2021-04-13223050.png.b67b6c5f7a2a1c5e824a097d4b155ba7.png

The argument type 'List<ImageModel>' can't be assigned to the parameter type 'ImageModel'.

Flutter Dev · 13 أبريل 2021

@بلال زيادة

كل الشكر لك اخي العزيز نجح الامر

بلال زيادة · 14 أبريل 2021

بتاريخ 3 ساعات قال مروان مروان3:

@بلال زيادة

كل الشكر لك اخي العزيز نجح الامر

العفو, لا تترد بطرح أي سؤال هنا وسنقوم بمساعدتك.

ربط carousel_slider مع قاعدة بيانات flutter

السؤال

Flutter Dev

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

Recommended Posts

بلال زيادة

Flutter Dev

Wael Aljamal

Flutter Dev

Wael Aljamal

Flutter Dev

Wael Aljamal

بلال زيادة

Flutter Dev

بلال زيادة

Flutter Dev

بلال زيادة

Flutter Dev

بلال زيادة

Flutter Dev

Flutter Dev

بلال زيادة

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية