Flutter SDK Set Arkaplan görüntüsü

Ana sayfa için bir arka plan resmi ayarlamaya çalışıyorum. Görüntünün yerini ekranın başından alıyorum ve genişliği dolduruyorum ama yüksekliği değil. Kodumda bir şey mi eksik? Flutter için görüntü standartları var mı? Görüntüler, her telefonun ekran çözünürlüğüne göre ölçeklenir mi?

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

Sorunuzu anladığımdan emin değilim, ancak görüntünün tüm ekranı doldurmasını istiyorsanız, DecorationImagebir fit ile kullanabilirsiniz 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 */,
      ),
    );
  }
}

İkinci sorunuz için, çözünürlüğe bağlı varlık görüntülerini uygulamanıza nasıl yerleştireceğinize ilişkin belgelere bir bağlantı burada verilmiştir .

Eğer bir Containergövdesi olarak bir kullanırsanız Scaffold, boyutu buna göre çocuğunun boyutuna göre olacaktır ve genellikle uygulamanıza bir arka plan resmi eklemeye çalıştığınızda istediğiniz şey bu değildir.

Bu diğer soruya baktığımızda , @ collin-jackson da Stackonun Containergövdesi yerine kullanmayı öneriyordu Scaffoldve kesinlikle ulaşmak istediğiniz şeyi yapıyor.

Kodum böyle görünüyor

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

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

Çıktı:

StackGörüntüyü tam ekrana uzatmak için kullanabilirsiniz .

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

Not: İsteğe bağlı olarak a kullanıyorsanız Scaffold, Stackiçini ihtiyacınıza göre Scaffoldolan veya olmayan koyabilirsiniz AppBar.

Arka plan görüntü kümesi ve özelliği ile ilk "katman" a under a ve ayar a koyarak Scaffold(ve hatta AppBar) altına bir arka plan uygulayabildim .ScaffoldStackContainerfit: BoxFit.cover

Hem Scaffoldve AppBarsahip olması backgroundColorolarak grubu Color.transparentve elevationbir AppBar0 (sıfır) olduğu bulunmaktadır.

Voilà! Artık tüm Scaffold ve AppBar'ın altında güzel bir arka planınız var! :)

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

Konteyner kullanabilir ve yüksekliğini sonsuz olarak işaretleyebiliriz

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

Çıktı:

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

bu aynı zamanda bir kap içinde de çalışır.

Çocuğu ekledikten sonra küçülmeden bir arka plan resmi ayarlamak için bu kodu kullanın.

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