কীভাবে ঝাঁকুনিতে রাইজডবটনটির প্রস্থ সেট করবেন?

Question 1

আমি দেখেছি যে আমি RaisedButtonফ্লুরগুলিতে প্রস্থ নির্ধারণ করতে পারি না । যদি আমি ভালভাবে বুঝতে পারি তবে আমার এটি RaisedButtonকরা উচিত SizedBox। আমি তখন বাক্সটির প্রস্থ বা উচ্চতা নির্ধারণ করতে সক্ষম হব। ইহা কি সঠিক? এটি করার অন্য কোনও উপায় আছে?

SizedBoxপ্রতিটি বোতামের চারপাশে একটি তৈরি করা কিছুটা ক্লান্তিকর তাই আমি ভাবছি যে তারা কেন এইভাবে এটি বেছে নিয়েছে। আমি নিশ্চিত যে তাদের এটি করার উপযুক্ত কারণ আছে তবে আমি এটি দেখতে পাচ্ছি না। ভাস্কর্য পড়া এবং একটি শিক্ষানবিস জন্য নির্মাণ করা বেশ কঠিন।

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: new RaisedButton(
    child: new Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),

Question 2

এখানে ডকুমেন্টেশন হিসাবে বলা হয়েছে

উত্থাপিত বোতামগুলির সর্বনিম্ন আকার ৮.0.০ বাই 36.0 রয়েছে যা বাটন থেমের সাহায্যে ওভাররাইড করা যায়।

আপনি এটি করতে পারেন

ButtonTheme(
  minWidth: 200.0,
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

Question 3

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

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

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

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

Question 4

এর কারণ হ'ল ফড়ফড় করা প্রায় আকারের নয়। এটা বাধা সম্পর্কে।

সাধারণত আমাদের 2 টি ব্যবহারের কেস থাকে:

একটি উইজেটের শিশু একটি সীমাবদ্ধতার সংজ্ঞা দেয়। পিতামাতার আকার নিজেই সেই তথ্যের উপর ভিত্তি করে। উদা:, Paddingযা সন্তানের প্রতিবন্ধকতা নেয় এবং এটি বাড়িয়ে তোলে।
অভিভাবকরা তার সন্তানের প্রতিবন্ধকতা প্রয়োগ করে। উদা :, SizedBoxতবে Columnস্ট্রেচ মোডেও ...

RaisedButtonপ্রথম মামলা। যার অর্থ এটি বাটন যা তার নিজস্ব উচ্চতা / প্রস্থ নির্ধারণ করে def এবং, উপাদানগুলির নিয়ম অনুসারে, উত্থাপিত বোতামের আকারটি স্থির।

আপনি সেই আচরণটি চান না, তাই বোতামের সীমাবদ্ধতাগুলিকে ওভাররাইড করতে আপনি দ্বিতীয় ধরণের একটি উইজেট ব্যবহার করতে পারেন।

যাইহোক, আপনার যদি এটির প্রচুর প্রয়োজন হয়, হয় একটি নতুন উইজেট তৈরি করা বিবেচনা করুন যা আপনার জন্য কাজ করে। বা ব্যবহার করুন MaterialButton, যা উচ্চতার সম্পত্তি ধারণ করে।

Question 5

আপনি যেমন এটি করতে পারেন তার চেয়ে আমি একটি মেটেরিয়াল বাটন ব্যবহারের পরামর্শ দেব:

new MaterialButton( 
 height: 40.0, 
 minWidth: 70.0, 
 color: Theme.of(context).primaryColor, 
 textColor: Colors.white, 
 child: new Text("push"), 
 onPressed: () => {}, 
 splashColor: Colors.redAccent,
)

Question 6

ম্যাচ পিতামাতার সাথে রাইজ বোতামটি তৈরি করার আমার পছন্দের উপায়টি হ'ল এটি কনটেইনার দিয়ে মোড়ানো। নীচে নমুনা কোড।

Container(
          width: double.infinity,
          child: RaisedButton(
                 onPressed: () {},
                 color: Colors.deepPurpleAccent[100],
                 child: Text(
                        "Continue",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )

Question 7

কোডের এই অংশটি আপনাকে আরও ভালভাবে আপনার সমস্যার সমাধান করতে সহায়তা করবে, কারণ আমরা সরাসরি রেইসড বাটনে প্রস্থ নির্দিষ্ট করতে পারি না, আমরা তার সন্তানের প্রস্থটি নির্দিষ্ট করতে পারি

double width = MediaQuery.of(context).size.width;
var maxWidthChild = SizedBox(
            width: width,
            child: Text(
              StringConfig.acceptButton,
              textAlign: TextAlign.center,
            ));

RaisedButton(
        child: maxWidthChild,
        onPressed: (){},
        color: Colors.white,
    );

Question 8

আপনার একটি প্রসারিত উইজেট ব্যবহার করা দরকার। তবে, যদি আপনার বোতামটি একটি কলামে থাকে তবে প্রসারিত উইজেটটি কলামের বাকি অংশটি পূরণ করে। সুতরাং, আপনার প্রসারিত উইজেটটি একটি সারির মধ্যে আবদ্ধ করতে হবে।

Row(children: <Widget>[
Expanded(
  flex: 1,
  child: RaisedButton(
    child: Text("Your Text"),
      onPressed: _submitForm,
    ),
  ),),])

Question 9

কেবল ফ্র্যাকশনালি সাইজডবক্স ব্যবহার করতে পারেন।

যেখানে প্রস্থের ফ্যাক্টর এবং উচ্চতা ফ্যাক্টর অ্যাপ / প্যারেন্ট আকারের শতাংশ নির্ধারণ করে

FractionallySizedBox(
widthFactor: 0.8,   //means 80% of app width
child: RaisedButton(
  onPressed: () {},
  child: Text(
    "Your Text",
    style: TextStyle(color: Colors.white),
  ),
  color: Colors.red,
)),

Question 10

কনটেইনারের অভ্যন্তরে রাইজডবটনটি মোড়ুন এবং ধারক উইজেটের প্রস্থ দিন।

যেমন

 Container(
 width : 200,
 child : RaisedButton(
         child :YourWidget ,
         onPressed(){}
      ),
    )

Question 11

আপনি সমস্ত অ্যাপ্লিকেশনটিতে ব্যবহৃত বোতামের মতো বিশ্বব্যাপী পদ্ধতি তৈরি করতে পারেন। এটি ধারকটির অভ্যন্তরের পাঠ্য দৈর্ঘ্য অনুসারে আকার পরিবর্তন করবে। ফিটডবক্স উইজেট এর অভ্যন্তরের শিশু অনুযায়ী উইজেট ফিট করতে ব্যবহৃত হয়।

Widget primaryButton(String btnName, {@required Function action}) {
  return FittedBox(
  child: RawMaterialButton(
  fillColor: accentColor,
  splashColor: Colors.black12,
  elevation: 8.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 13.0),
    child: Center(child: Text(btnName, style: TextStyle(fontSize: 18.0))),
  ),
  onPressed: () {
    action();
   },
  ),
 );
}

আপনি যদি নির্দিষ্ট প্রস্থ এবং উচ্চতার বোতাম চান তবে আপনি ন্যূনতম সর্বাধিক প্রস্থ এবং উচ্চতার বাটনের জন্য RawMaterialButton এর সীমাবদ্ধ সম্পত্তি ব্যবহার করতে পারেন

constraints: BoxConstraints(minHeight: 45.0,maxHeight:60.0,minWidth:20.0,maxWidth:150.0),

Question 12

যদি আপনি বিশ্বব্যাপী আপনার সমস্তগুলির উচ্চতা এবং মিনিট প্রস্থ পরিবর্তন করতে চান RaisedButtonতবে আপনি নিজের ThemeDataভিতরে ওভাররাইড করতে পারেন MaterialApp:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
       ...
       theme: ThemeData(
       ...
       buttonTheme: ButtonThemeData(
          height: 46,
          minWidth: 100,
       ),
    ));
  }

Question 13

আপনার সমাধানের জন্য প্রস্থটি বুদ্ধিমানের সাথে ব্যবহার করতে মিডিয়া ক্যোয়ারী ব্যবহার করুন যা ছোট এবং বড় স্ক্রিনের জন্য একই চলবে

  Container(
            width: MediaQuery.of(context).size.width * 0.5, // Will take 50% of screen space
            child: RaisedButton(
              child: Text('Go to screen two'),
              onPressed: () => null
            ),
          )

আপনিও অনুরূপ সমাধান প্রয়োগ করতে পারেন SizeBox।

Question 14

তারা মন্তব্যগুলিতে যেমন বলেছিল তেমন করতে পারেন বা আপনি প্রচেষ্টাটি সংরক্ষণ করতে পারেন এবং RawMaterialButton এর সাথে কাজ করতে পারেন। যার সব কিছু রয়েছে এবং আপনি সীমানাটি বৃত্তাকার এবং অন্যান্য বৈশিষ্ট্যের অনেকগুলিতে পরিবর্তন করতে পারেন। প্রাক্তন আকৃতি (আরও বৃত্তাকার আকারের ব্যাসার্ধ বাড়ান)

shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25

এবং আপনি গেস্টচারডেক্টর যা উইজেট হিসাবে ব্যবহার করে বাচ্চার বৈশিষ্ট্যের অধীনে অন্য একটি উইজেট গ্রহণ করে বাটন হিসাবে আপনি যা আকার চান তা ব্যবহার করতে পারেন। এখানে অন্যান্য উদাহরণ মত

GestureDetector(
onTap: () {//handle the press action here }
child:Container(

              height: 80,
              width: 80,
              child:new Card(

                color: Colors.blue,
                shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
                elevation: 0.0,                
              child: Icon(Icons.add,color: Colors.white,),
              ),
              )
)

Question 15

যদি বোতামটি একটি Flexউইজেটে স্থাপন করা হয় ( Row& সহ Column), আপনি উপলভ্য স্থানটি পূরণ করতে প্রসারিত উইজেট ব্যবহার করে এটি মোড়ানো করতে পারেন ।

Question 16

আমার ক্ষেত্রে আমি আকার পরিবর্তন করতে সক্ষম হতে মার্জিন ব্যবহার করেছি:

Container(


     margin: EdgeInsets.all(10),

    // or margin: EdgeInsets.only(left:10, right:10),



        child: RaisedButton(
          padding: EdgeInsets.all(10),

          shape: RoundedRectangleBorder(borderRadius: 
BorderRadius.circular(20)),
          onPressed: () {},
          child: Text("Button"),
        ),
      ),

Question 17

চেষ্টা কর

Expanded(   
  child: RaisedButton(
    onPressed: _onButtonPressed,
    child: Text('Button1')
  )  
)

Question 18

আপনি যদি সমস্ত বোতাম থিম সেট আপ সরাতে না চান।




ButtonTheme.fromButtonThemeData(
  data: Theme.of(context).buttonTheme.copyWith(
                minWidth: 200.0,
                height: 100.0,,
              )
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);