Flutter SDK Définir l'image de Fond

Je suis en train de mettre une image de fond pour la page d'accueil. Je suis l'obtention de l'image à l'endroit du début de l'écran et le remplissage de la largeur mais pas en hauteur.
Ai-je raté quelque chose dans mon code? Sont il de l'image de normes flutter? Faire des images à l'échelle en fonction de chaque téléphone de la résolution de l'écran?

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

quelle devrait être la taille de l'image? largeur*hauteur?
Quelqu'un peut-il donner un exemple avec une image réseau d'appel
Image.réseau('example.com/path/to/image.jpg')?

InformationsquelleAutor Arun Kumar | 2017-05-25

dart flutter

107

Je ne suis pas sûr de comprendre ta question, mais si vous voulez l'image pour remplir l'écran, vous pouvez utiliser un DecorationImage avec un ajustement de Amélioration.couvrir.
```
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 la documentation sur la façon d'intégrer dépendant de la résolution de l'actif des images dans votre application.
- Cela fonctionne tant que vous n'avez pas n'importe quel enfant. Si vous ajoutez un enfant, puis la taille du Conteneur est rétréci à la taille de son enfant. Savez-vous comment rendre le récipient à remplir l'écran, peu importe la taille de son enfant?
- quelle devrait être la taille de l'image? largeur*hauteur?
- Cela ne devrait pas être la bonne réponse
InformationsquelleAutor Collin Jackson
26

Si vous utilisez un Container que le corps de la Scaffold, sa taille sera, par conséquent, la taille de son enfant, et généralement ce n'est pas ce que vous voulez, quand vous essayez d'ajouter une image de fond à votre application.

Regardant cette autre question, @collin-jackson était aussi ce qui suggère d'utiliser Stack au lieu de Container que le corps de la Scaffold et il n'a certainement ce que vous voulez atteindre.

C'est comment mon code ressemble à
```
@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"),
        )
      ],
    )
  );
}
```
- il rend bien , même avec tous les enfants ......
- quelle devrait être la taille de l'image? largeur*hauteur?
InformationsquelleAutor HyLian

Vous pouvez utiliser Stack pour faire de l'étirement de l'image en mode plein écran.

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

Remarque: en option 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.

InformationsquelleAutor Shubham Soni

Vous pouvez utiliser DecoratedBox.

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

De sortie:

Flutter SDK Définir l'image de Fond

InformationsquelleAutor CopsOnRoad

J'ai été en mesure d'appliquer un arrière-plan au-dessous de la Scaffold (et encore c'est AppBar) en mettant le Scaffold sous un Stack et réglage d'un Container dans la première "couche" avec l'image d'arrière-plan définie et fit: BoxFit.cover propriété.

À la fois la Scaffold et AppBar a avoir le backgroundColor définir comme Color.transparent et la elevation de AppBar doit être à 0 (zéro).

Voilà! Vous avez maintenant un joli fond ci-dessous l'ensemble de l'Échafaudage et de la barre d'applications! 🙂

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

InformationsquelleAutor Tuco

Vous devez vous connecter pour publier un commentaire.