web-dev-qa-db-ja.com

Flutter SDK Set Background image

ホームページの背景画像を設定しようとしています。画面の最初から画像の場所を取得し、高さではなく幅を埋めています。私のコードに何かが欠けていますか？フラッターの画像標準はありますか？画像は各携帯電話の画面解像度に基づいてスケーリングされますか？

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
45
Arun Kumar

私はあなたの質問を理解しているかわかりませんが、画像を画面全体に表示したい場合は、 DecorationImage を 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 */,
      ),
    );
  }
}

2番目の質問については、解像度依存のアセット画像をアプリに埋め込む方法に関する ドキュメント へのリンクがあります。

126
Collin Jackson

Containerの本文としてScaffoldを使用する場合、そのサイズはそれに応じてその子のサイズになります。通常、アプリに背景画像を追加しようとすると、それは望みのものではありません。

this other 質問を見ると、@ collin-jacksonはStackの本体としてContainerの代わりにScaffoldを使用することも提案していました。達成したい。

これは私のコードがどのように見えるかです

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

Stackを使用して、画像を全画面に拡大できます。

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

注：必要に応じて、Scaffoldを使用している場合は、StackをScaffoldの有無にかかわらずAppBarの内側に配置できます。

3
Shubham Soni

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

出力：

enter image description here

2
CopsOnRoad

Scaffoldの下にAppBarを配置し、最初にScaffoldを設定することにより、Stack（さらにはContainerでも）の下に背景を適用できました。背景画像セットとfit: BoxFit.coverプロパティを持つ「レイヤー」。

ScaffoldとAppBarの両方にbackgroundColorをColor.transparentとして設定し、elevationのAppBarを0（ゼロ）にする必要があります。

ほら！ Scaffoldと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