آموزش ویجت ()Text در فلاتر قسمت ۲

سلام دوستان به جلسه سوم آموزش فلاتر خوش آمدید
همونجور که قول داده بودم این جلسه می خوام که قسمت دوم از آموزش ویجت ()Text رو باهم آموزش ببینیم

اگر دوست داشته باشید میتونید در اینجا قسمت ۱ آموزش ویجت ()Text رو مشاهده کنید

در کل اگر بخوام یک توضیح کلی خدمتتون بگم این متد ظاهر نوشته ی ما رو تغییر میده

مثلا برای تغییر رنگ، سایز فونت،بک گراند و… باید از :style استفاده کنیم

خب حالا چطور این :style رو در کدهامون بنویسیم؟

به این صورت که هرکجا یک تکست جدید نوشته بودیم به صورت زیر میتونیم style: رو بنویسیم

,”Text(“hello

style:TextStyle(

//هرتغییری که بخواهیم در نوشته ایجاد کنیم رو اینجا مینویسیم

),),

اصلا این :style چه مقدار هایی رو میگیره؟

۱- :fontSize

۲- :color

۳- :backgroundColor

۴- :background

۵- :decoration

۶- :decorationThinckness

۷- :decorationColor

۸- :decorationStyle

۹- :fontFamily

۱۰- :fontStyle

۱۱- :fontWeight

۱۲- :wordSpacing

۱۳- :height

۱۴- :shadows

۱۵- :letterSpacing

۱۶- :foreground

fontSize: -1

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

,fontSize:20.0

Color -2

برای تغییر رنگ رنگ متن ما مورد استفاده قرار میگیرد

,color : Colors.red

backgroundColor -3

برای تغییررنگ پس زمینه متن استفاده میشود به صورت زیر

,backgroundColor : Colors.black

background -4

این متد هم مثل متد قبلی برای تغییر رنگ پس زمینه مورد استفاده قرار میگیرد ولی با این تفاوت که اگر ما مثل مثال قبل

این خط را بنویسیم اشتباه میگرد

,background : Colors.black

چرا؟ چون این متد برای تعریف یک gradient استفاده میشود یعنی ما از قبل باید یک gradient  بسازیم (مثل کدهای پایین) و بعد آن را روبروی background  بگذاریم

تعریف گردینت___>

final Shader linearGradient = LinearGradient(

      colors: <Color>[Colors.red, Colors.blue],

    ).createShader(Rect.fromLTWH(60.0, 0.0, 200.0, 70.0));

مقدار دهی background ____>

background : Paing()..shader = linearGradient

decoration -5

این متد برای خط کشیدن بالا و یا پایین و یا روی نوشته بکار میرود و ۴ پارامتر میگیرد

,decoration : TextDecoration.lineThrough  // روی نوشته خط میکشد

,decoration : TextDecoration.none // هیچ کجا خطی نمیکشد

 decoration : TextDecoration.underline // زیر نوشته خط میکشد

,decoration : TextDecoration.overline // بالای نوشته خط میکشد

decorationThickness -6

این متد یک عدد میگیرد و برای ضخامت خطی است که در متد بالا توضیح دادم

,decorationThickness : 2.0

decorationColor -7

این متد برای رنگ خطی است که در متد بالا توضیح دادم

,decorationColor : Colors.blue

decorationStyle -8

این متد حالت های مختلفی را برای خطی که در متد بالا توضیح دادم دارا است و ۵ مقدار میگیرد

,decorationStyle : TextDecorationStyle.dashed  // روی نوشته ی ما نقطه چین میگذارد

,decorationStyle : TextDecorationStyle.dotted //  روی نوشته ی ما نقطه نقطه میگذارد

,decorationStyle : TextDecorationStyle.double  // کشیدن دو خط صاف

,decorationStyle : TextDecorationStyle.solid  // کشیدن یک خط صاف

,decorationStyle : TextDecorationStyle.wavy  // کشیدن یک خط موج دار

fontFamily -9

این متد برای تعریف یک فونت جدید برای نوشته قرار میگیرد

باید توجه داشت که از قبل فونت دلخواهمان را باید در فایلی از پروژه به نام pubspec.yaml قرار بدهیم و بعد نام دلخواهی که برای ان انتخاب کرده ایم را به صورت زید در جایگاه مناسب خودش قرار دهیم

,”fontFamily : “IranSans

fontStyle -10

این متد دو حالت از نوشته را در برمیگیرد که به صورت زیر مورد استفاده قرار میگیرد

,fontStyle : FontStyle.normal  //  حالت نرمالی از نوشته را ارائه میدهد

,fontStyle : FontStyle.italic  //  حالت نوشته را کج میکند

fontWeight -11

این متد دو حالت نرمال و بلد میگیرد و به صورت زیر استفاده میشود

,fontWeight : FontWeight.bold  // برای ضخیم تر کردن نوشته به کار میرود

,fontWeight : FontWeight.normal  // نوشته ی ما را برای به صورت نرمال ارائه میدهد

wordSpacing -12

این متد یک عدد میگیرد و فاصله ی بین کلمات را شخصی سازی میکند

,wordSpacing : 2.0

height -13

این متد هم یک عدد میگیرد و فاصله ی بالا و پایین نوشته را تنظیم میکند

Height : 1.5

Shadows -14

این متد یک سایه پشت نوشته ی ما قرار میدهد و نوشته ی ما کمی برجسته میشود

                      shadows: [

                        new Shadow(

color: Colors.black,

  این عدد هرچه بزرگتر باشد حاشیه ی سایه ی ما را بیشتر میکند // blurRadius: 10.0,)

                      ],

letterSpacing -15

این متد فاصله ی بین حروف را شخصی سازی میکند

,letterSpacing : 2.0

foreground -16

این متد مانند متد شماره ۲ رنگ نوشته ی ما را تغییر میدهد با این تفاوت که یک رنگ خاص نمیگیرد مانند متد شماره ۴ باید یک گردینت تعریف کنیم و بعد ان را استفاده کنیم تا رنگ نوشته ی ما به صورت گردینت دار تغییر کند

تعریف گردینت___>

final Shader linearGradient = LinearGradient(

      colors: <Color>[Colors.red, Colors.blue],

    ).createShader(Rect.fromLTWH(60.0, 0.0, 200.0, 70.0));

مقدار دهی foreground ____>

foreground : Paing()..shader = linearGradient

این جلسه هم به پایان رسید
امیدوارم که درعین لذت بردن از آموزش چیزی هم یاد گرفته باشیم

خوش حال میشم اگر با ما ارتباط داشته باشد و نقطه نظر های خودتون رو با ما در میان بگذارید

جلسه ی بعدی قراره که در مورد یک ویجت دیگه صحبت کنیم اگر دوست دارین ویجتی رو که مد نظرتون هشت رو به ما بگین تا ما اون ویجت رو در اولویت قرار بدیم

ممنون از همراهیتون
خدانگهدارتون

دربارهامین جعفری