آموزش نمایش متن در فلاتر و کار با ویجت 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 اندازه متن را روی ۲۲ قرار داده ایم و سپس با دستور 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
برای نمایش متنهای پیچیده با استایلهای مختلف.
دیدگاهتان را بنویسید