Como definir a imagem de fundo no Flutter

Imagem de plano de fundo no Flutter que serve como plano de fundo de uma tela ou widget. O widget Imagem permite que os usuários do Flutter redimensionem, movam e alinhem imagens de plano de fundo.

Para definir uma imagem de plano de fundo, siga estas etapas:

1. Incluir a imagem na pasta de recursos do seu projeto. Para fazer isso, crie uma nova pasta no diretório raiz do seu projeto e nomeie-a como “assets”. Em seguida, salve o arquivo de imagem dentro da pasta “assets” que você acabou de criar.
2. No arquivo pubspec.yaml, adicione a seguinte linha para declarar o recurso:

   assets:
     - assets/image.jpg

3. Em seu código Flutter, importe o pacote de imagens:

   import 'package:flutter/material.dart';

4. Faça um novo widget com a imagem como imagem de fundo no Flutter. Para fazer isso, use o widget Stack e posicione o widget de imagem em sua base:

   class BackgroundImage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Stack(
         children: [
           Image.asset(
             'assets/image.jpg',
             fit: BoxFit.cover,
             height: double.infinity,
             width: double.infinity,
           ),
           // Add other widgets on top of the background image here
         ],
       );
     }
   }

5. Use o widget BackgroundImage em seu aplicativo adicionando-o ao corpo do widget Scaffold:

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           body: BackgroundImage(),
         ),
       );
     }
   }

6. A aparência da imagem de plano de fundo no Flutter pode ser alterada modificando os atributos de ajuste, altura e largura do widget Image.asset. Dimensionar a imagem para caber na área disponível é uma questão de definir o atributo de ajuste de acordo. Para que a imagem ocupe a tela inteira, defina as propriedades de altura e largura como double.infinity.

Imagem de plano de fundo do código completo no Flutter

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: BackgroundImage(),
      ),
    );
  }
}
class BackgroundImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.asset(
          'assets/background.jpg',
          fit: BoxFit.cover,
          height: double.infinity,
          width: double.infinity,
        ),
        Center(
          child: Text(
            'Hello World!',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    );
  }
}

Neste exemplo, criamos um widget MyApp que é o ponto de entrada de nosso aplicativo. O widget MyApp retorna um widget MaterialApp que é o widget raiz do nosso aplicativo. O widget MaterialApp tem um widget Scaffold como sua casa, onde definimos a imagem de fundo.

Com o uso de um widget Stack, o widget BackgroundImage sem estado posiciona a imagem de fundo no Flutter na parte inferior da pilha e um widget Text no centro da tela. Para garantir que a imagem de fundo preencha a tela inteira, usamos o widget Image.asset para carregá-la da pasta de recursos e definir seu atributo de ajuste para BoxFit.cover. O widget Text é centralizado na tela com a ajuda do widget Center e recebe um estilo específico com a ajuda do widget TextStyle.

Conclusão

O widget Flutter Container pode definir uma imagem de plano de fundo do widget no Flutter atribuindo uma BoxDecoration com uma imagem à propriedade de decoração. Defina a origem, o tamanho e o ajuste da imagem com a classe DecorationImage. Antes de alterar uma imagem de plano de fundo para seu aplicativo Flutter, considere suas dimensões e proporção.