citomoltd_workspace.json
C

CitomoLtd

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

Flutter TextField, TextFormField & Image - All Common Properties

 

Flutter TextField, TextFormField & Image - All Common Properties


🔹 TextField - All Common Properties

TextField(

  // Text Controller
  controller: textController,

  // Focus Control
  focusNode: focusNode,

  // শুরুতেই Focus নিবে কিনা
  autofocus: false,

  // Text Hide/Show
  obscureText: false,

  // Suggestion Enable
  enableSuggestions: true,

  // Auto Correct
  autocorrect: true,

  // Maximum Line
  maxLines: 1,

  // Minimum Line
  minLines: 1,

  // Maximum Character Length
  maxLength: 100,

  // Read Only
  readOnly: false,

  // Enable/Disable
  enabled: true,

  // Keyboard Type
  keyboardType: TextInputType.text,

  // Action Button
  textInputAction: TextInputAction.done,

  // Text Align
  textAlign: TextAlign.start,

  // Text Direction
  textDirection: TextDirection.ltr,

  // Text Style
  style: TextStyle(
    fontSize: 18,
    color: Colors.black,
  ),

  // Cursor Color
  cursorColor: Colors.blue,

  // Cursor Width
  cursorWidth: 2,

  // Cursor Height
  cursorHeight: 25,

  // Cursor Radius
  cursorRadius: Radius.circular(5),

  // Keyboard Appearance
  keyboardAppearance: Brightness.light,

  // Text Changed
  onChanged: (value) {},

  // Submit Event
  onSubmitted: (value) {},

  // Tap Event
  onTap: () {},

  // Decoration
  decoration: InputDecoration(

    // Hint Text
    hintText: "Enter your name",

    // Label Text
    labelText: "Name",

    // Helper Text
    helperText: "Full Name",

    // Error Text
    errorText: null,

    // Prefix Icon
    prefixIcon: Icon(Icons.person),

    // Suffix Icon
    suffixIcon: Icon(Icons.check),

    // Prefix Text
    prefixText: "+88 ",

    // Suffix Text
    suffixText: ".com",

    // Filled Background
    filled: true,

    // Fill Color
    fillColor: Colors.grey.shade200,

    // Border
    border: OutlineInputBorder(),

    // Enable Border
    enabledBorder: OutlineInputBorder(),

    // Focus Border
    focusedBorder: OutlineInputBorder(),

    // Error Border
    errorBorder: OutlineInputBorder(),

    // Content Padding
    contentPadding: EdgeInsets.all(16),
  ),
)

🔹 TextFormField - All Common Properties

TextFormField(

  // Text Controller
  controller: controller,

  // Focus Node
  focusNode: focusNode,

  // Initial Value
  initialValue: null,

  // Read Only
  readOnly: false,

  // Enable/Disable
  enabled: true,

  // Auto Focus
  autofocus: false,

  // Obscure Text
  obscureText: false,

  // Keyboard Type
  keyboardType: TextInputType.text,

  // Text Action
  textInputAction: TextInputAction.next,

  // Max Line
  maxLines: 1,

  // Min Line
  minLines: 1,

  // Max Length
  maxLength: 100,

  // Text Style
  style: TextStyle(),

  // Text Change
  onChanged: (value) {},

  // Field Submitted
  onFieldSubmitted: (value) {},

  // Save Data
  onSaved: (value) {},

  // Validation
  validator: (value) {

    if (value == null || value.isEmpty) {
      return "Required";
    }

    return null;
  },

  decoration: InputDecoration(

    hintText: "Enter Email",

    labelText: "Email",

    prefixIcon: Icon(Icons.email),

    border: OutlineInputBorder(),
  ),
)

🔹 Image Widget - All Common Properties

Image.asset()

Image.asset(

  // Asset Path
  "assets/images/photo.png",

  // Width
  width: 200,

  // Height
  height: 200,

  // Fit
  fit: BoxFit.cover,

  // Alignment
  alignment: Alignment.center,

  // Repeat
  repeat: ImageRepeat.noRepeat,

  // Color Overlay
  color: Colors.red,

  // Blend Mode
  colorBlendMode: BlendMode.overlay,

  // Filter Quality
  filterQuality: FilterQuality.high,

  // Semantic Label
  semanticLabel: "Profile Image",

  // Image Loading
  frameBuilder:
      (context, child, frame, loaded) {
    return child;
  },

  // Error Handling
  errorBuilder:
      (context, error, stackTrace) {

    return Icon(Icons.error);
  },
)

Image.network()

Image.network(

  // Image URL
  "https://example.com/image.jpg",

  // Width
  width: 250,

  // Height
  height: 250,

  // Box Fit
  fit: BoxFit.cover,

  // Loading Builder
  loadingBuilder:
      (context, child, progress) {

    if (progress == null) {
      return child;
    }

    return CircularProgressIndicator();
  },

  // Error Builder
  errorBuilder:
      (context, error, stackTrace) {

    return Icon(Icons.error);
  },
)

Image.file()

Image.file(

  File(imagePath),

  // Width
  width: 200,

  // Height
  height: 200,

  // Fit
  fit: BoxFit.cover,
)

Image.memory()

Image.memory(

  bytes,

  // Width
  width: 200,

  // Height
  height: 200,

  // Fit
  fit: BoxFit.cover,
)

🔹 BoxFit Values

BoxFit.fill
BoxFit.contain
BoxFit.cover
BoxFit.fitWidth
BoxFit.fitHeight
BoxFit.scaleDown
BoxFit.none

📌 TextField vs TextFormField

Widgetব্যবহার
TextFieldসাধারণ Input নেওয়ার জন্য
TextFormFieldForm Validation সহ Input নেওয়ার জন্য

📌 Image Types

Widgetব্যবহার
Image.assetLocal Asset Image
Image.networkInternet Image
Image.fileDevice File Image
Image.memoryByte Data Image

Comments