Flatter SDK Set Hintergrundbild

122

Ich versuche, ein Hintergrundbild für die Startseite festzulegen. Ich erhalte den Bildplatz vom Anfang des Bildschirms und fülle die Breite, aber nicht die Höhe. Vermisse ich etwas in meinem Code? Gibt es Bildstandards für Flattern? Skalieren Bilder basierend auf der Bildschirmauflösung jedes Telefons?

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") 
          ]
        )
      )
    );
  }
}
Arun Kumar
quelle
Wie groß sollte das Bild sein? Breite Höhe?
ArgaPK
Kann jemand ein Beispiel mit Netzwerk-Image-Anruf geben
The Dead Guy
1
@TheDeadGuy Image.network (' example.com/path/to/image.jpg' )?
SacWebDeveloper
Checkout-Lösung hier auf diesem Link stackoverflow.com/a/62245570/9955978
Shubham Sharma

Antworten:

329

Ich bin nicht sicher, ob ich Ihre Frage verstehe, aber wenn Sie möchten, dass das Bild den gesamten Bildschirm ausfüllt, können Sie ein DecorationImagemit einer Anpassung von verwenden 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 */,
      ),
    );
  }
}

Für Ihre zweite Frage finden Sie hier einen Link zur Dokumentation zum Einbetten von auflösungsabhängigen Asset-Bildern in Ihre App.

Collin Jackson
quelle
8
Dies funktioniert so lange, wie Sie kein Kind haben. Wenn Sie ein untergeordnetes Element hinzufügen, wird die Größe des Containers auf die Größe seines untergeordneten Elements verkleinert. Wissen Sie, wie der Container den gesamten Bildschirm ausfüllt, unabhängig von der Größe seines Kindes?
HyLian
@ColinJackson Wie groß sollte das Bild sein? Breite Höhe?
ArgaPK
4
@HyLian setze die Constraints-Eigenschaft des Containers,constraints: BoxConstraints.expand()
Rustem Kakimov
2
Für das Netzwerk-Image kann man verwendenDecorationImage(image: Image.network("http://example.com/image.jpg").image, ...)
Eugene Gr. Philippov
@HyLian width: double.infinityzum Container mit dem Bild hinzufügen .
jkoech
44

Wenn Sie a Containerals Hauptteil des verwenden Scaffold, entspricht seine Größe dementsprechend der Größe des untergeordneten Elements. In der Regel ist dies nicht das, was Sie möchten, wenn Sie versuchen, Ihrer App ein Hintergrundbild hinzuzufügen.

Bei dieser anderen Frage schlug @ collin-jackson auch vor, Stackstatt Containerals Körper des zu verwenden, Scaffoldund es macht definitiv das, was Sie erreichen wollen.

So sieht mein Code aus

@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"),
        )
      ],
    )
  );
}
HyLian
quelle
Wie groß sollte das Bild sein? Breite Höhe?
ArgaPK
4
Durch Öffnen der Tastatur wird die Bildgröße geändert. Was kann man dafür tun?
Michael Hathi
15

Sie können verwenden 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)),
  );
}

Ausgabe:

Geben Sie hier die Bildbeschreibung ein

CopsOnRoad
quelle
11

Sie können verwenden Stack, um das Bild auf den Vollbildmodus auszudehnen.

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

Hinweis: Wenn ScaffoldSie a verwenden , können Sie das StackInnere je nach Bedarf optional Scaffoldmit oder ohne AppBareinbauen.

Shubhamhackz
quelle
Genau das, was ich brauchte, in meinem Fall befindet sich mein Bild in einem ShaderMask, daher würde es nicht funktionieren, einen image:Namen einzugeben .
Bald Santos
5

Ich konnte einen Hintergrund unterhalb des Scaffold(und sogar des AppBar) Hintergrunds anwenden, indem ich das Scaffoldunter a Stackund a Containerin die erste "Ebene" mit dem Hintergrundbildsatz und der fit: BoxFit.coverEigenschaft setzte.

Sowohl das Scaffoldals auch AppBarmuss backgroundColorgesetzt sein als Color.transparentund das elevationvon AppBarmuss 0 (Null) sein.

Voilà! Jetzt haben Sie einen schönen Hintergrund unter dem gesamten Gerüst und der 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: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
Tuco
quelle
3

Wir können Container verwenden und seine Höhe als unendlich markieren

body: Container(
      height: double.infinity,
      width: double.infinity,
      child: FittedBox(
        fit: BoxFit.cover,
        child: Image.network(
          'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',
        ),
      ),
    ));

Ausgabe:

Geben Sie hier die Bildbeschreibung ein

jitsm555
quelle
2
decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage("images/background.png"),
        fit: BoxFit.cover
      ),
    ),

Dies funktioniert auch in einem Container.

Vinayak Paste
quelle
-1

Körper: Behälter (

    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('images/background.png'),fit:BoxFit.cover
      )
    ),

);

Balachandran Muthuraj
quelle
-1

Verwenden Sie diesen Code, um ein Hintergrundbild festzulegen, ohne es nach dem Hinzufügen des untergeordneten Elements zu verkleinern.

  body: Container(
    constraints: BoxConstraints.expand(),
      decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage("assets/aaa.jpg"),
        fit: BoxFit.cover,
        )
      ),

    //You can use any widget
    child: Column(
      children: <Widget>[],
    ),
    ),
Dulya Perera
quelle