citomoltd_workspace.json
C

CitomoLtd

Verified Studio
const Organization = { ceo: "Md Shakil Hossain" };
 

Flutter Card, ListTile, CircleAvatar, Divider, Chip, Checkbox, Radio, Switch & Slider

 

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ব্যবহার
CardMaterial Design Card
ListTileList Item তৈরি
CircleAvatarProfile Image/Avatar
DividerSeparator Line
ChipTag/Category UI
CheckboxMultiple Selection
RadioSingle Selection
SwitchOn/Off Toggle
SliderRange Selection
CheckboxListTileCheckbox + ListTile
RadioListTileRadio + ListTile
SwitchListTileSwitch + ListTile

📌 Selection Widgets

Checkbox      // Multiple Choice
Radio         // Single Choice
Switch        // True / False
Slider        // Numeric Range

Comments