Sponsor

ফ্লাটার টেক্সট

0
2

যে কোন অ্যাপের বিল্ডিংন ব্লক হচ্ছে টেক্সট। সব আপেই কোন না কোন টেক্সট দেখানো লাগে। ফ্লাটার অ্যাপে টেক্সট দেখানোর জন্য রয়েছে Text উইজেট। যা নিচের মত করে ব্যবহার করা হয়ঃ

Text("Hello, Flutter!")

যেমন সম্পূর্ণ প্রজেক্টঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text("Hello, Flutter!"),
        ),
      ),
    );
  }
}

কোন টেক্সটে স্টাইল যোগ করার জন্য রয়েছে style প্রোপার্টি। যা ব্যবহার করে টেক্সটে যে কোন স্টাইল যোগ করতে পারি। যেমন ফন্ট সাইজ এবং ফন্ট ওয়েট এভাবে যোগ করতে পারিঃ

Text("Hello, Flutter!",
            style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),

এখানে লক্ষ্য করি, Text() উইজেটের ভেতরেই স্টাইল প্রোপার্টি গুলো আমরা যোগ করেছি। ডাবল কোটেশনের ভেতর টেক্সট লিখেছি এবং এর পর কমা ব্যবহার করে স্টাইল প্রোপার্টি যোগ করে বিভিন্ন স্টাইল যোগ করেছি।

সম্পূর্ণ প্রজেক্টঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            "Hello, Flutter!",
            style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

আউটপুটঃ

আরো কিছু টেক্সট স্টাইল যোগ করিঃ

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            "Hello, Flutter!",
            style: TextStyle(
              fontSize: 40, // Font size
              fontWeight: FontWeight.bold, // Bold text
              color: Colors.blue, // Text color
              fontStyle: FontStyle.italic, // Italic text
              letterSpacing: 2.0, // Space between letters
              wordSpacing: 5.0, // Space between words
            ),
          ),
        ),
      ),
    );
  }
}

যার আউটপুটঃ

টেক্সট এলাইনমেন্ট

টেক্সট গুলো আমরা লেফট, সেন্টার অথবা রাইট এলাইন করতে পারি। তার জন্য রয়েছে textAlign প্রোপার্টি। এর নিচের অপশন গুল রয়েছেঃ

AlignmentProperty
Left (default)TextAlign.left
CenterTextAlign.center
RightTextAlign.right
JustifyTextAlign.justify

উপরের উদাহরণ গুলোতে টেক্সট উইজেটকে সেন্টার উইজেটের ভেতর রেখেছি। যা এর চাইল্ড গুলোকে ডিসপ্লে এর মাঝে দেখাবে। এর কারণে টেক্সট এলাইন প্রোপার্টি প্রয়োগ করলে আমরা বুঝতে পারব না। এর জন্য সেন্টার উইজেটের পরিবর্তে Align উইজেটের ভেতর টেক্সট ভিউ রাখব। নিচের উদাহরণ দেখিঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Align(
           alignment: Alignment.centerLeft,
          child: Text(
            "Hello, Flutter!",
            textAlign: TextAlign.left, 
            style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

আউটপুট পাবো লেফট এলাইন টেক্সট।

টেক্সট ওভারফ্লো

টেক্সট যদি নির্দিষ্ট বক্সের বেশি হয়ে যায়, তখন কিভাবে টেক্সট গুলো দেখাবে, এর জন্য রয়েছে overflow প্রোপার্টি। যেখানে নিচের যে কোন একটা অপশন আমরা ব্যবহার করতে পারি।

OptionDescription
TextOverflow.clipCuts off text
TextOverflow.ellipsisAdds “…”
TextOverflow.fadeFades out the text

যেমন overflow: TextOverflow.clip প্রোপার্টি ব্যবহার করলে এক্সটা টেক্সট গুলো কেটে দিবে। দেখাবে না। এই ওভারফ্লো গুলো তখনি কাজ করবে, যখন এগুলো একটা ফিক্সড উইথ এবং হাইট কন্টেইনারের ভেতর লিখব।

একই টেক্সট ব্লকে একাধিক টেক্সট স্টাইল

একই টেক্সট ব্লকে একাধিক স্টাইলের টেক্সট দেখানোর জন্য রয়েছে RichText উইজেট। যার ভেতরে একাধিক TextSpan উইজেট ব্যবহার করতে পারব। এবং এই চাইল্ড TextSpan গুলোতে নিজস্ব স্টাইল প্রয়োগ করতে পারব। যেমন নিচের কোড গুলো দেখিঃ

RichText(
  text: TextSpan(
    style: TextStyle(fontSize: 20, color: Colors.black),
    children: [
      TextSpan(text: "Hello, "),
      TextSpan(
        text: "Bold",
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.red),
      ),
      TextSpan(text: " World!"),
    ],
  ),
),

যার আউটপুট পাবো এমনঃ

জেসচার (Gesture) যোগ করা

টেক্সট ভিউতে সাধারত স্ট্যাটিক টেক্সট দেখানো হয়। কিছু কিছু ক্ষেত্রে এই টেক্সটে জেসচার যোগ করার দরকার পড়ে। যেখানে ইউজার ট্যাপ করলে কোন একটা একশন পার্ফর্ম করবে। আর তার জন্য টেক্সট ভিউকে GestureDetector এর ভেতর র‍্যাপ করে নিতে হবে। নিচের উদাহরণ দেখিঃ

GestureDetector(
  onTap: () {
    print("Text Clicked!");
  },
  child: Text(
    "Tap Me"),
  ),
),

এখানে Tap Me টেক্সট ভিউতে ক্লিক করলে Text Clicked! এই লেখাটা কনসোলে প্রিন্ট করবে। সম্পূর্ণ প্রোগ্রামঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: GestureDetector(
            onTap: () {
              print("Text Clicked!");
            },
            child: Text(
              "Tap Me"),
          ),
        ),
      ),
    );
  }
}

টেক্সট ব্যাকগ্রাউন্ড

কোন টেক্সটে ব্যাকগ্রাউন্ড সহ অন্যান্য স্টাইল যোগ করার জন্য উই টেক্সট উইজেটকে Container উইজেটে র‍্যাপ করে নিতে হবে। এরপর কন্টেইনার উইজেটে decoration প্রোপার্টির মাধ্যমে বিভিন্ন স্টাইল যোগ করা যাবে। যেমনঃ

Container(
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: const Color.fromARGB(255, 6, 204, 154),
              border: Border.all(color: Colors.black, width: 2),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Text("Text with Background"),
          ),

যার আউটপুট পাবো এমনঃ

টেক্সট ভিউর উইথ এবং হাইট

ফ্লাটারে টেক্সট ভিউ নির্দিষ্ট সাইজের বক্সে রাখতে চাইলে একটা কন্টেইনারে র‍্যাপ করে নিতে পারি। এরপর ঐ কন্টেইনারে উইথ এবং হাইট যোগ করে দিতে পারি। যেমনঃ

Container(
            width: 200,
            height: 100,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text(
              "Fixed Size Text",
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.white),
            ),
          ),

যার আউটপুট পাবোঃ

Zoeken
Categorieën
Read More
Nulled
Dooo v2.2.5 Nulled - Movie & Web Series Portal App Source Code
Dooo v2.2.5 Nulled – Movie & Web Series Portal App Source Code Free Download. Dooo is...
By Nettumi 2026-09-18 03:31:04 0 49
Tech
খুব সহজে এফ.এম ট্রান্সমিটার বানিয়ে নিন। যারা এখন বানাতে পারেননি তারা দেখে নিতে পারেন | Techtunes | টেকটিউনস
এক ডেস্কটপেই ৬ ডেস্কটপের কাজ করুন 3D ডেস্কটপ এখন আপনার হাতের নাগালেই হাসান যোবায়ের
By Nettumi 2026-09-25 03:43:33 0 25
Hacking Course
১৬ হাজার টাকায় দ্রুতগতির ও রিলায়েবল মাল্টিফাংশন প্রিন্টার Brother DCP-T220 (রিফিল Ink Tank, স্ক্যানার+প্রিন্টার)
আসসালামু আলাইকুম। Brother DCP-T220 প্রিন্টারটা ব্যবহার করছি বছরখানেকের ওপরে, এবং রিভিউ লেখাও শুরু...
By Nettumi 2026-09-25 16:56:22 0 13
Tech
অনলাইনে হ্যাক হওয়া থেকে বাঁচতে ১০ টি উপায় | Techtunes | টেকটিউনস
প্রোটেক্টেড ডিভিডি থেকে কপি/ব্যাকআপ DVD SHRINK দিয়ে দুঃসাহসী টিনটিন
By Nettumi 2026-09-25 03:56:33 0 38
Tech
Play Store কাজ করছে না? ১৫টি কার্যকর সমাধান (২০২৬ আপডেট গাইড)
Play Store কাজ করছে না বলে যদি আপনি নতুন অ্যাপ ডাউনলোড বা আপডেট করতে না পারেন, তাহলে এই গাইডটি...
By Nettumi 2026-09-30 18:31:31 0 2
‎ ‎ ‎
Nettumi https://nettumi.com