کار با ویجت Text در فلاتر

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

در فریموورک فلاتر Flutter برای نمایش هر متنی به کاربر از ویجت 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 نیز رنگ و اندازه متن را تغییر میدهیم.