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

যে কোন অ্যাপের বিল্ডিংন ব্লক হচ্ছে টেক্সট। সব আপেই কোন না কোন টেক্সট দেখানো লাগে। ফ্লাটার অ্যাপে টেক্সট দেখানোর জন্য রয়েছে 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),
            ),
          ),

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

Leave a Comment