বিড়ম্বনা এসডিকে ব্যাকগ্রাউন্ড চিত্র সেট করুন

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

ছবিটির আকার কত হওয়া উচিত? প্রস্থ উচ্চতা?

— আরগাপিকে

নেটওয়ার্ক ইমেজ কল দিয়ে কেউ কি উদাহরণ দিতে পারে

— দ্য ডেড গাই

@ দ্য ডেডগুই ইমেজ.টওয়ার্কওয়ার্ক (' উদাহরণ. com/path/to/image.jpg ' )?

— স্যাকউইব ডেভেলপার 21

চেকআউট সমাধানটি এখানে এই লিঙ্কটিতে দেখুন stackoverflow.com/a/62245570/9955978

— শুভ শর্মা

উল্লিখিত কোনও মন্তব্যই আমার ক্ষেত্রে সহায়তা করেনি - দয়া করে কেন তা জিজ্ঞাসা করবেন না। এখানে ব্যাখ্যার সাথে দরকারী লিঙ্ক: শিক্ষাগত.এপ

— ফ্লুটার

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

আপনার দ্বিতীয় প্রশ্নের জন্য, কীভাবে আপনার অ্যাপ্লিকেশনটিতে রেজোলিউশন-নির্ভর সম্পদ চিত্রগুলি এম্বেড করা যায় সে সম্পর্কে ডকুমেন্টেশনের লিঙ্ক is

Comments

আপনার কোনও সন্তান না হওয়া পর্যন্ত এটি কাজ করে। আপনি যদি একটি শিশু যুক্ত করেন তবে কনটেইনারটির আকারটি তার সন্তানের আকারে সঙ্কুচিত হবে। আপনি কী জানেন যে কীভাবে ধারক তার সন্তানের আকার নির্বিশেষে সমস্ত পর্দা পূরণ করবে?

— হায়লিয়ান

@ কলিন জ্যাকসন? ছবিটির আকারটি কী হওয়া উচিত? প্রস্থ উচ্চতা?

— আরগাপিকে

@ হাইলিয়ান কনটেইনারগুলির প্রতিবন্ধকতার সম্পত্তি নির্ধারণ করুনconstraints: BoxConstraints.expand()

— রোস্টেম কাকিমভ

নেটওয়ার্ক চিত্রের জন্য, কেউ ব্যবহার করতে পারেনDecorationImage(image: Image.network("http://example.com/image.jpg").image, ...)

— ইউজিন গ্র। ফিলিপভ

@ হাইলিয়ান width: double.infinityইমেজ সহ ধারক যুক্ত করুন ।

— jkoech

Answer 2

আপনি যদি কোনওটির Containerদেহ হিসাবে ব্যবহার করেন তবে Scaffoldতার আকারটি তার সন্তানের আকার অনুসারে হবে এবং সাধারণত আপনি যখন আপনার অ্যাপ্লিকেশনে কোনও ব্যাকগ্রাউন্ড চিত্র যুক্ত করার চেষ্টা করেন আপনি তা চান না।

এই অন্যান্য প্রশ্নটির দিকে তাকিয়ে , @ কলিন-জ্যাকসন এছাড়াও এটির দেহ হিসাবে Stackপরিবর্তে ব্যবহার করার পরামর্শ দিচ্ছিল এবং এটি আপনি যা অর্জন করতে চান তা অবশ্যই করে doesContainerScaffold

আমার কোডটি কেমন দেখাচ্ছে

@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

ছবিটির আকার কত হওয়া উচিত? প্রস্থ উচ্চতা?

— আরগাপিকে

কীবোর্ড খোলার ফলে চিত্রটি পুনরায় আকার দেয়। এর জন্য কী করা যায়?

— মাইকেল হাতী

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
          ..........
          .............
         ]
 );

দ্রষ্টব্য: allyচ্ছিকরূপে যদি একটি ব্যবহার Scaffoldকরা হয় তবে আপনি নিজের প্রয়োজন অনুযায়ী বা তার বাইরে Stackভিতরে রাখতে পারেন ।ScaffoldAppBar

Comments

হুবহু আমার যা প্রয়োজন ছিল, আমার ক্ষেত্রে আমার চিত্রটি একটি এর অভ্যন্তরে থাকে ShaderMask, সুতরাং এটি কোনও image:নাম রাখার কাজ করে না ।

— শীঘ্রই সান্টোস

Answer 5

আমি নীচে একটি ব্যাকগ্রাউন্ড প্রয়োগ করতে সক্ষম হয়েছিলেন Scaffold(এবং এমনকি এটা AppBar) রেখে Scaffoldএকটি অধীনে Stackএবং একটি সেটিং Containerপটভূমি চিত্র সেট এবং সঙ্গে প্রথমে "স্তর" মধ্যে fit: BoxFit.coverসম্পত্তি।

উভয় Scaffoldএবং AppBarআছে আছে backgroundColorযেমন সেট Color.transparentএবং elevationএর AppBar0 (শূন্য) হতে হয়েছে।

ভাল খবর! পুরো স্ক্যাফোর্ড এবং অ্যাপবারের নীচে এখন আপনার খুব সুন্দর ব্যাকগ্রাউন্ড রয়েছে! :)

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

প্রদত্ত উত্তরটি নিম্ন মানের পোস্ট হিসাবে পর্যালোচনার জন্য পতাকাঙ্কিত করা হয়েছিল। আমি কীভাবে একটি ভাল উত্তর লিখতে পারি তার জন্য এখানে কিছু গাইডলাইন রয়েছে ? । এই প্রদত্ত উত্তরটি একটি ব্যাখ্যা থেকে উপকৃত হতে পারে। কোডের উত্তরগুলিকে "ভাল" উত্তর হিসাবে বিবেচনা করা হয় না।

— ট্রেনটন ম্যাককিনি