Flutter Text & Icon Widget Guide
Flutter UI তৈরির সময় Text এবং Icon সবচেয়ে বেশি ব্যবহৃত Widget। নিচে তাদের গুরুত্বপূর্ণ Properties এবং কাজ Comment আকারে দেখানো হলো।
🔹 Text Widget - All Common Properties
Text(
// যে Text দেখাতে চান
"Hello Flutter",
style: TextStyle(
// Text Color
color: Colors.blue,
// Font Size
fontSize: 20,
// Font Weight
fontWeight: FontWeight.bold,
// Font Style
fontStyle: FontStyle.italic,
// Letter Spacing
letterSpacing: 2,
// Word Spacing
wordSpacing: 5,
// Line Height
height: 1.5,
// Text Decoration
decoration: TextDecoration.underline,
// Decoration Color
decorationColor: Colors.red,
// Decoration Style
decorationStyle: TextDecorationStyle.dashed,
// Background Color
backgroundColor: Colors.yellow,
// Text Shadow
shadows: [
Shadow(
blurRadius: 5,
offset: Offset(2, 2),
color: Colors.grey,
),
],
),
// Text Alignment
textAlign: TextAlign.center,
// Overflow হলে কী হবে
overflow: TextOverflow.ellipsis,
// সর্বোচ্চ Line সংখ্যা
maxLines: 2,
// Soft Wrap হবে কিনা
softWrap: true,
// Text Direction
textDirection: TextDirection.ltr,
// Scale Factor
textScaler: TextScaler.linear(1.2),
)
🔹 RichText Widget
RichText(
text: TextSpan(
text: "Hello ",
style: TextStyle(
color: Colors.black,
fontSize: 20,
),
children: [
TextSpan(
text: "Flutter",
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
),
),
TextSpan(
text: " Developer",
style: TextStyle(
color: Colors.green,
),
),
],
),
)
🔹 Icon Widget - All Common Properties
Icon(
// Icon Data
Icons.favorite,
// Icon Size
size: 40,
// Icon Color
color: Colors.red,
// Semantic Label
semanticLabel: "Favorite",
// Text Direction অনুযায়ী Flip হবে কিনা
textDirection: TextDirection.ltr,
// Fill (Material Symbols)
fill: 1.0,
// Weight (Material Symbols)
weight: 400,
// Grade
grade: 0,
// Optical Size
opticalSize: 48,
)
🔹 IconTheme Widget
IconTheme(
data: IconThemeData(
// Default Icon Color
color: Colors.blue,
// Default Icon Size
size: 40,
// Opacity
opacity: 0.8,
),
child: Icon(Icons.home),
)
📌 সংক্ষেপে
| Widget | ব্যবহার |
|---|---|
| Text | সাধারণ Text দেখানোর জন্য |
| RichText | এক Text-এর মধ্যে একাধিক Style ব্যবহার করতে |
| Icon | Icon দেখানোর জন্য |
| IconTheme | একসাথে অনেক Icon-এর Style সেট করতে |
Comments
Post a Comment