Flutter SDK Imposta immagine di sfondo

Sto cercando di impostare un'immagine di sfondo per la home page. Ottengo la posizione dell'immagine dall'inizio dello schermo e riempio la larghezza ma non l'altezza. Mi manca qualcosa nel mio codice? Esistono standard di immagine per il flutter? Le immagini vengono ridimensionate in base alla risoluzione dello schermo di ogni telefono?

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

Non sono sicuro di aver capito la tua domanda, ma se vuoi che l'immagine riempia l'intero schermo puoi usare un DecorationImagecon un fit di 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 */,
      ),
    );
  }
}

Per la tua seconda domanda, ecco un collegamento alla documentazione su come incorporare immagini di risorse dipendenti dalla risoluzione nella tua app.

Se usi a Containercome corpo di Scaffold, la sua dimensione sarà di conseguenza la dimensione del suo figlio e di solito non è quello che vuoi quando provi ad aggiungere un'immagine di sfondo alla tua app.

Guardando quest'altra domanda, @ collin-jackson ha anche suggerito di usare al Stackposto di Containercome corpo di Scaffolde fa sicuramente quello che vuoi ottenere.

Ecco come appare il mio codice

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

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

Produzione:

È possibile utilizzare Stackper allungare l'immagine a schermo intero.

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

Nota: Facoltativamente, se si utilizza a Scaffold, è possibile inserire l' Stackinterno Scaffoldcon o senza in AppBarbase alle proprie esigenze.

Sono stato in grado di applicare uno sfondo sotto Scaffold(e anche lo è AppBar) mettendo Scaffoldsotto a Stacke impostando a Containernel primo "livello" con l'immagine di sfondo impostata e la fit: BoxFit.coverproprietà.

Sia il Scaffoldche AppBardeve avere il backgroundColorset as Color.transparente il elevationof AppBardeve essere 0 (zero).

Ecco! Ora hai un bel sfondo sotto l'intero Scaffold e 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: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Possiamo usare Container e contrassegnare la sua altezza come infinito

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

Produzione:

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

funziona anche all'interno di un contenitore.

Per impostare un'immagine di sfondo senza ridursi dopo aver aggiunto il bambino, usa questo codice.

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

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