سلام دوستان به جلسه سوم آموزش فلاتر خوش آمدید
همونجور که قول داده بودم این جلسه می خوام که قسمت دوم از آموزش ویجت ()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
این جلسه هم به پایان رسید
امیدوارم که درعین لذت بردن از آموزش چیزی هم یاد گرفته باشیم
خوش حال میشم اگر با ما ارتباط داشته باشد و نقطه نظر های خودتون رو با ما در میان بگذارید
جلسه ی بعدی قراره که در مورد یک ویجت دیگه صحبت کنیم اگر دوست دارین ویجتی رو که مد نظرتون هشت رو به ما بگین تا ما اون ویجت رو در اولویت قرار بدیم
ممنون از همراهیتون
خدانگهدارتون
1 نظر
آموزش ویجت ()Text در فلاتر قسمت 1 – آترون | آینده کسب و کار دیجیتال
[…] که ظاهر متن ما رو تنظیم میکنه من این پارامتر رو در جلسه ی بعدی خدمتتون آموزش […]