Nell'articolo di oggi vedremo come utilizzare le immagini e gli asset in una applicazione Flutter.
Il progetto base
Creiamo un nuovo progetto e sostituiamo il codice standard nel file main.dart con questo.
import 'package:flutter/material.dart';
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 const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter images demo'),
),
body: Column(
children: const <Widget>[
// qui inseriremo le nostre immagini
],
),
);
}
}
Nella root del progetto, creiamo una cartella assets e al suo interno, una sottocartella images
e inseriamo nella cartella alcuni immagini da utilizzare. Come immagini possiamo usare vari formati (JPEG, WEBP, PNG, BMP e GIF anche animate).
e inseriamo nella cartella alcuni immagini da utilizzare. Come immagini possiamo usare vari formati (JPEG, WEBP, PNG, BMP e GIF anche animate).
Il file delle dipendenze: pubspec.yaml
Per permettere a Flutter di riconoscere ed utilizzare le immagini inserite nella cartella, occorre modificare il file delle dipendenze pubspec.yaml, indicando quali sono gli asset da usare, specificamente nella sezione flutter facendo attenzione a rispettare la corretta indentazione:
# The following section is specific to Flutter packages.
flutter:
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/
E' possibile indicare tutto il contenuto di una cartella (come riportato sopra), indicandone il percorso, o in alternativa anche singoli file
In alternativa, per ottenere lo stesso risultato si può usare anche la seguente sintassi che fa uso di un diverso ImageProvider
Per semplificare l'inserimento e per gestire l'adattamento delle immagini alla dimensione dello schermo, definiamo un nuovo widget personalizzato che ci permetta in modo semplice di realizzare una card in cui inserire ogni singola immagine ((abbiamo utilizzato anche il parametro fit per adattare la dimensione dell'immagine al suo contenitore):
e utilizziamo questo al posto del widget standard
Sicuramente, anche a Voi ora si sarà presentato un problema di overflow in altezza dei contenuti, come questo:
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/duck.png
- assets/images/cat.webpIl widget Image per la visualizzazione
Modificato il file delle dipendenze, possiamo quindi utilizzare le immagini nella nostra applicazione, utilizzando il widget Image.asset che, data la path dell'immagine da visualizzare, permette di utilizzare in modo semplice le immagini dichiarate come asset:
...
body: Column(
children: <Widget>[
Image.asset( "assets/images/duck.png")
],
...
In alternativa, per ottenere lo stesso risultato si può usare anche la seguente sintassi che fa uso di un diverso ImageProvider
...
child: Image(
image: AssetImage(imagePath)
),
...
Per semplificare l'inserimento e per gestire l'adattamento delle immagini alla dimensione dello schermo, definiamo un nuovo widget personalizzato che ci permetta in modo semplice di realizzare una card in cui inserire ogni singola immagine ((abbiamo utilizzato anche il parametro fit per adattare la dimensione dell'immagine al suo contenitore):
// ImageCard
Widget ImageCard(imagePath) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
constraints: const BoxConstraints.expand(height: 300),
alignment: Alignment.center,
child: Image.asset(
imagePath,
fit: BoxFit.cover,
),
),
),
));
}
e utilizziamo questo al posto del widget standard
...
body: Column(
children: <Widget>[
ImageCard("assets/images/duck.png"),
ImageCard("assets/images/cat.webp"),
ImageCard("assets/images/dart.jpg"),
],
...
Sicuramente, anche a Voi ora si sarà presentato un problema di overflow in altezza dei contenuti, come questo:
Per risolverlo, è sufficiente rendere Scrollable il widget Column inserendolo in un nuovo contenitore SingleChildScrollView, in questo modo:
...
body: SingleChildScrollView(
child: Column(
children: <Widget>[
ImageCard("assets/images/duck.png"),
ImageCard("assets/images/cat.webp"),
ImageCard("assets/images/dart.jpg"),
],
),
),
...
L'applicazione è completa. Il widget Image è molto versatile e permette di visualizzare anche immagini mediante un URL o da file o ancora da memoria e l'utilizzo di filtri (ma magari questi utilizzi avanzati saranno oggetto di un prossimo articolo).
Come per gli articoli precedenti potete trovare questo codice tra le mie repo GitHub: https://github.com/luigimicco/flutter_images
Commenti
Posta un commento