स्पंदन SDK सेट बैकग्राउंड इमेज

Question

मैं होम पेज के लिए बैकग्राउंड इमेज सेट करने की कोशिश कर रहा हूं। मुझे स्क्रीन की शुरुआत से छवि जगह मिल रही है और चौड़ाई भर रही है लेकिन ऊँचाई नहीं। क्या मुझे अपने कोड में कुछ याद आ रहा है? क्या स्पंदन के लिए छवि मानक हैं? क्या प्रत्येक फ़ोन के स्क्रीन रिज़ॉल्यूशन के आधार पर चित्र स्केल होते हैं?

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

Comments

छवि का आकार क्या होना चाहिए? चौड़ाई ऊंचाई?

— ArgaPK

क्या कोई नेटवर्क इमेज कॉल के साथ एक उदाहरण दे सकता है

— द डेड गाय

@TheDeadGuy Image.network (' example.com/path/to/image.jpg' )?

— SacWebDeveloper

इस लिंक पर चेकआउट समाधान stackoverflow.com/a/62245570/9955978

— शुभम शर्मा

उल्लेखित टिप्पणियों में से किसी ने भी मेरे मामले में मदद नहीं की - कृपया पूछें क्यों नहीं। यहाँ स्पष्टीकरण के साथ उपयोगी लिंक दिया गया है: educationity.app/flutter/…

— boldnik

Answer 1

मुझे यकीन नहीं है कि मैं आपके प्रश्न को समझ सकता हूं, लेकिन यदि आप चाहते हैं कि छवि पूरी स्क्रीन को भर दे तो आप 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 */,
      ),
    );
  }
}

आपके दूसरे प्रश्न के लिए, यहां दस्तावेज़ के लिए एक लिंक दिया गया है कि कैसे अपने ऐप में रिज़ॉल्यूशन-निर्भर परिसंपत्ति छवियों को एम्बेड करें।

Comments

यह तब तक काम करता है जब तक आपके पास कोई बच्चा नहीं है। यदि आप एक बच्चा जोड़ते हैं तो कंटेनर का आकार उसके बच्चे के आकार तक सिकुड़ जाता है। क्या आप जानते हैं कि कंटेनर को अपने बच्चे के आकार से कोई फर्क नहीं पड़ता है।

— HyLian

@ColinJackson छवि का आकार क्या होना चाहिए? चौड़ाई ऊंचाई?

— ArgaPK

@ हाईलेन ने कंटेनर की बाधा को निर्धारित किया,constraints: BoxConstraints.expand()

— रुस्तम काकीमोव

नेटवर्क छवि के लिए, कोई उपयोग कर सकता हैDecorationImage(image: Image.network("http://example.com/image.jpg").image, ...)

— यूजीन जीआर। फिलिपोव

@HyLian width: double.infinityछवि के साथ कंटेनर में जोड़ें ।

— जोक

Answer 2

यदि आप Containerके शरीर के रूप में उपयोग करते हैं Scaffold, तो इसका आकार उसके बच्चे के आकार के अनुसार होगा, और आमतौर पर वह नहीं है जो आप चाहते हैं जब आप अपने ऐप में एक पृष्ठभूमि छवि जोड़ने की कोशिश करते हैं।

इस अन्य प्रश्न को देखते हुए , @ 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"),
        )
      ],
    )
  );
}

Comments

छवि का आकार क्या होना चाहिए? चौड़ाई ऊंचाई?

— ArgaPK

कीबोर्ड को खोलने से छवि का आकार बदल जाता है। उसके लिए क्या किया जा सकता है?

— माइकल हाथी

Answer 3

आप उपयोग कर सकते हैं 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)),
  );
}

आउटपुट:

Answer 4

आप 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हैं।

Comments

वास्तव में मुझे क्या चाहिए, मेरे मामले में मेरी छवि एक के अंदर है ShaderMask, इसलिए यह एक image:नाम में काम नहीं करेगा ।

— जल्द ही सैंटोस

Answer 5

मैं नीचे एक पृष्ठभूमि लागू करने में सक्षम था Scaffold(और यहां तक कि यह है AppBar) डाल कर Scaffoldएक के तहत Stackऔर एक की स्थापना Containerकी पृष्ठभूमि छवि सेट और के साथ पहली बार "परत" में fit: BoxFit.coverसंपत्ति।

दोनों Scaffoldऔर AppBarके लिए है backgroundColorके रूप में सेट Color.transparentऔर elevationके AppBar0 (शून्य) हो गया है।

देखा! अब आपके पास पूरे पाड़ और 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: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Answer 6

हम कंटेनर का उपयोग कर सकते हैं और इसकी ऊंचाई को अनंत के रूप में चिह्नित कर सकते हैं

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

आउटपुट:

Answer 7

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

यह एक कंटेनर के अंदर भी काम करता है।

Answer 8

बच्चे को जोड़ने के बाद बिना सिकुड़े पृष्ठभूमि की छवि सेट करने के लिए, इस कोड का उपयोग करें।

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

Answer 9

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

Comments

प्रदान किए गए उत्तर को निम्न गुणवत्ता पोस्ट के रूप में समीक्षा के लिए चिह्नित किया गया था। यहाँ मैं कैसे एक अच्छा जवाब लिखने के लिए कुछ दिशानिर्देश हैं ? । यह उत्तर दिया गया स्पष्टीकरण से लाभ हो सकता है। कोड केवल उत्तरों को "अच्छा" उत्तर नहीं माना जाता है।

— ट्रेंटन मैककिनी