webentwicklung-frage-antwort-db.com.de

Flattern SDK Hintergrundbild einstellen

Ich versuche, ein Hintergrundbild für die Homepage festzulegen. Ich bekomme den Bildplatz vom Beginn des Bildschirms und fülle die Breite, aber nicht die Höhe. Fehlt mir 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") 
          ]
        )
      )
    );
  }
}
dartflutter
15
Arun Kumar

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 eine DecorationImage mit einem Fit BoxFit.cover verwenden.

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

Für Ihre zweite Frage finden Sie hier einen Link zu documentation , wie Sie auflösungsabhängige Asset-Images in Ihre App einbetten können.

55
Collin Jackson

Wenn Sie eine Container als Körper der Scaffold verwenden, ist ihre Größe entsprechend der Größe des untergeordneten Objekts. In der Regel ist dies nicht das, was Sie möchten, wenn Sie versuchen, der App ein Hintergrundbild hinzuzufügen.

Bei der Betrachtung von dieser anderen / Frage schlug @ collin-jackson auch vor, Stack anstelle von Container als Körper der Scaffold zu verwenden, und es tut definitiv, 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"),
        )
      ],
    )
  );
}
13
HyLian

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

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

Hinweis: Wenn Sie eine Scaffold verwenden, können Sie die Stack optional mit oder ohne Scaffold in die AppBar einfügen. 

1
Shubham Soni

Ich konnte einen Hintergrund unter dem Scaffold (und es ist sogar AppBar) anwenden, indem ich den Scaffold unter einen Stack stellte und einen Container einstellte ] _ in der ersten "Ebene" mit dem Hintergrundbild und der Eigenschaft fit: BoxFit.cover.

Sowohl für Scaffold als auch für AppBar muss backgroundColor als Color.transparent Festgelegt und elevation von AppBar muss festgelegt sein 0 (Null) sein.

Voilà! Jetzt haben Sie einen schönen Hintergrund unter dem gesamten Scaffold 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: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
1
Tuco

Sie können DecoratedBox verwenden. 

@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:

 enter image description here

0
CopsOnRoad