Flutter tiene un widget de imagen para mostrar diferentes tipos de imágenes . Para mostrar imágenes de Internet, se utiliza la función Image.network() .
Syntax: Image.network (source_URL)
Propiedades del widget de imagen:
- altura: Esta propiedad toma un valor entero como objeto. Decide la altura de la imagen verticalmente.
- ancho: esta propiedad también toma un valor Int como objeto para determinar el ancho en píxeles que se asignará a la imagen.
Siga los pasos a continuación para mostrar las imágenes de Internet en su aplicación Flutter:
Paso 1: Cree una nueva aplicación flutter en el directorio requerido usando el siguiente comando:
flutter create <app_name>
Paso 2: Ahora, elimine el código del archivo main.dart para agregar su propio código.
Paso 3: Ahora, use el siguiente código en el archivo main.dart y cambie el parámetro de la función Image.network según lo necesite.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Network Image',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
// setup a stateful widget
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
// Design of the application
appBar: AppBar(
title:Text("GeeksforGeeks"),
backgroundColor:Colors.green
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView(
children:<Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
// Image.network(src)
child: Image.network("https://images.pexels.com/photos/213780/pexels-photo-213780.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network("https://images.pexels.com/photos/2899097/pexels-photo-2899097.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network("https://images.pexels.com/photos/2820884/pexels-photo-2820884.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
)
]
),
),
);
}
}
Producción:
Explicación del código:
- Aquí usamos ListView para mostrar imágenes en la pantalla.
- En Image.network( src ) , hemos proporcionado la ruta de la imagen de red ( src es la ruta de la imagen ).
- Finalmente, usamos el ancho y el alto para cambiar el tamaño de la imagen.
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA