Flutter Card, ListTile, CircleAvatar, Divider, Chip, Checkbox, Radio, Switch & Slider
🔹 Card - All Common Properties
Card(
// Background Color
color: Colors.white,
// Shadow Color
shadowColor: Colors.black,
// Elevation
elevation: 8,
// Margin
margin: EdgeInsets.all(10),
// Shape
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
// Border On Foreground
borderOnForeground: true,
// Clip Behavior
clipBehavior: Clip.antiAlias,
child: Padding(
padding: EdgeInsets.all(20),
child: Text("Card Widget"),
),
)
🔹 ListTile - All Common Properties
ListTile(
// Leading Widget
leading: Icon(Icons.person),
// Main Title
title: Text("Shakil Hossain"),
// Subtitle
subtitle: Text("Flutter Developer"),
// Trailing Widget
trailing: Icon(Icons.arrow_forward_ios),
// Dense Layout
dense: false,
// Enable/Disable
enabled: true,
// Selected State
selected: false,
// Selected Color
selectedColor: Colors.blue,
// Icon Color
iconColor: Colors.black,
// Text Color
textColor: Colors.black,
// Tile Color
tileColor: Colors.white,
// Selected Tile Color
selectedTileColor: Colors.blue.shade50,
// Content Padding
contentPadding: EdgeInsets.all(10),
// Shape
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
// Click Event
onTap: () {},
// Long Press Event
onLongPress: () {},
)
🔹 CircleAvatar - All Common Properties
CircleAvatar(
// Radius
radius: 40,
// Background Color
backgroundColor: Colors.blue,
// Foreground Color
foregroundColor: Colors.white,
// Text
child: Text("S"),
// Local Image
backgroundImage:
AssetImage("assets/profile.png"),
// Network Image
foregroundImage:
NetworkImage("image_url"),
// Error Widget
onBackgroundImageError:
(exception, stackTrace) {},
)
🔹 Divider - All Common Properties
Divider(
// Line Height
height: 30,
// Line Thickness
thickness: 2,
// Color
color: Colors.grey,
// Start Indent
indent: 20,
// End Indent
endIndent: 20,
)
🔹 Chip - All Common Properties
Chip(
// Label Text
label: Text("Flutter"),
// Avatar
avatar: Icon(Icons.code),
// Background Color
backgroundColor: Colors.blue.shade100,
// Label Style
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
),
// Padding
padding: EdgeInsets.all(10),
// Shape
shape: StadiumBorder(),
// Shadow
elevation: 4,
// Shadow Color
shadowColor: Colors.black,
// Delete Icon
deleteIcon: Icon(Icons.close),
// Delete Event
onDeleted: () {},
)
🔹 Checkbox - All Common Properties
Checkbox(
// Checked Value
value: isChecked,
// Value Change
onChanged: (value) {},
// Active Color
activeColor: Colors.green,
// Check Mark Color
checkColor: Colors.white,
// Focus Color
focusColor: Colors.blue,
// Hover Color
hoverColor: Colors.grey,
// Splash Radius
splashRadius: 25,
// Shape
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
// Border Side
side: BorderSide(
color: Colors.black,
),
)
🔹 CheckboxListTile
CheckboxListTile(
// Checkbox Value
value: isChecked,
// Change Event
onChanged: (value) {},
// Title
title: Text("Accept Terms"),
// Subtitle
subtitle: Text("Required"),
// Secondary Widget
secondary: Icon(Icons.check),
// Active Color
activeColor: Colors.green,
// Tile Color
tileColor: Colors.white,
)
🔹 Radio - All Common Properties
Radio<String>(
// Current Value
value: "male",
// Selected Value
groupValue: gender,
// Change Event
onChanged: (value) {},
// Active Color
activeColor: Colors.blue,
// Focus Color
focusColor: Colors.grey,
// Hover Color
hoverColor: Colors.grey,
// Splash Radius
splashRadius: 25,
)
🔹 RadioListTile
RadioListTile<String>(
value: "male",
groupValue: gender,
onChanged: (value) {},
title: Text("Male"),
subtitle: Text("Select Gender"),
secondary: Icon(Icons.person),
activeColor: Colors.blue,
)
🔹 Switch - All Common Properties
Switch(
// Current Value
value: isDarkMode,
// Value Change
onChanged: (value) {},
// Active Thumb Color
activeColor: Colors.green,
// Active Track Color
activeTrackColor: Colors.greenAccent,
// Inactive Thumb Color
inactiveThumbColor: Colors.grey,
// Inactive Track Color
inactiveTrackColor: Colors.black12,
// Focus Color
focusColor: Colors.blue,
// Hover Color
hoverColor: Colors.grey,
)
🔹 SwitchListTile
SwitchListTile(
value: isDarkMode,
onChanged: (value) {},
title: Text("Dark Mode"),
subtitle: Text("Enable Dark Theme"),
secondary: Icon(Icons.dark_mode),
activeColor: Colors.green,
)
🔹 Slider - All Common Properties
Slider(
// Current Value
value: sliderValue,
// Minimum Value
min: 0,
// Maximum Value
max: 100,
// Total Divisions
divisions: 10,
// Label
label: sliderValue.round().toString(),
// Change Event
onChanged: (value) {},
// Change Start
onChangeStart: (value) {},
// Change End
onChangeEnd: (value) {},
// Active Color
activeColor: Colors.blue,
// Inactive Color
inactiveColor: Colors.grey,
)
📌 Widget Summary
| Widget | ব্যবহার |
|---|
| Card | Material Design Card |
| ListTile | List Item তৈরি |
| CircleAvatar | Profile Image/Avatar |
| Divider | Separator Line |
| Chip | Tag/Category UI |
| Checkbox | Multiple Selection |
| Radio | Single Selection |
| Switch | On/Off Toggle |
| Slider | Range Selection |
| CheckboxListTile | Checkbox + ListTile |
| RadioListTile | Radio + ListTile |
| SwitchListTile | Switch + ListTile |
📌 Selection Widgets
Checkbox // Multiple Choice
Radio // Single Choice
Switch // True / False
Slider // Numeric Range
Comments
Post a Comment