Immagini fullscreen in Flutter

Mattepuffo's logo
Immagini fullscreen in Flutter

Immagini fullscreen in Flutter

In questo articolo vediamo come impostare una immagine fullscreen in Flutter; o quanto meno uno dei possibili modi.

Non sono richiesti plugin aggiuntivi, in quanto useremo semplicemenete:

  • un Container
  • un BoxDecoration con DecorationImage

L'immagine l'ho presa dal web "a caso".

Ecco il codice:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(
              'https://fastly.picsum.photos/id/0/5000/3333.jpg?hmac=_j6ghY5fCfSD6tvtcV74zXivkJSPIfR9B8w34XeQmvU',
            ),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

Enjoy!


Condividi

Commentami!