Cómo agregar una imagen en Flutter

Solución:

Cómo incluir imágenes en tu aplicación

1. Cree una assets/images carpeta

• Este debe estar ubicado en la raíz de su proyecto, en la misma carpeta que su pubspec.yaml expediente.
• En Android Studio, puede hacer clic derecho en la vista Proyecto
• No tienes que llamarlo assets o images. Ni siquiera necesitas hacer images una subcarpeta. Cualquiera que sea el nombre que use, sin embargo, es lo que regester en el pubspec.yaml expediente.

2. Agrega tu imagen a la nueva carpeta.

• Puedes simplemente copiar tu imagen en assets/images. El camino relativo de lake.jpg, por ejemplo, sería assets/images/lake.jpg.

3. Registre la carpeta de activos en pubspec.yaml

• Abre el pubspec.yaml archivo que está en la raíz de su proyecto.

• Agregar un assets subsección de la flutter sección como esta:

    flutter:
      assets:
        - assets/images/lake.jpg
  

• Si tiene varias imágenes que desea incluir, puede omitir el nombre del archivo y usar el nombre del directorio (incluya el nombre final /):

    flutter:
      assets:
        - assets/images/
  

4. Usa la imagen en el código

• Obtenga el activo en un widget de imagen con Image.asset('assets/images/lake.jpg').

• La totalidad main.dart el archivo está aquí:

    import 'package:flutter/material.dart';
  
    void main() => runApp(MyApp());
  
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("Image from assets"),
            ),
            body: Image.asset('assets/images/lake.jpg'), //   <--- image
          ),
        );
      }
    }
  

5. Reinicia tu aplicación

Al realizar cambios en pubspec.yaml Encuentro que a menudo necesito detener completamente mi aplicación y reiniciarla nuevamente, especialmente cuando agrego activos. De lo contrario, sufro un accidente.

Ejecutando la aplicación ahora, debería tener algo como esto:

Otras lecturas

• Consulte la documentación para saber cómo hacer cosas como proporcionar imágenes alternativas para diferentes densidades.

Videos

El primer video aquí entra en muchos detalles sobre cómo incluir imágenes en su aplicación. El segundo video cubre más sobre cómo ajustar su apariencia.

• Tutorial de Flutter – 1/2 imagen – Análisis profundo
• Tutorial de Flutter – Imagen 2/2 – Análisis profundo

Creo que el error es causado por la redundancia. ,

flutter:
  uses-material-design: true, # <<< redundant , at the end of the line
  assets:
    - images/lake.jpg

También sugiero crear un assets carpeta en el directorio que contiene el pubspec.yaml archivar y mover images allí y usar

flutter:
  uses-material-design: true
  assets:
    - assets/images/lake.jpg

los assets El directorio obtendrá soporte IDE adicional que no tendrá si coloca los activos en otro lugar.

1. Crear images carpeta en el nivel raíz de su proyecto.

   

   

2. Suelta tu imagen en esta carpeta, debería verse así

   

3. Ir a tu pubspec.yaml archivo, agregar assets encabezado y presta mucha atención a todos los espacios.

   flutter:
   
     uses-material-design: true
   
     # add this
     assets:
       - images/profile.jpg
   

4. Toque en Packages get en la esquina superior derecha del IDE.

   

5. Ahora puedes usar tu imagen en cualquier lugar usando

   Image.asset("images/profile.jpg")
   

---

---

Utiliza Nuestro Buscador