Flutter SDK Set Gambar latar belakang

Saya mencoba mengatur gambar latar belakang untuk halaman rumah. Saya mendapatkan tempat gambar dari awal layar dan mengisi lebar tetapi bukan tingginya. Apakah saya melewatkan sesuatu di kode saya? Apakah ada standar gambar untuk flutter? Apakah gambar diskalakan berdasarkan resolusi layar masing-masing ponsel?

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

Saya tidak yakin saya mengerti pertanyaan Anda, tetapi jika Anda ingin gambar memenuhi seluruh layar, Anda dapat menggunakan a DecorationImagedengan ukuran yang sesuai 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 */,
      ),
    );
  }
}

Untuk pertanyaan kedua Anda, berikut ini link ke dokumentasi tentang cara menyematkan gambar aset yang bergantung pada resolusi ke dalam aplikasi Anda.

Jika Anda menggunakan a Containersebagai badan dari Scaffold, ukurannya akan sesuai dengan ukuran anaknya, dan biasanya bukan itu yang Anda inginkan saat mencoba menambahkan gambar latar belakang ke aplikasi Anda.

Melihat pertanyaan lain ini , @ collin-jackson juga menyarankan untuk menggunakan Stackalih-alih Containersebagai tubuh Scaffolddan pasti melakukan apa yang ingin Anda capai.

Seperti inilah tampilan kode saya

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

Anda bisa menggunakan 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)),
  );
}

Keluaran:

Anda dapat menggunakan Stackuntuk membuat gambar membentang ke layar penuh.

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

Catatan: Secara opsional jika menggunakan Scaffold, Anda dapat meletakkan bagian Stackdalam Scaffolddengan atau tanpa AppBarsesuai dengan kebutuhan Anda.

Saya bisa menerapkan latar belakang di bawah Scaffold(dan bahkan itu AppBar) dengan meletakkan di Scaffoldbawah a Stackdan mengatur Containerdi "lapisan" pertama dengan set gambar latar belakang dan fit: BoxFit.coverproperti.

Baik Scaffolddan AppBarharus memiliki backgroundColorhimpunan sebagai Color.transparentdan elevationdari AppBarharus 0 (nol).

Voilà! Sekarang Anda memiliki latar belakang yang bagus di bawah seluruh Perancah dan 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: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Kita bisa menggunakan Container dan menandai tingginya sebagai tak terbatas

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

Keluaran:

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

ini juga berfungsi di dalam wadah.

Untuk menyetel gambar latar belakang tanpa menyusut setelah menambahkan anak, gunakan kode ini.

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