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

Je ne suis pas sûr de comprendre votre question, mais si vous voulez que l'image remplisse tout l'écran, vous pouvez utiliser une balise DecorationImage avec un ajustement de BoxFit.cover .

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/bulb.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: null /* add child content here */,
      ),
    );
  }
}

Pour votre deuxième question, voici un lien vers le site web de la Commission européenne. documentation sur la façon d'intégrer des images d'actifs dépendant de la résolution dans votre application.

Answer 2

Si vous utilisez un Container comme le corps de la Scaffold Si vous utilisez une image d'arrière-plan, sa taille correspondra à celle de son enfant, ce qui n'est généralement pas ce que vous souhaitez lorsque vous essayez d'ajouter une image d'arrière-plan à votre application.

Regarder cet autre question, @collin-jackson suggérait également d'utiliser Stack au lieu de Container comme le corps de la Scaffold et il fait définitivement ce que vous voulez atteindre.

Voici à quoi ressemble mon code

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Stack(
      children: <Widget>[
        new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(image: new AssetImage("images/background.jpg"), fit: BoxFit.cover,),
          ),
        ),
        new Center(
          child: new Text("Hello background"),
        )
      ],
    )
  );
}

Answer 3

Capture d'écran :

---

Code :

@override
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
    ),
    child: Center(child: FlutterLogo(size: 300)),
  );
}

Answer 4

Vous pouvez utiliser Stack pour que l'image s'étire en plein écran.

Stack(
        children: <Widget>
        [
          Positioned.fill(  //
            child: Image(
              image: AssetImage('assets/placeholder.png'),
              fit : BoxFit.fill,
           ),
          ), 
          ...... // other children widgets of Stack
          ..........
          .............
         ]
 );

Remarque : si vous utilisez un Scaffold vous pouvez mettre le Stack à l'intérieur de la Scaffold avec ou sans AppBar en fonction de vos besoins.

Answer 5

J'ai pu appliquer un arrière-plan sous le Scaffold (et même c'est AppBar ) en mettant le Scaffold sous un Stack et de fixer un Container dans la première "couche" avec l'image de fond définie et fit: BoxFit.cover propriété.

Les deux Scaffold et AppBar doit avoir le backgroundColor en tant que Color.transparent et le elevation de AppBar doit être égal à 0 (zéro).

Voilà ! Vous avez maintenant un joli arrière-plan sous l'ensemble du Scaffold et de l'AppBar ! :)

import 'package:flutter/material.dart';
import 'package:mynamespace/ui/shared/colors.dart';
import 'package:mynamespace/ui/shared/textstyle.dart';
import 'package:mynamespace/ui/shared/ui_helpers.dart';
import 'package:mynamespace/ui/widgets/custom_text_form_field_widget.dart';

class SignUpView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack( // <-- STACK AS THE SCAFFOLD PARENT
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/bg.png"), // <-- BACKGROUND IMAGE
              fit: BoxFit.cover,
            ),
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent, // <-- SCAFFOLD WITH TRANSPARENT BG
          appBar: AppBar(
            title: Text('NEW USER'),
            backgroundColor: Colors.transparent, // <-- APPBAR WITH TRANSPARENT BG
            elevation: 0, // <-- ELEVATION ZEROED
          ),
          body: Padding(
            padding: EdgeInsets.all(spaceXS),
            child: Column(
              children: [
                CustomTextFormFieldWidget(labelText: 'Email', hintText: 'Type your Email'),
                UIHelper.verticalSpaceSM,
                SizedBox(
                  width: double.maxFinite,
                  child: RaisedButton(
                    color: regularCyan,
                    child: Text('Finish Registration', style: TextStyle(color: white)),
                    onPressed: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}