Comment définir l'image d'arrière-plan dans Flutter ?

Question

J'essaie de définir une image d'arrière-plan pour la page d'accueil. L'image est placée au début de l'écran et remplit la largeur mais pas la hauteur. Est-ce qu'il me manque quelque chose dans mon code ? Existe-t-il des normes d'image pour Flutter ? Les images sont-elles mises à l'échelle en fonction de la résolution de l'écran de chaque téléphone ?

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      body: new Container(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            new Image.asset("assets/images/bulb.jpg") 
          ]
        )
      )
    );
  }
}

Answer 1

Vous pouvez utiliser le code suivant pour définir une image de fond pour votre application :

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("images/background.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        // use any child here
        child: null
      ),
    );
  }

Si l'enfant de votre conteneur est un widget de type colonne, vous pouvez utiliser l'attribut crossAxisAlignment: CrossAxisAlignment.stretch pour que votre image de fond remplisse l'écran.

Answer 2

Je sais qu'il y a déjà beaucoup de réponses à cette question, mais cette solution est fournie avec un gradient de couleur autour de l'image de fond, je pense que vous l'apprécierez.

import 'package:flutter/material.dart';

class BackgroundImageExample extends StatelessWidget {
  const BackgroundImageExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        backgroudImage(),
        Scaffold(
          backgroundColor: Colors.transparent,
          body: SafeArea(
            child: Column(
              children: [
                // your body content here
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget backgroudImage() {
    return ShaderMask(
      shaderCallback: (bounds) => LinearGradient(
        colors: [Colors.black, Colors.black12],
        begin: Alignment.bottomCenter,
        end: Alignment.center,
      ).createShader(bounds),
      blendMode: BlendMode.darken,
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('your image here'), /// change this to your  image directory 
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(Colors.black45, BlendMode.darken),
          ),
        ),
      ),
    );
  }
}

Answer 3

import 'package:flutter/material.dart';

void main() => runApp(DestiniApp());

class DestiniApp extends StatefulWidget {
  @override
  _DestiniAppState createState() => _DestiniAppState();
}

class _DestiniAppState extends State<DestiniApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Color.fromRGBO(245, 0, 87, 1),
            title: Text(
              "Landing Page Bankground Image",
            ),
          ),
          body: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: ExactAssetImage("images/appBack.jpg"),
                  fit: BoxFit.cover
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Sortie :

Answer 4

Vous pouvez utiliser FractionallySizedBox

Parfois, decoratedBox ne couvre pas la taille du plein écran. Nous pouvons y remédier en l'entourant du widget FractionallySizedBox. Dans ce widget, nous donnons un facteur de largeur et un facteur de hauteur.

Le site widthfactor montre que le widget [FractionallySizedBox] doit occuper _____ pourcentage de la largeur de l'application.

Le site heightfactor indique que le widget [FractionallySizedBox] doit occuper _____ pourcentage de la hauteur de l'application.

Exemple : heightfactor = 0.3 signifie 30% de la hauteur de l'application. widthfactor = 0.4 signifie 40% de la largeur de l'application.

        Hence, for full screen set heightfactor = 1.0 and widthfactor = 1.0

Tip : FractionallySizedBox s'accorde avec les stack widget. Ainsi, vous pouvez facilement ajouter des boutons, des avatars, des textes sur votre image d'arrière-plan dans le widget de la pile, alors que vous ne pouvez pas le faire dans les rangées et les colonnes.

Pour plus d'informations, consultez le dépôt de ce projet. lien vers le dépôt github de ce projet

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Stack(
            children: <Widget>[
              Container(
                child: FractionallySizedBox(
                  heightFactor: 1.0,
                  widthFactor: 1.0,
                  //for full screen set heightFactor: 1.0,widthFactor: 1.0,
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("images/1.jpg"),
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

OutPut :