সারিটির টেক্সটফিল্ড লেআউট ব্যতিক্রমের কারণ: আকার গণনা করতে অক্ষম

Question

আমি একটি রেন্ডারিং ব্যতিক্রম পাচ্ছি যা আমি কীভাবে ঠিক করব বুঝতে পারছি না। আমি একটি কলাম তৈরি করার চেষ্টা করছি যাতে 3 টি সারি রয়েছে।

সারি [চিত্র]

সারি [টেক্সটফিল্ড]

সারি [বোতাম]

ধারকটি তৈরি করার জন্য আমার কোডটি এখানে:

Container buildEnterAppContainer(BuildContext context) {
    var container = new Container(
      padding: const EdgeInsets.all(8.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          buildImageRow(context),
          buildAppEntryRow(context),
          buildButtonRow(context)
        ],
      ),
    );
    return container;
  }

এবং পাঠ্য ধারকটির জন্য আমার বিল্ডএপেন্ট্রিআর কোড

Widget buildAppEntryRow(BuildContext context) {
    return new Row(
      children: <Widget>[
        new TextField(
          decoration: const InputDecoration(helperText: "Enter App ID"),
          style: Theme.of(context).textTheme.body1,
        )
      ],
    );
  }

আমি যখন চালনা করি আমি নিম্নলিখিত ব্যতিক্রমগুলি পাই:

I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674):   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

আমি যদি বিল্টএপেন্ট্রিরোকে পরিবর্তিত করে কেবল এটির পরিবর্তে কেবল একটি পাঠ্যফিল্ডে রাখি

 Widget buildAppEntryRow2(BuildContext context) {
    return new TextField(
      decoration: const InputDecoration(helperText: "Enter App ID"),
      style: Theme.of(context).textTheme.body1,
    );
  }

আমি আর এর ব্যতিক্রম পাই না। সারি প্রয়োগের সাথে আমি কী অনুভব করছি যা এই সারিটির আকার গণনা করতে সক্ষম হচ্ছে না?

Answer 1

(আমি ধরে নিচ্ছি আপনি এটি ব্যবহার করছেন Rowকারণ আপনি TextFieldভবিষ্যতে অন্য উইজেটগুলি রাখতে চান ।)

Rowউইজেট তার অ নমনীয় শিশুদের স্বকীয় আদর্শ মাপ নির্ধারণের জন্য তাই এটি জানে কতটা স্থান এটি নমনীয় বেশী জন্য রেখে গেছে চায়। তবে এর TextFieldঅভ্যন্তরীণ প্রস্থ নেই; এটি কেবলমাত্র তার পিতামাতার ধারকের সম্পূর্ণ প্রস্থে নিজেকে কীভাবে আকার দিতে হবে তা জানে। এটিকে মোড়ানোর চেষ্টা করুন Flexibleবা Expandedবলুন Rowযে আপনি TextFieldঅবশিষ্ট স্থানটি গ্রহণ করবেন বলে আশা করছেন :

      new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              decoration: const InputDecoration(helperText: "Enter App ID"),
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),

Comments

এটি কোথাও কোলাহলপূর্ণ দস্তাবেজে থাকা উচিত নয়?

— stt106

@ stt106 এটি -> flutter.io/docs/development/ui/layout/box-constraints তবে আমি সম্মত, এটি সন্ধান করা সহজ নয়। না তারা কলিন জ্যাকসন উপরের মতো করে সমাধানটিকে ঠিক তেমন স্পষ্ট করে না।

— রেপ

এই পদ্ধতিটি ব্যবহার করা mainAxisAlignmentসারি উইজেটের জন্য বিরতি দেয়। দুটি টেক্সট উইজেটের সাথে কোনও সমস্যা নেই তবে এতে থাকা একটি পাঠ্য উইজেট এবং এতে থাকা একটি পাঠ্যক্ষেত্র উইজেট Flexibleকোনও ফাঁক ছাড়াই বামদিকে সরে যায়।

— হাসেন

আমি কি আপনাকে এখানে কোনও ঝাঁকুনির সাথে সম্পর্কিত প্রশ্নটি দেখতে বলব: স্ট্যাকওভারফ্লো . com / প্রশ্নস / 60565658/… ?

— ইসতিয়াক আহমেদ

Answer 2

আপনি এই ত্রুটিটি পান কারণ TextFieldঅনুভূমিক দিকে প্রসারিত হয় এবং তেমনটি ঘটে Row, সুতরাং আমাদের প্রস্থকে সীমাবদ্ধ করতে TextFieldহবে, এটি করার অনেকগুলি উপায় রয়েছে।

1. ব্যবহার Expanded

    Row(
     children: <Widget>[
       Expanded(child: TextField()),
       OtherWidget(),
     ],
   )

2. ব্যবহার Flexible

   Row(
     children: <Widget>[
       Flexible(child: TextField()),
       OtherWidget(),
     ],
   )

3. এটিতে মোড়ানো Containerবা SizedBoxসরবরাহ করুনwidth

   Row(
     children: <Widget>[
       SizedBox(width: 100, child: TextField()),
       OtherWidget(),
     ],
   )       

Comments

এই সুপারিশ তাই দরকারী। যখন আপনার TextFieldএক সারিতে একাধিক থাকে।

— বেন

Answer 3

একটি সারির অভ্যন্তরে একটি টেক্সটফিল্ড ব্যবহার করতে আপনার নমনীয় ব্যবহার করা উচিত।

new Row(
              children: <Widget>[
                new Text("hi there"),
                new Container(
                  child:new Flexible(
                        child: new TextField( ),
                            ),//flexible
                ),//container


              ],//widget
            ),//row

Comments

আমার মনে হয় আপনার দরকার নেই Container, আপনি Flexibleসরাসরি ব্যবহার করতে পারেন ।

— ফিলিপ অগস্টো

Answer 4

সমাধানটি হ'ল Text()নীচের উইজেটগুলির মধ্যে আপনার অভ্যন্তরে মোড়ানো : হয় হয় Expandedবা হয় Flexible। সুতরাং, প্রসারিত ব্যবহার করে আপনার কোডটি এর মতো হবে:

Expanded(
           child: TextField(
             decoration: InputDecoration(
               hintText: "Demo Text",
               hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
              ),
           ),
        ),

Answer 5

@ আসিফ শিরাজ যেহেতু উল্লেখ করেছেন যে আমারও একই সমস্যা ছিল এবং এটি এখানে নমনীয়ভাবে মোড়ক দিয়ে কলামটি মোড়ানো দ্বারা সমাধান করেছি ,,

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
          body: Row(
            children: <Widget>[
              Flexible(
                  child: Column(
                children: <Widget>[
                  Container(
                    child: TextField(),
                  )
                  //container
                ],
              ))
            ],
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),
        ));
  }
}

Answer 6

এর সহজ সমাধানটি হ'ল আপনার Text()অভ্যন্তরে মোড়ানো Container()। সুতরাং, আপনার কোডটি হবে:

Container(
      child: TextField()
)

আপনার পাঠ্য ক্ষেত্রের চেহারা এবং অনুভূতিটি সামঞ্জস্য করতে আপনি এখানে কোনও ধারকটির প্রস্থ এবং উচ্চতার বৈশিষ্ট্যটি পান। Flexibleআপনি যদি কোনও ধারকটির অভ্যন্তরে আপনার পাঠ্য ক্ষেত্রটি মোড়ানো করেন তবে এটি ব্যবহার করার দরকার নেই ।

Comments

যুক্ত করা ছাড়া প্রশ্নটির সমাধান হয় নাwidth: n

— user3249027