বাটন প্রস্থ ম্যাচ পিতা


120

আমি জানতে চাই যে প্যারেন্ট লেআউটের প্রস্থের সাথে কীভাবে আমি একটি প্রস্থ সেট করতে পারি

new Container(
  width: 200.0,
  padding: const EdgeInsets.only(top: 16.0),
  child: new RaisedButton(
    child: new Text(
        "Submit",
        style: new TextStyle(
          color: Colors.white,
        )
    ),
    colorBrightness: Brightness.dark,
    onPressed: () {
      _loginAttempt(context);
    },
    color: Colors.blue,
  ),
),

আমি Expandedউইজেটে সামান্য বিট সম্পর্কে জানি কিন্তু Expandedউভয় দিকের দৃষ্টিভঙ্গি প্রসারিত করি, কীভাবে এটি করতে হয় তা আমি জানি না।


1
পরিবর্তে সম্ভবত একটি কলাম?
গন্টার জ্যাচবাউয়ার

হ্যাঁ আমি কনটেইনার পরিবর্তে কলাম সংযুক্ত করি তবে বোতামের প্রস্থটি মোড়ানো বিষয়বস্তু কীভাবে পিতামাতার প্রস্থকে প্রসারিত করতে পারে
মোহিত সুথার

আপনি কেবল একটি ফ্ল্যাটবটন ব্যবহার করতে পারেন এবং এটি একটি ধারকের ভিতরে গুটিয়ে রাখতে পারেন এবং পাত্রে পর্দার প্রস্থে স্ক্রিনের প্রস্থে মিডিয়া প্রশ্ন ব্যবহার করে নীচে আমার উত্তরটি সন্ধান করতে পারেন
maheshmnj

উত্তর:


264

সঠিক সমাধানটি SizedBox.expandহ'ল উইজেটটি ব্যবহার করা , যা এটি childতার পিতামাতার আকারের সাথে মিলে যায়।

SizedBox.expand(
  child: RaisedButton(...),
)

অনেকগুলি বিকল্প রয়েছে, যা কম বা বেশি কাস্টমাইজেশনের অনুমতি দেয়:

SizedBox(
  width: double.infinity,
  // height: double.infinity,
  child: RaisedButton(...),
)

বা ব্যবহার করে একটি ConstrainedBox

ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: RaisedButton(...),
)

31
সাইজডবক্স.এক্সপ্যান্ডটি বোতামটি পুরো প্রস্থ এবং উচ্চতা নেবে, এটি নিয়ে প্রশ্ন নেই। প্রশ্নটি কেবলমাত্র উচ্চতা নয় পুরো প্রস্থকে কভার করার একটি বোতাম সম্পর্কে।
বিনোথ কুমার

3
@ রমিরিসলেট উইনোথের মন্তব্য বৈধ। যেহেতু এটি এখন স্বীকৃত উত্তর, আপনি কেবলমাত্র প্রশস্ত প্রস্থকে প্রসারিত করার জন্য সাইজডবক্সের জন্য সঠিক কনস্ট্রাক্টর যুক্ত করতে পারেন?
ব্যবহারকারী 823447

আমি এই ত্রুটিটি গ্রহণ করছিFailed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true.
ক্যাপসিড

সমাধানের জন্য ধন্যবাদ
অজয় কুমার

আমি উভয় উপায় উত্তর পছন্দ, এটি আরও সম্পূর্ণ।
রাইদেন কোর

30

আকার অ্যাট্রিবিউট ব্যবহার করে প্রদান করা যেতে পারে ButtonThemeসঙ্গেminWidth: double.infinity

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

বা https://github.com/flutter/flutter/pull/19416 এর পরে অবতরণ করেছে

MaterialButton(
  onPressed: () {},
  child: SizedBox.expand(
    width: double.infinity, 
    child: Text('Raised Button'),
  ),
),


24

সবচেয়ে সহজ উপায় হল একটি এর অভ্যন্তরে FlatButtonমোড়ানো ব্যবহার করা Container, ডিফল্টরূপে বোতামটি তার পিতামাতার আকার নেয় এবং তাই এটিতে একটি পছন্দসই প্রস্থ নির্ধারণ করে Container

            Container(
                  color: Colors.transparent,
                  width: MediaQuery.of(context).size.width,
                  height: 60,
                  child: FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                    ),
                    onPressed: () {},
                    color: Colors.red[300],
                    child: Text(
                      "Button",
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'Raleway',
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                )

আউটপুট:

এখানে চিত্র বর্ণনা লিখুন


17

কিছু গবেষণার পরে, আমি কিছু সমাধান খুঁজে পেয়েছি এবং @ জন্টার জ্যাচবাউয়ারকে ধন্যবাদ জানাই,

আমি কনটেইনার এবং এর পরিবর্তে কলাম ব্যবহার করেছি

সম্পত্তিটি কলামের ক্রসএক্সিসএলাইনমেন্ট.সেট্রেচ করুন বাটনের পূরণ ম্যাচ প্যারেন্টে

    new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                new RaisedButton(
                  child: new Text(
                      "Submit",
                      style: new TextStyle(
                        color: Colors.white,
                      )
                  ),
                  colorBrightness: Brightness.dark,
                  onPressed: () {
                    _loginAttempt(context);
                  },
                  color: Colors.blue,
                ),
              ],
            ),

8
Column/ Rowএকক শিশু লেআউট জন্য ব্যবহার করা উচিত নয়। পরিবর্তে একক সন্তানের বিকল্প ব্যবহার করুন। যেমন Align, SizedBox, এবং অনুরূপ।
রুমি রসসলেট

5

আপনি এর দ্বারা উইজেটের পিতামাতাকে সেট করতে পারেন

1) প্রস্থটি ডাবল.इनফিনিটিতে সেট করুন :

new Container(
          width: double.infinity,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

2) মিডিয়াকিউরি ব্যবহার করুন:

new Container(
          width: MedialQuery.of(context).size.width,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

4

@ মোহিত সুথার,

নীচের মতো উচ্চতার পাশাপাশি প্রস্থের সাথে ম্যাচ পিতামাতার জন্য একটি সেরা সমাধান খুঁজে পেয়েছে

new Expanded(
          child: new Container(
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.all(16.0),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8.0)),
                  border: new Border.all(color: Colors.black, width: 1.0)),
              child: new Text("TejaDroid")),
        ), 

এখানে আপনি পরীক্ষা করতে পারেন যে Expandedকন্ট্রোলার পুরো অবশিষ্ট প্রস্থ এবং উচ্চতা অর্জন করে


1
এখনও অবধি এটির সেরা সমাধান
এম ডেভিড

4

এটি আমার পক্ষে কাজ করেছে।

উপরের প্রদত্ত কোডটিতে ম্যাচ-প্যারেন্টের প্রস্থ বা উচ্চতা দেওয়ার সহজ উপায়।

...
width: double.infinity,
height: double.infinity,
...

4

জন্য match_parentআপনি ব্যবহার করতে পারেন

SizedBox(
  width: double.infinity, // match_parent
  child: RaisedButton(...)
)

যে কোনও নির্দিষ্ট মান আপনি ব্যবহার করতে পারেন

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)

1

নিম্নলিখিত কোডটি আমার পক্ষে কাজ করে

       ButtonTheme(
            minWidth: double.infinity,
            child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))

1

এটি আমার জন্য স্ব-র অন্তর্ভুক্ত উইজেটে কাজ করছে।

  Widget signinButton() {
    return ButtonTheme(
      minWidth: double.infinity,
      child: new FlatButton(
        onPressed: () {},
        color: Colors.green[400],
        textColor: Colors.white,
        child: Text('Flat Button'),
      ),
    );
  }

// It can then be used in a class that contains a widget tree.

1

এটি আমার জন্য কাজ করছে।

    SizedBox(
             width: double.maxFinite,
             child: RaisedButton(
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 child: new Text("Button 2"),
                 color: Colors.lightBlueAccent,
                 onPressed: () => debugPrint("Button 2"),
              ),
     ), 

1

ব্যবহার করা একটি ListTileনামেও ভাল কাজ করে, যেহেতু একটি তালিকা সমগ্র প্রস্থ পূরণ:

ListTile(
  title: new RaisedButton(...),
),



0

এই আমার জন্য কাজ করে

width: MediaQuery.of(context).size.width-100,

0

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) এটা আমার জন্য কাজ করে.


0

সর্বাধিক মৌলিক পদ্ধতির ধারকটির দৈর্ঘ্য অসীমকে সংজ্ঞায়িত করে কনটেইনারটি ব্যবহার করা হচ্ছে। নীচে কোড উদাহরণ দেখুন

Container(
    width: double.infinity,
    child:FlatButton(
        onPressed: () {
            //your action here
        },
        child: Text("Button"),

    )
)

0
         OutlineButton(
              onPressed: () {
                logInButtonPressed(context);
              },
              child: Container(
                width: MediaQuery.of(context).size.width / 2,
                child: Text(Log in,
                  textAlign: TextAlign.center,
                ),
              ),
            )

এরকম কিছু আমার জন্য কাজ করে।


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.