Home / Questions / 331671
Accepted
Jhon Andy Ramos Orejon
Asked: 2020-02-24 06:53:50 +0800 CST 2020-02-24 06:53:50 +0800 CST

flutter image asset

  • 772

Hi, I have a flutter project where I can load images from an Image.network. This is my main.dart.

class ShowCase extends StatelessWidget {
const ShowCase({
@required this.wideImage,
@required this.bookObject,
});

final String wideImage;
final Book bookObject;

@override
Widget build(BuildContext context) {
return GestureDetector(
  onTap: () {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => Details(bookObject)));
  },
  child: Row(
    children: <Widget>[
      Container(
        height: 250,
        width: 350,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10),
          child: Image.network(wideImage, fit: BoxFit.cover),
        ),
      ),
      SizedBox(
        width: 20,
      )
    ],
  ),
);
}
}

class HotList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
  decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.bottomCenter,
        end: Alignment.topCenter,
        colors: [Color(0xfff8f8f8), Colors.white],
      ),
      border:
          Border(bottom: BorderSide(color: Color(0xfff0f0f0), width: 2))),
  padding: EdgeInsets.only(left: 20, right: 20, top: 35, bottom: 15),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Padding(
        padding: EdgeInsets.only(bottom: 20.0),
        child: Text(
          "Locomotor",
          style: TextStyle(
              color: Colors.black,
              fontSize: 30,
              fontWeight: FontWeight.w600),
        ),
      ),
      Container(
        height: 320,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: booklist.books.length,
          itemBuilder: (BuildContext context, int i) {
            String title = booklist.books[i].title.length > 17
                ? booklist.books[i].title.substring(0, 15) + "..."
                : booklist.books[i].title;

            if (booklist.books[i].franchise) {
              return Container();
            } else {
              return ShowBooks(
                bookCoverImg: booklist.books[i].cover,
                price: booklist.books[i].price,
                author: booklist.books[i].author,
                title: title,
                bookObject: booklist.books[i],
              );
            }
          },
        ),
      )
    ],
  ),
);
}
}

This is my book.dart where I put the internet link where the image is hosted.

BookList booklist = BookList(books: [
Book(
  title: "Planos anatómicos",
  cover:
      "https://upload.wikimedia.org/wikipedia/en/a/a9/Harry_Potter_and_the_Deathly_Hallows.jpg",
  age: "ALL AGE",
  author: "J. K. Rowling",
  authorImg:
      "https://images.gr-assets.com/authors/1510435123p5/1077326.jpg",
  franchise: true,
  genre: "Locomotor",
  lanugage: "ENGLISH",
  rating: 4.5,
  price: 13.49,
  summary:
      "Without the guidance and protection of their professors, Harry (Daniel Radcliffe), Ron (Rupert Grint) and Hermione (Emma Watson) begin a mission to destroy the Horcruxes, the sources of Voldemort's immortality. Though they must rely on one another more than ever, dark forces threaten to tear them apart. Voldemort's Death Eaters have seized control of the Ministry of Magic and Hogwarts, and they are searching for Harry -- even as he and his friends prepare for the ultimate showdown.",
  wideImage: "https://wallpaperplay.com/walls/full/9/a/9/64844.jpg"),

Book(
  title: "A Song Of Ice And Fire",
  cover:
      "https://upload.wikimedia.org/wikipedia/en/thumb/d/dc/A_Song_of_Ice_and_Fire_book_collection_box_set_cover.jpg/220px-A_Song_of_Ice_and_Fire_book_collection_box_set_cover.jpg",
  age: "ABOVE 18",
  author: "George R. R. Martin",
  authorImg:
      "https://www.biography.com/.image/t_share/MTQ4NDc2MTkxNTY3NzgzMTE1/george_rr_martin_photo_mark_davis_wireimage_via_getty_images_164117282_resized.jpg",
  franchise: true,
  genre: "Sci-Fi",
  lanugage: "ENGLISH",
  price: 27.34,
  rating: 4.4,
  summary:
      "Game of Thrones is roughly based on the storylines of A Song of Ice and Fire, set in the fictional Seven Kingdoms of Westeros and the continent of Essos. The series chronicles the violent dynastic struggles among the realm's noble families for the Iron Throne, while other families fight for independence from it.",
  wideImage:
      "https://images-na.ssl-images-amazon.com/images/I/91KwasehsHL._RI_.jpg"),

class Book {
String title;

double price;
String cover;
String author;
Book(
  {@required this.title,
  @required this.price,

  });
}

What I want is that the image (for example the "authoImage" one) loads me from the assets folder. I mean, I would like the image not to load from the internet, but from my assets folder where I already placed some images. How could I do it? I already added the image asset in the pub spec.yaml ..... ..... ..... ..... ..... ..... ..... ..... . .... ..... .....

imagen

1 Answers

  1. Best Answer

    When declaring the image in your pubspect.yaml it is super important to be careful with the indentation, that may be the problem, anyway I show you the process so that there is no doubt about how to add and use images:

    It is good that we are clear that flutter does not have an "assest" file by default, therefore we must create one in the root of our project, and add to this file the elements that we are going to use in this case images.

    Then we have to go to pubspec.yaml, which is at the root of the project to intensify the resources required by the app, it would be as follows.

    flutter:
  uses-material-design: true

  # Para agregar recursos(assets) a su aplicación, agregue una sección de recursos, como esta:
  assets:
    - assets/loro.png

    Finally, you could already use your image, for example:

    Widget build(BuildContext context) {
  return Image(image: AssetImage('assets/loro.png'));
}

    Note: By not placing the indentation correctly, you may receive the following error.

    Error detected in pubspec.yaml:
Error on line 44, column 4: Expected a key while parsing a block mapping.
   ╷
44 │    assets:
   │    ^
   ╵
Please correct the pubspec.yaml file at /Users/haniel/Documents/development/work/example/pubspec.yaml
exit code 1

    More information at flutter-es.io

    • 0