Hình nền bộ Flutter SDK

Tôi đang cố gắng đặt hình nền cho trang chủ. Tôi đang lấy vị trí hình ảnh từ đầu màn hình và lấp đầy chiều rộng nhưng không lấp đầy chiều cao. Tôi có thiếu một cái gì đó trong mã của tôi? Có các tiêu chuẩn hình ảnh cho sự rung lắc? Hình ảnh có được chia tỷ lệ dựa trên độ phân giải màn hình của từng điện thoại không?

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

Tôi không chắc mình hiểu câu hỏi của bạn, nhưng nếu bạn muốn hình ảnh lấp đầy toàn bộ màn hình, bạn có thể sử dụng câu hỏi DecorationImagephù hợp 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 */,
      ),
    );
  }
}

Đối với câu hỏi thứ hai của bạn, đây là liên kết đến tài liệu về cách nhúng hình ảnh nội dung phụ thuộc vào độ phân giải vào ứng dụng của bạn.

Nếu bạn sử dụng một Container làm phần chính của tệp Scaffold, kích thước của nó sẽ tương ứng với kích thước của con của nó và thường đó không phải là những gì bạn muốn khi cố gắng thêm hình nền vào ứng dụng của mình.

Xem xét câu hỏi khác này , @ collin-jackson cũng đề xuất sử dụng Stackthay vìContainer làm phần thân của Scaffoldvà nó chắc chắn làm được những gì bạn muốn đạt được.

Đây là cách mã của tôi trông như thế nào

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

Bạn có thể sử dụng 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)),
  );
}

Đầu ra:

Bạn có thể sử dụng Stackđể làm cho hình ảnh kéo dài ra toàn màn hình.

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

Lưu ý: Nếu đang sử dụng a Scaffold, bạn có thể đặt Stackbên trong Scaffoldcó hoặc không AppBartùy theo nhu cầu của mình.

Tôi đã có thể áp dụng một nền bên dưới Scaffold(và thậm chí là nó AppBar) bằng cách đặt Scaffolddưới a Stackvà đặt a Containertrong "lớp" đầu tiên với bộ hình ảnh nền và thuộc fit: BoxFit.covertính.

Cả cái Scaffoldvà AppBarphải có backgroundColortập là Color.transparentvà elevationcủa AppBarphải bằng 0 (không).

Voilà! Bây giờ bạn có một nền đẹp bên dưới toàn bộ Scaffold và 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: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Chúng ta có thể sử dụng Container và đánh dấu chiều cao của nó là vô cực

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

Đầu ra:

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

điều này cũng hoạt động bên trong một thùng chứa.

Để đặt hình nền mà không bị thu nhỏ sau khi thêm con, hãy sử dụng mã này.

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