Skip to content

i cannot get images to show on the products list #109

Open
@faithyoussef

Description

hello ,
i cannot get images to appear on my products list,
you do not have even the simple code to how to show the image baseline.

here Is my simple code in a way

class search extends StatefulWidget {
const search({Key? key}) : super(key: key);

@OverRide
State createState() => _searchState();
}

class _searchState extends State {
late String _image = "http://fakestoreapi.com/products/50";

String? word;
final ScrollController _scrolltwoController = ScrollController();
List productsList = [];
int limit = 50;
bool _isLoading = false;
late ImageProvider backgroundImage;
late String customImageFile;
XFile imageFile = XFile("");

/**

  • loadgetImage() async {
    imageFile = (await ImagePicker().pickImage(source: ImageSource.imageFile))!;
    if (imageFile == null) return;

    setState(() {
    _image = _image!;
    });

    customImageFile = _image.toString();
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString('customImageFile', customImageFile);
    }
    */

@OverRide
void initState() {
getProducts();
super.initState();
getsearch();
}
@OverRide
void didChangeDependencies() {
// getProducts();
_scrolltwoController.addListener(() async {
if (_scrolltwoController.position.pixels ==
_scrolltwoController.position.maxScrollExtent) {
_isLoading = true;
print("_isLoading $_isLoading");
limit += 50;
await getProducts();
isLoading = true;
print("limit $limit");
}
});
super.didChangeDependencies();
}
FutureOr<List> getProducts() async {
productsList = ( await APIHandler.getAllProducts(
limit: limit.toString(),
).then ((value) => value));
setState(() {
productsList = productsList;
imageFile = imageFile;
});
return productsList;
}
@OverRide
Widget build(BuildContext context) {
return MultiProvider(providers: [
ChangeNotifierProvider(create: (
) => Themes()),
],
child: Scaffold(
appBar: AppBar(
actions: [
IconButton(
icon: const Icon(Icons.search),
onPressed: () {
//Get.to(categories(Categories));
// search_bar();
},
),
IconButton(
icon: const Icon(Icons.favorite),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const liked()),
);
},
),
//loadgetImage()
]
),
body: Center(
//mainAxisSize: MainAxisSize.min,

    child: productsList.isEmpty
        ? const Center(
      child: CircularProgressIndicator(),
    )
        : SingleChildScrollView(
      controller: _scrolltwoController,
      scrollDirection: Axis.vertical,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
       // mainAxisAlignment: MainAxisAlignment.,
        children: [
          Flexible(
            flex: 1,
            fit: FlexFit.loose,
            child:
           categories(Categories),
          ),

          SizedBox(
            height:10,
          ),
       Flexible(
         fit: FlexFit.loose,
         flex: 2,
         child: GridView.builder(
            scrollDirection: Axis.vertical,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: productsList.length,
              gridDelegate:
              const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 0.0,
                  mainAxisSpacing: 0.0,
                  childAspectRatio: 0.7),
              itemBuilder: (ctx, index) {
            //    imageCache.currentSizeBytes;
                return ChangeNotifierProvider.value(
                    value: productsList[index],
                   child: const FeedsWidget());
                  /**
                  builder: (context, child) {
                    return Container(
                        height: 80,
                        width: 80,
                        decoration: BoxDecoration(
                          color: Colors.blueAccent,
                          image: DecorationImage(
                            image: _image == null ? const Image(
                              image: NetworkImage(
                                  "https://fakestoreapi.com/products/50"),
                            ).image : Image
                                .network(_image!)
                                .image,
                          ),
                        ),);
                  });
          **/    } ,  ),
       ),
          if (_isLoading)
            const Center(
                child: CircularProgressIndicator()),
        ],
      ),
    ),

)));

}
List Categories = [
"electronics",
"jewelery",
"men's clothing",
"women's clothing"
];

Widget categories(List categories) {
return Row(
children:[
Expanded(child:
Container(
height: 50,
width: 500,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 1,
itemBuilder: (context, index) {
return Container(
width: 500,
child: Scrollable(
// title: Text(categories[index]),
viewportBuilder: (BuildContext context, ViewportOffset position) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: categories.length,

                        itemBuilder: (context, index) {
                          return Container(
                            width:100,
                              key: ValueKey(index),

                              //  image: Image.network("https://fakestoreapi.com/products/categories"),
                            //child: Image.network("https://fakestoreapi.com/products/categories"),
                              child: ListTile(
                                  title: Text(categories[index]),

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

}

void getsearch() async {
var response = await https.get(Uri.parse("https://fakestoreapi.com/products"),
headers: {"Accept": "application/json"});
if (response.statusCode == 200) {
var result = jsonDecode(response.body);
print(result);
var image = Image.memory(response.bodyBytes).image;
}
setState(() {
productsList;
Image.memory(response.bodyBytes).image;
});
}

}

class search_bar extends SearchDelegate {
/**
*
*/

List Categories = [
"electronics",
"jewelery",
"men's clothing",
"women's clothing"
];

Widget categories() {
return ListView.builder(
itemCount: Categories.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(Categories[index])
)
);
}
);
}

@OverRide
List buildActions(BuildContext context) {
return [
IconButton(
onPressed: () {
Categories = [];
},
icon: const Icon(Icons.clear))
];
}

@OverRide
Widget buildLeading(BuildContext context) {
return IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => after_main(
client: appwrite.Client(
endPoint: 'https://eshop-ecommerce.herokuapp.com/v1',
),

      )));
    },
    icon: const Icon(Icons.arrow_back));

}

@OverRide
Widget buildResults(BuildContext context) {
return Container(
child: Center(
child: Text(query),
),
);
}

@OverRide
Widget buildSuggestions(BuildContext context){
final mylist = query.isEmpty
? Categories
: Categories.where((p) => p.startsWith(query)).toList();
return mylist.isEmpty
? const Center(
child: Text("No Results Found"),
)
: ListView.builder(
itemCount: mylist.length,
itemBuilder: (context, index) {
return ListTile(
onTap: () {
showResults(context);
},
title: Text(mylist[index]),
);
},
);
}
}

/**

  • class search_bar extends StatefulWidget {
    const search_bar({Key? key}) : super(key: key);

    @OverRide
    State<search_bar> createState() => _search_barState();
    }

    class _search_barState extends State<search_bar> {
    String? word;
    // TextEditingController _wordcontroller = TextEditingController();

    final ScrollController _scrollController = ScrollController();
    List Categories = [];
    int limit = 0;

    //List categories = [];
    bool _isLoading = false;
    @OverRide
    void didCategories() {
    // getProducts();
    _scrollController.addListener(() async {
    if (_scrollController.position.pixels ==
    _scrollController.position.maxScrollExtent) {
    _isLoading = true;
    print("_isLoading $_isLoading");
    limit += 4;
    await getCategories();
    _isLoading = false;
    print("limit $limit");
    }
    });
    super.didChangeDependencies();
    }
    Future getCategories() async {
    Categories = (await APIHandler.getCategories(
    // limit: limit.toString(),
    ))!;
    setState(() {
    Categories = Categories;
    });
    }
    @OverRide
    Widget build(BuildContext context) {

    return Scaffold(
    appBar: AppBar(
    title: const Text('Search'),
    ),
    body:Center(
    child: Categories.isEmpty
    ? const Center(
    child: CircularProgressIndicator(),
    )
    : SingleChildScrollView(
    controller: _scrollController,
    child: Column(
    children: [
    ListView.builder(
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
    itemCount: Categories.length,
    /** gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 1,
    crossAxisSpacing: 0.0,
    mainAxisSpacing: 0.0,
    childAspectRatio: 0.7),**/
    itemBuilder: (ctx, index) {
    imageCache.currentSizeBytes;
    return ChangeNotifierProvider.value(
    value: Categories[index],
    child: const FeedsWidget()
    );
    }),
    if (_isLoading)
    const Center(child: CircularProgressIndicator()),
    ],
    ),
    ),
    ),);
    } void gotsearch() async {
    var response = await https.get(
    Uri.parse("https://fakestoreapi.com/products/categories"),
    headers: {"Accept": "application/json"});
    if (response.statusCode == 200) {
    var result = jsonDecode(response.body);
    print(result);
    var image = Image.memory(response.bodyBytes).image;
    }
    }
    }

*/

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions