citomoltd_workspace.json
C

CitomoLtd

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

Flutter Text & Icon Widget Guide

 

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 ব্যবহার করতে
IconIcon দেখানোর জন্য
IconThemeএকসাথে অনেক Icon-এর Style সেট করতে

Comments