ফ্লাটারে অনেক ধরণের বাটন ব্যবহার করা যায়। যেমন কমন বাটন উইজেট হচ্ছে ElevatedButton। যা এভাবে ব্যবহার করা যায়ঃ
ElevatedButton(
onPressed: () {
print("Button Pressed!");
},
child: Text("Click Me"),
)
সিম্পল টেক্সট বাটন ব্যবহার করতে চাইলে রয়েছে TextButton উইজেটঃ
TextButton(
onPressed: () {
print("Text Button Clicked!");
},
child: Text("Press Me"),
)
বাটনের চারপাশে যদি বর্ডার চাই, তাহলে রয়েছে OutlinedButton উইজেটঃ
OutlinedButton(
onPressed: () {
print("Outlined Button Clicked!");
},
child: Text("Outlined Button"),
)
কোন আইকনকে বাটন হিসেবে ব্যবহার করার জন্য রয়েছে IconButton উইজেটঃ
IconButton(
onPressed: () {
print("Icon Button Clicked!");
},
icon: Icon(Icons.home, color: Colors.blue),
)
বাটনে আমরা যে কোন স্টাইল যোগ করতে পারি। যেমন ElevatedButton এ বিভিন্ন স্টাইল প্রয়োগ করার জন্য এভাবে লিখতে পারিঃ
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
onPressed: () {
print("Custom Styled Button Clicked!");
},
child: Text("Styled Button"),
)
টেক্সট এবং আইকন এক সাথে
ElevatedButton.icon(
onPressed: () {
print("Button with Icon Pressed!");
},
icon: Icon(Icons.thumb_up, color: Colors.white),
label: Text("Like"),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
),
)
ফুল উইথ বাটন
নির্দিষ্ট কন্টেইনারের মধ্যে ফুল উইথ বাটন দেখানোর জন্য SizedBox এর ভেতর বাটনকে র্যাপ করে নিব। এরপর SizedBox এর উইথ প্রোপার্টি infinity সেট করব। তাহলে বাটন সম্পূর্ণ উইথ অনুযায়ী দেখাবে।
SizedBox(
width: double.infinity, // Full width
child: ElevatedButton(
onPressed: () {},
child: Text("Full Width Button"),
),
)
ফ্লোটিং বাটন
ফ্লোট্রিং একশন বাটন দেখানোর জন্য রয়েছে FloatingActionButton উইজেট। যা এভাবে ব্যবহার করতে পারিঃ
FloatingActionButton(
onPressed: () {
print("FAB Clicked!");
},
backgroundColor: Colors.pink,
child: Icon(Icons.add),
)