Flatter SDK Set Hintergrundbild

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

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.

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

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:

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.

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

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:

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

Dies funktioniert auch in einem Container.

Körper: Behälter (

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

);

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>[],
    ),
    ),