আমি বর্তমানে ফ্লুরগুলিতে একটি অ্যান্ড্রয়েড অ্যাপ বিকাশ করছি। আমি কীভাবে একটি বৃত্তাকার বোতামটি যুক্ত করতে পারি?
উত্তর:
1. সমাধান সংক্ষিপ্তসার
আপনি এবং shapeজন্য ব্যবহার করতে পারেন ।FlatButtonRaisedButton
গোলাকার বোতাম
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
),
স্কয়ার বোতাম
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
side: BorderSide(color: Colors.red)
),
সম্পূর্ণ উদাহরণ
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)),
color: Colors.white,
textColor: Colors.red,
padding: EdgeInsets.all(8.0),
onPressed: () {},
child: Text(
"Add to Cart".toUpperCase(),
style: TextStyle(
fontSize: 14.0,
),
),
),
SizedBox(width: 10),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)),
onPressed: () {},
color: Colors.red,
textColor: Colors.white,
child: Text("Buy now".toUpperCase(),
style: TextStyle(fontSize: 14)),
),
],
)
আপনি RaisedButton উইজেট ব্যবহার করতে পারেন। উত্থাপিত বোতাম উইজেটের আকৃতির সম্পত্তি রয়েছে যা আপনি নীচের স্নিপেটে দেখানো হিসাবে ব্যবহার করতে পারবেন।
RaisedButton(
child: Text("Press Me"),
onPressed: null,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
)
এটি করার অনেকগুলি উপায় রয়েছে। আমি এখানে কয়েকটি তালিকাবদ্ধ করছি।
(1) ব্যবহার RoundedRectangleBorder
RaisedButton(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
onPressed: () {},
child: Text("Button"),
)(2) ব্যবহার ClipRRect
ClipRRect(
borderRadius: BorderRadius.circular(40),
child: RaisedButton(
onPressed: () {},
child: Text("Button"),
),
)(3) ব্যবহার ClipOval
ClipOval(
child: RaisedButton(
onPressed: () {},
child: Text("Button"),
),
)(4) ব্যবহার ButtonTheme
ButtonTheme(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
child: RaisedButton(
onPressed: () {},
child: Text("Button"),
),
)(5) ব্যবহার StadiumBorder
RaisedButton(
shape: StadiumBorder(),
onPressed: () {},
child: Text("Button"),
)আপনি কেবল রাইজডবটন ব্যবহার করতে পারেন
Padding(
padding: EdgeInsets.only(left: 150.0, right: 0.0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.black,
child: Text("Search"),
onPressed: () {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
)আউটপুট:
আরও তথ্য: আরএসকোডার
আপনি কেবল ব্যবহার করতে পারেন RaisedButtonবা আপনি ব্যবহার করতে পারেন InkWellমত প্রচলিত বোতাম এবং বৈশিষ্ট্য পেতে onDoubleTap, onLongPressএবং etc।
new InkWell(
onTap: () => print('hello'),
child: new Container(
//width: 100.0,
height: 50.0,
decoration: new BoxDecoration(
color: Colors.blueAccent,
border: new Border.all(color: Colors.white, width: 2.0),
borderRadius: new BorderRadius.circular(10.0),
),
child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
),
),
আপনি যদি উইজেটের বৈশিষ্ট্যগুলি ব্যবহার করতে চান splashColor, তবে ধারকটি সজ্জিত করার পরিবর্তে উইজেটের পিতামাতা হিসাবে ব্যবহার করুন (প্রসাধনের সম্পত্তি মুছে ফেলা)। পড়ুন কেন? এখানে ।highlightColorInkWellMaterialInkWell
InkWellগোলাকার কোণগুলিতে ক্লিপ করতে চান তবে আপনাকে উইজেটে যুক্ত borderRadius: BorderRadius.circular(10.0)করতে InkWellহবে অন্যথায় এটি আবদ্ধ আয়তক্ষেত্রের প্রান্তে চলে যাবে।
গ্রেডিয়েন্ট রঙের সাথে বৃত্তাকার বোতামটি তৈরি করতে আপনি নীচের কোডটি ব্যবহার করতে পারেন।
Container(
width: 130.0,
height: 43.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.9],
colors: [
// Colors are easy thanks to Flutter's Colors class.
Color(0xff1d83ab),
Color(0xff0cbab8),
],
),
),
child: FlatButton(
child: Text(
'Sign In',
style: TextStyle(
fontSize: 16.0,
fontFamily: 'Righteous',
fontWeight: FontWeight.w600,
),
),
textColor: Colors.white,
color: Colors.transparent,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
onPressed: () {
},
),
);আপনার সম্ভবত ডক্সের এই পৃষ্ঠাটি বিশেষত: গোলাকার কোণগুলির সাথে নিজেকে পরিচিত করা উচিত ।
ডক্স আপনাকে কীভাবে কোনও উপাদানগুলির স্টাইলিং এবং সিএসএস-এর সমতুল্য স্টাইলিং পরিবর্তন করবেন তা দেখায়, যদি আপনি ইতিমধ্যে এর সাথে পরিচিত হন।
আপনি এই কোডটি রঙের অভ্যন্তরের বর্ণে স্বচ্ছ রঙ দিয়ে স্বচ্ছ বৃত্তাকার বোতামের জন্য ব্যবহার করতে পারেন BoxDecoration। যেমন। color: Colors.transparent। এছাড়াও, খেয়াল রাখবেন যে এই বোতামটি কেবলমাত্র Containerএবং GestureDetectorউইজেটগুলি ব্যবহার করে।
Container(
height: 50.0,
child: GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"BUTTON",
style: TextStyle(
color: Color(0xFFF05A22),
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
)
],
),
),
),
)
যদি আমি এইভাবে এটি অর্জনের চেয়ে সম্পূর্ণ বিজ্ঞপ্তি বোতামটির সন্ধান করে।
Center(
child: SizedBox.fromSize(
size: Size(80, 80), // button width and height
child: ClipOval(
child: Material(
color: Colors.pink[300], // button color
child: InkWell(
splashColor: Colors.yellow, // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.linked_camera), // icon
Text("Picture"), // text
],
),
),
),
),
),
)আপনি যদি মেটারিয়াল অ্যাপটিকে আপনার প্রধান উইজেট হিসাবে ব্যবহার করেন তবে আপনি সর্বদা উপাদান বোতামটি ব্যবহার করতে পারেন।
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
borderRadius: BorderRadius.circular(30.0),//Set this up for rounding corners.
shadowColor: Colors.lightBlueAccent.shade100,
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: (){//Actions here//},
color: Colors.lightBlueAccent,
child: Text('Log in', style: TextStyle(color: Colors.white),),
),
),
)ইন পাখির
Container()উইজেটটি আপনার widget.Using styling জন্য ব্যবহারContainer()আপনি সীমান্ত বা কোন উইজেট এর বৃত্তাকার কোণ সেট করতে পারেন উইজেট
আপনি যদি কোনও ধরণের স্টাইলিং এবং সেট সজ্জা সেট করতে চান তবে সেই উইজেটটিকে Container()উইজেটে রাখুন, যা সজ্জায় অনেক সম্পত্তি সরবরাহ করে।
Container(
width: 100,
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(30)), // make rounded corner
child: Text("Click"),
)আপনি বাটনে কোনও আকার ব্যবহার করতে নিশ্চিত হয়ে নিন যে আপনি বাটন উইজেটের ভিতরে সমস্ত কোড সম্পাদন করেছেন
**shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red) ),**যদি আপনি এটি বর্গক্ষেত্রটি order BorderRadius.circular (0.0) ব্যবহার করতে চান তবে এটি স্বয়ংক্রিয়ভাবে স্কোয়ারে পরিণত হয়
এই মত বোতাম
ইউআই স্ক্রিন দেওয়ার জন্য সমস্ত উত্স কোড এখানে
Scaffold(
backgroundColor: Color(0xFF8E44AD),
body: new Center(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(90, 10, 20, 0),
padding: new EdgeInsets.only(top: 92.0),
child: Text(
"Currency Converter",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Container(
margin: EdgeInsets.only(),
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "Amount",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Container(
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "From",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Container(
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "To",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
)),
),
),
SizedBox(height: 20.0),
MaterialButton(
height: 58,
minWidth: 340,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(12)),
onPressed: () {},
child: Text(
"CONVERT",
style: TextStyle(
fontSize: 24,
color: Colors.black,
),
),
color: Color(0xFFF7CA18),
),
],
),
),
),
);এখানে অন্য একটি সমাধান
Container(
height: MediaQuery.of(context).size.height * 0.10,
width: MediaQuery.of(context).size.width,
child: ButtonTheme(
minWidth: MediaQuery.of(context).size.width * 0.75,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(25.0),
side: BorderSide(color: Colors.blue)),
onPressed: () async {
// do something
},
color: Colors.red[900],
textColor: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Button Text,
style: TextStyle(fontSize: 24)),
),
),
),
),আপনার সমস্যার কোড এখানে আপনাকে বাক্সডেকোরেশনে সীমানা ব্যাসার্ধ সহ একটি সাধারণ ধারক নিতে হবে।
new Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15.0)),
color: Colors.blue,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: new Text(
"Next",
style: new TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white,
fontSize: 15.0,
),
),
),
],
),
),RaisedButton(
child: Text("Button"),
onPressed: (){},
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),
side: BorderSide(color: Colors.red))
)
RaisedButtonবাInkWell