Блог

Я новичок в flutter. Изображение с URL-адреса не отображается на экране. Ошибка заключается в том, что в указанном URL нет хоста. И в настоящее время я изучаю учебное пособие, но код инструктора работает хорошо, а мой — нет. Пожалуйста, помогите мне, поскольку я новичок в этом.

Вот мой Main.dart файл:

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyShop',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProductsOverviewScreen(),
    );
  }
}
  

products_overview_screen.dart

  class ProductsOverviewScreen extends StatelessWidget { 
  final List<Product> loadedProducts = [ 
    Product(
      id: 'p1', 
      title: 'Red Shirt', 
      description: 'A red shirt - it is pretty red!', 
      price: 29.99, 
      imageUrl: 
          'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg', 
    ),
    Product( `
      id: 'p2', 
      title: 'Trousers',
      description: 'A nice pair of trousers.', 
      price: 59.99, 
      imageUrl:
  'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Trousers,_dress_(AM_1960.022-8).jpg/512px-Trousers,_dress_(AM_1960.022-8).jpg',
    ), 
    Product( 
      id: 'p3', 
      title: 'Yellow Scarf', 
      description: 'Warm and cozy - exactly what you need for the winter.', 
      price: 19.99, 
      imageUrl: 
          'https://live.staticflickr.com/4043/4438260868_cc79b3369d_z.jpg', 
    ), 
    Product(
      id: 'p4',
      title: 'A Pan',
      description: 'Prepare any meal you want.',
      price: 49.99, 
      imageUrl: 
          'https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Cast-Iron-Pan.jpg/1024px-Cast-Iron- Pan.jpg',
    ), 
  ];

  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        title: Text('My Shop'),
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(10.0),
        itemCount: loadedProducts.length,
        itemBuilder: (ctx, i) => ProductItem(
          loadedProducts[i].id,
          loadedProducts[i].title,
          loadedProducts[i].imageUrl,
        ),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 3 / 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
      ),
    );
  }
} 
  

это Product_item.dart

 class ProductItem extends StatelessWidget {
  final String id;
  final String title;
  final String imageUrl;
ProductItem(this.id, this.imageUrl, this.title);
  @override
  Widget build(BuildContext context) {
    return GridTile(
      child: Image.network(
        //imageUrl
        imageUrl,
        fit: BoxFit.cover,
      ),
    );
  }
} ```

  

Это product.dart

 class Product {
  final String id;
  final String title;
  final String description;
  final double price;
  final String imageUrl;
  bool isFavorite;

  Product({
    @required this.id,
    @required this.description,
    @required this.imageUrl,
              this.isFavorite,
    @required this.price,
    @required this.title,
  });
} ```
  

Проблема в вашем ProductItem классе. Вы не назначили элемент так, как они определены численно.

Как и: ProcutItem(this.id, this.title, this.imageUrl) , элемент также должен быть передан таким же образом. Никаких изменений в этом

РЕШЕНИЕ

 class ProductItem extends StatelessWidget {
  final String id;
  final String title;
  final String imageUrl;
  ProductItem(this.id, this.title, this.imageUrl);  // <---- Here is the change
  @override
  Widget build(BuildContext context) {
    return GridTile(
      child: Image.network(
        //imageUrl
        imageUrl,
        fit: BoxFit.cover,
      ),
    );
  }
}
  

С тех пор, как вы передали товар таким образом в своем ProductOverViewScreen

         // first should be id, then title, then imageURl. It should match from the above class
        ProductItem(
          loadedProducts[i].id,  
          loadedProducts[i].title,
          loadedProducts[i].imageUrl,
        )
  

ПРЕДПОЛОЖЕНИЯ

Мой Product класс выглядит следующим образом, я уверен, что вы могли создать класс только таким образом. Ваш Product класс недоступен в коде, отсюда и предположения. Вы можете обратиться к этому коду, если хотите

 class Product{
  double price;
  String id, title, description, imageUrl;
  
  Product({this.price, this.id, this.title, this.description, this.imageUrl});
}
  

Результат