218 votes

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

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") 
          ]
        )
      )
    );
  }
}

0 votes

Quelle doit être la taille de l'image ? largeur*hauteur ?

0 votes

Quelqu'un peut-il donner un exemple avec un appel d'image réseau

1 votes

@TheDeadGuy Image.network(' exemple.com/chemins/vers/image.jpg'. ) ?

530voto

Collin Jackson Points 29995

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.

12 votes

Cela fonctionne tant que vous n'avez pas d'enfant. Si vous ajoutez un enfant, la taille du conteneur est réduite à la taille de son enfant. Savez-vous comment faire pour que le conteneur remplisse tout l'écran, quelle que soit la taille de son enfant ?

0 votes

@ColinJackson quelle doit être la taille de l'image ? largeur*hauteur ?

14 votes

@HyLian a défini la propriété des contraintes du conteneur, constraints: BoxConstraints.expand()

63voto

HyLian Points 2058

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"),
        )
      ],
    )
  );
}

0 votes

Quelle doit être la taille de l'image ? largeur*hauteur ?

5 votes

L'ouverture du clavier redimensionne l'image. Que peut-on faire pour cela ?

0 votes

29voto

CopsOnRoad Points 4705

Capture d'écran :

enter image description here


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)),
  );
}

0 votes

Si vous mettez une zone de texte et ouvrez le clavier, l'image sera déplacée vers le haut, ce qui n'est pas une bonne solution. Si vous avez d'autres suggestions, veuillez les partager.

17voto

Shubham Soni Points 1220

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.

0 votes

Exactement ce dont j'avais besoin. Dans mon cas, mon image se trouve à l'intérieur d'une ShaderMask par conséquent, cela ne fonctionnerait pas si l'on mettait une image: nom.

9voto

Tuco Points 769

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: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X