آموزش نمایش متن در فلاتر و کار با ویجت Text

در هر نرم افزاری نیاز است تا متون مختلفی به کاربر نمایش داده شود. اپلیکیشن های موبایل نیز از این قاعده مستثنا نیستند.

در فریموورک فلاتر Flutter برای نمایش هر متنی به کاربر از ویجت Text استفاده می کنیم.

نمایش متن یکی از بخش‌های مهم و اساسی توسعه اپلیکیشن‌های موبایل محسوب می‌شود. در زمینه برنامه‌نویسی با فریم‌ورک فلاتر نیز، نمایش متن به روش‌های مختلفی امکان‌پذیر است.

ویجت Text در فلاتر، یکی از ابزارهای اساسی برای نمایش متن در رابط کاربری می‌باشد. این ویجت قدرتمند امکانات متنوعی را در اختیار برنامه‌نویسان قرار می‌دهد و به راحتی متن‌های ساده یا پیچیده‌تر را نمایش می‌دهد.

معرفی ویجت Text فلاتر

ویجت Text یکی از پرکاربردترین اجزا در فلاتر برای نمایش متن است.

با استفاده از این ویجت، می‌توانید متن‌های ساده تا پیچیده‌ را به راحتی نمایش دهید.

کار با Text بسیار راحت هست و هیچگونه پیچیدگی خاصی ندارد.

این ویجت به عنوان پارامتر ورودی یک رشته دریافت میکند که همان متنی است که میخواهید در برنامه نمایش داده شود.

در ابتدا به کد های زیر توجه کنید و ببینید که چگونه برای نمایش متن به کاربر از این ویجت استفاده می کنیم.

child: Text('Flutter-learn.ir')

در هر لایه ای می توانیم از ویجت Text استفاده کنیم.

در کد بالا به عنوان یک فرزند در یک لایه ای از Text استفاده کرده ایم و داخل پرانتز متنی که میخواهیم نمایش داده شود را نوشته ایم.

تغییر استایل متن ویجت Text

تمام ویجت های فلاتر که از نوع متنی هستند یک ویژگی به نام style دارند که این ویژگی یک نمونه از کلاس TextStyle دریافت میکند.

کلاس TextStyle این امکان را به ما میدهد که به شخصی سازی و تغییر استایل متن بپردازیم.

تغیر رنگ, اندازه, فونت, وزن و… کارهایی هستند که با کمک این ویژگی میتوانیم انجام دهیم.

 
Text('Flutter-learn.ir',
    style: TextStyle(fontSize: 22.0,color: Colors.lightGreen),)

در کد بالا ابتدا ویژگی style را نوشته و سپس با استفاده از کلاس TextStyle شروع به نوشتن استایل های مورد نظر می کنیم.

آموزش کار با تصاویر در فریمورک فلاتر

در این مثال با استفاده از ویژگی fontSize اندازه متن را روی 22 قرار داده ایم و سپس با دستور color رنگ متن را به رنگ سبز تغییر دادیم.

با استفاده از ویژگی textAlign محل قرار گیری متن را میتوانیم تعیین کنیم.

textAlign: TextAlign.center

لیست کامل ویژگی های ویجت Text:

• textAlign
• style
• textDirection
• textScaleFactor
• textSpan
• locale

در زیر یک مثال کامل از ویجت Text را قرار داده ایم.

import 'package:flutter/material.dart';

void main(){
  runApp(
    Material(
color: Colors.white,
      child: Center(
        child: Text('Flutter-learn.ir',
          textDirection: TextDirection.ltr,
          style: TextStyle(fontSize: 28.0,color: Colors.orange ),),
      ),
    ));
}

در این مثال یک ویجت Center در اختیار داریم که به عنوان فرزند داخل آن یک ویجت Text قرار میدهیم. سپس متن Flutter-learn.ir را به عنوان رشته مورد نظر به آن پاس میدهیم. با استفاده از ویژگی style نیز رنگ و اندازه متن را تغییر میدهیم.

مدیریت فضاهای خط و کلمات

ویجت Text امکاناتی را برای مدیریت فاصله بین خطوط و کلمات متن ارائه می‌دهد.

با استفاده از پارامترهای textAlign, textDirection, و textScaleFactor می‌توانید متن را به‌صورت دقیق و زیبا نمایش دهید.

برای آشنایی بهتر با فریمورک فلاتر و ورود به بازار کار پیشنهاد دوره پروژه محور آموزش فلاتر میباشد.

ویجت Text دارای امکانات بسیاری است که از آن‌ها می‌توان برای بهبود نمایش متن‌ها استفاده کرد. به عنوان مثال:

• استفاده از overflow برای مدیریت تراکم متن و نمایش … در صورت نیاز.
• تنظیم maxLines برای محدود کردن تعداد خطوط نمایش داده شده.
• استفاده از TextSpan برای نمایش متن‌های پیچیده با استایل‌های مختلف.