Flutter – Imagen de activos

Flutter es un kit de desarrollo de interfaz de usuario multiplataforma de código abierto desarrollado por Google. Está ganando popularidad en estos días, ya que la aplicación hecha en flutter puede ejecutarse en varios dispositivos, independientemente de su plataforma. Se usa principalmente para desarrollar aplicaciones para Android e iOS, ya que una sola aplicación hecha en flutter puede funcionar de manera eficiente en ambas plataformas. 

Aquí aprenderemos cómo agregar imágenes en la aplicación flutter. Una aplicación flutter, cuando se crea, tiene activos (recursos) y código. Los activos están disponibles y se implementan durante el tiempo de ejecución. El recurso es un archivo que puede incluir datos estáticos, archivos de configuración, iconos e imágenes. La aplicación Flutter admite muchos formatos de imagen, como JPEG, WebP, PNG, GIF, WebP/GIF animado, BMP y WBMP.

Sintaxis:

Image.asset('image name')

Pasos para agregar una imagen:

Paso 1: Crea una nueva carpeta 

• Debería estar en la raíz de tu proyecto flutter. Puede nombrarlo como quiera, pero se prefieren los activos .
• Si desea agregar otros activos a su aplicación, como fuentes, es preferible crear otra subcarpeta llamada imágenes .

Paso 2. Ahora puedes copiar tu imagen a la subcarpeta de imágenes . La ruta debería verse como assets/images/yourImage . Antes de agregar imágenes, verifique también los formatos de imagen admitidos mencionados anteriormente.

Paso 3. Registre la carpeta de activos en el archivo pubspec.yaml y actualícelo. 

a) Para agregar imágenes, escriba el siguiente código:

flutter:   
  assets:
        - assets/images/yourFirstImage.jpg
        - assets/image/yourSecondImage.jpg

b) Si desea incluir todas las imágenes de la carpeta de activos, agregue esto:

flutter:               
  assets:     
         - assets/images/

Nota: Tenga cuidado con la sangría, los activos deben estar correctamente sangrados para evitar cualquier error.

Paso 4. Inserte el código de la imagen en el archivo, donde desea agregar la imagen.

Image.asset('assets/images/GeeksforGeeks.jpg')

Ejemplo

import 'package:flutter/material.dart';
 
// function to start app building
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
// This widget is the root
// of your application
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            'Insert Image Demo',
          ),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Image.asset('assets/images/output.gif',
                  height: 200,
                  scale: 2.5,
                  // color: Color.fromARGB(255, 15, 147, 59),
                  opacity:
                      const AlwaysStoppedAnimation<double>(0.5)), //Image.asset
              Image.asset(
                'assets/images/geeksforgeeks.jpg',
                height: 400,
                width: 400,
              ), // Image.asset
            ], //<Widget>[]
          ), //Column
        ), //Center
      ),
    );
  }
}

Paso 5. Ahora puede guardar todos los archivos y ejecutar la aplicación, encontrará el resultado como se muestra a continuación. 

Producción: