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 নেওয়ার জন্য |
| TextFormField | Form Validation সহ Input নেওয়ার জন্য |
📌 Image Types
| Widget | ব্যবহার |
|---|
| Image.asset | Local Asset Image |
| Image.network | Internet Image |
| Image.file | Device File Image |
| Image.memory | Byte Data Image |
Comments
Post a Comment