All the images works on the web browser

I have tried to load the images in the phone and emulator, but the asset images are not loading, and the network images are displaying.

Also, the asset images get displayed on the web browser.

like this Image not loading on phone or emulator

Here is my code:

HomeScreen

import 'package:flutter/material.dart';
import 'package:road_sign/models/category_model.dart';
import 'package:road_sign/models/news_model.dart';
import 'package:road_sign/models/quize_model.dart';
import 'package:road_sign/screen/category/category_screen.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('The Home Page'),
        //backgroundColor: Colors.black,
      ),
      backgroundColor: Colors.white,
      //!body
      body: Column(
        children: [
          Expanded(
            flex: 2,
            //! it's category List
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListView.separated(
                itemCount: categoris.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) => GridTile(
                  child: InkWell(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => CategoryScreen(
                            selectedCategory: categoris[index],
                          ),
                        ),
                      );
                    },
                    child: Container(
                      margin: EdgeInsets.all(5),
                      height: 100,
                      width: 200,
                      decoration: BoxDecoration(
                          image: DecorationImage(
                            image: AssetImage(categoris[index].categoryImg),
                            fit: BoxFit.contain,
                          ),
                          borderRadius: BorderRadius.circular(20),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black38,
                              blurRadius: 2,
                              spreadRadius: 3,
                              offset: Offset(
                                3.0, // Move to right 10  horizontally
                                2.0, // Move to bottom 10 Vertically
                              ),
                            )
                          ]),
                    ),
                  ),
                ),
                separatorBuilder: (BuildContext context, int index) {
                  return SizedBox(
                    width: 25,
                  );
                },
              ),
            ),
          ),

          //!Second Column Part

          Flexible(
            flex: 4,
            //! it's category Random Item list.
            child: ListView.separated(
              itemCount: news_list.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 200,
                  decoration: BoxDecoration(
                      color: Colors.white10,
                      borderRadius: BorderRadius.circular(20)),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      children: [
                        Expanded(
                          child: Image(
                            image: NetworkImage(
                                'https://images.hindustantimes.com/img/2021/10/06/1600x900/08065ecc-26df-11ec-97ad-def1feb12b09_1633550216966.jpg'),
                            fit: BoxFit.cover,
                          ),
                        ),
                        Text(
                          "For 2016 specifically, National Highway Traffic Safety Administration (NHTSA) data shows 37,461 people were killed in 34,436 motor vehicle crashes, an average of 102 per day.",
                        ),
                      ],
                    ),
                  ),
                );
              },
              separatorBuilder: (BuildContext context, int index) {
                return SizedBox(
                  height: 10,
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Category_Screen:

class CategoryModel {
  final String categoryName;
  final String categoryImg;

  CategoryModel({required this.categoryName, required this.categoryImg});
}

List<CategoryModel> categoris = [
  CategoryModel(
    categoryName: 'Traffic Lights',
    categoryImg: 'assets/images/all_lights.png',
  ),
  CategoryModel(
    categoryName: 'Types of Car',
    categoryImg: 'assets/images/car_types.png',
  ),
  CategoryModel(
    categoryName: 'Road Symbols',
    categoryImg: 'assets/images/traffic_stops.png',
  ),
  CategoryModel(
    categoryName: 'Traffic Signals',
    categoryImg: 'assets/images/tarffic signals.png',
  ),
  CategoryModel(
    categoryName: 'Notice',
    categoryImg: 'assets/images/road_blocked.jpg',
  ),
];

CodePudding user response：

///Please post your code here I am not getting your question If you using an asset image then you have to specify the path of the assets in the pubsec.yml file like this 
    
    flutter:
    
      # The following line ensures that the Material Icons font is
      # included with your application, so that you can use the icons in
      # the material Icons class.
      uses-material-design: true
      assets:
        - assets/
        - assets/Vector-2.png
    
    ////Inside a code 
    Container(
                                              height: 120,
                                              width: 120,
                                              decoration: BoxDecoration(
                                                color: Colors.white,
                                                shape: BoxShape.circle,
                                                image:DecorationImage(
                                                    fit: BoxFit.cover,
                                                    image: AssetImage('assets/managerPicture.jpeg')),
                                                border: Border.all(
                                                    color: AppColors.white, width: 2.0),
                                              ),
                                            ),
    ////If you want to show a network image 
    
    Container(
                                              height: 120,
                                              width: 120,
                                              decoration: BoxDecoration(
                                                color: Colors.white,
                                                shape: BoxShape.circle,
                                                image:DecorationImage(
                                                    fit: BoxFit.cover,
                                                    image: NetWorkImage("")),
                                                border: Border.all(
                                                    color: AppColors.white, width: 2.0),
                                              ),
                                            ),