فلاترشاپ
فلاترشاپ
15دنبال کننده
به کانال "فلاترشاپ" خوش اومدید.🖐🖐
این کانال روبیکامون هست اگه خواستی میتونی توی کانال ایتا مونم عضو بشی.
تو این کانال میخوام ترفند های خفن و کاربردی در فریمورک فلاتر رو به صورت رایگان بهتون یاد بدم.
پس اگه برنامه نویس فلاتر هستی زود بیا و عضو شو.
point_downادمین کانالpoint_down
@Admin_FlutterShop
مشاهده کانال پیام‌رسان
دانلود روبیکا
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
سلام به تمام برنامه نویسان فلاتر.
همون طور که قولشو داده بودم امروز میخوای یه پروژه خفن خفن رو با هم پیاده سازی کنیم .
قراره که بیایم و صفحه استوری مشابه واتساپ یا اینستاگرام ر طراحی کنیم.
پیشنهاد میکنم حتما یادش بگیرید چون ممکنه تو پروژه های خفن تر و بزرگ تر به کارت بیاد.

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
آموزش طراحی و ساخت صفحه استوری ها مشابه واتساپ و انیستاگرام و بررسی پکیج "Story_View" در فلاتر.

point_downChannel Adminpoint_down
@Admin_FlutterShap

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
برای ساخت این پروژه اول باید پکیج های مورد نظرمون رو به پروژه اضافه کنیم.
که پکی مورد نظرمون Story_View هست.

. Story_View

ما برای استفاده از ان پکیج نیاز به چند تا پکیج دیگه داریم ، درواقع این پکیج وابستگی داره به اون یکی پکیج ها و برای درست کار کردن باید از اون یکی پکیج ها استفاده کنه .

پس به ترتیب پکیج هارو اضافه کنید و بعد پکیج Story_View رو اضافه کنید:

- flutter_cache_manager
- rxdart
- video_player
- collection
-story_view

همین طور که در پست بعد میبینید ما این پکیج رو در dependencies های فایل pubspac.yaml اضافه کردیم.

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
بیاین به فایل pubspec.yaml و پکیج هامون رو به ترتیب در dependencies ها اضافه کنید.
و بعد روی گزینه package get بزنید(یادتون باشه که باید به یه فیلترشکن خوب متصل باشد تا فایل های مورد نیازش رو از سرور های گوگل دانلود کنه)
معرفی فیلترشکن خوبی که باهاش از این کارا کنید رو در پست های قبلی گذاشتیم.
و میتونید ازش استفاده کنید.

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
یادتون باشه که پکیج collection رو بهش ورژن ندید.
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
حالا نوبت اینکه بیایم و کد های مورد نظرمون رو بنویسیم.
توجه کنید که ما در کد هامون دو تا فایل داریم پس به اسم فایل ها در زیر تصاویر توجه کنید.
هرچند بهتون میگم کبه فایل بعدی میریم.و چه کد هایی رو بنویسید.

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
main.dart - 1/2
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
توضیحات کد بالاpoint_up_2 :

- در لاین 2 اومدیم و کلاس فایل استوری ها مون اضافه کردیم که جلوتر خود کلاس رو میسازیم پس نیازی به ساخت و اضافه کردنش در اول کار نیست و باید بعد ساخت فایل جداگانش این لاین رو اضافه کنید.

- در لاین ها 15 تا 17 اومدیم و بنر دیباگ رو حذف کردیم و به پروژه مون یه عنوان دادیم و بهش گفتیم که اولین صفحه ای که به من نشون بده(در صورت اجرا پروژه) کلاس HomePage من باشه.

- در لاین 22 هم اومدیم و کلاس HomePage رو ساختیم.

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
main.dart - 2/2
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
توضیحات کد بالاpoint_up_2 :

- در لاین 3 اومدیم و Scaffold مون رو ساختیم که بیایم و صفحه اصلی پروژه مون رو طراحی کنیم.

- در لاین های 4 تا 13 اومدیم و appbar مون رو ساختیم.
در لاین های 5 تا 10 بهش یه متن دادیم که اسم کانالمون هست و رنگ رو سفید کردیم.
در لاین 11 اومدیم و centertitle رو true کردیم که متن appbar مون بیاد وسطش.
در لاین 12 هم به appbar یه رنگ مشکی دادیم.

- در لاین 14 اومدیم و بدنه(body) پروژه مون رو ساختیم و بهش یه ویجت GestureDetector دادیم که قبلا آموزش کار باهاش رو در کانال گذاشتم.
ولی اگه نمیدونید چیکار میکنه میاد و به فرزندش که قابلیت کلیک نداره این قابلیت رو بهش میده.
خوب Container هم قابلیت کلیک نداره پس فرزند این ویجت کردیمش.

- در لاین های 15 و 16 اومدیم و متد onTap ویجت GestureDetector رو صدا زدیم و بهش گفتیم که وقتی روی فرزندت(container) کلیک شد بیا و مارو منتقل کن به صفحه بعدی که اسم کلاسش StoryPageView هست.
در ای صورت وقتی کاربر روی container مون کلیک کرد میاد و ما رو منتقل میکنه به صفحه استوری ها.

- در لاین 17 هم اومدیم و فرزندش ر بهش دادیم که container هست.

- در لاین 18 اومدیم و یه margin بهش دادیم که بیاد و از کناره هاش به اندازه 8 پیکسل فاصله بگیره.

- در لاین های 19 و 20 هم اومدیم به container مون یه اندازه دادیم.

- در لاین های 21 تا 24 هم اومدیم و یه decoration دادیم که بیاد هم رنگش رو برایمون خاکستری کنه و هم دورگردش کنه کنه به حدی که کامل گرد بشه.

- در لاین 25 هم اومدیم و به عنوان فرزند کانتینر مون یه ویجت ClipRRect دادیم.
این ویجت میاد و فرزندش رو دورگرد میکنه دقیق مثل BoxDecoration ولی چون ما داریم به container مون یه فرزند میدیم امکان استفاده از Boxdecoration وجود ندارد.
در لاین 26 مقدار گرد بودن فرزند رو بهش دادیم.
در لاین های 27 تا 30 اومدیم و یه عکس بهش دادیم که قراره به عنوان عکس پروفایل نشون داده بشه.
و اون رو با کانتینر فیتش کردیم.

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
خب کد های صفحه اصلی مون تموم شد و میخوای صفحه استوری هامون رو بسازیم.

الان ما در لای 15 و 16 اومدیم و صفحه رو منتقل کردیم و به کلاس صفحه StoryPageView پس ادامه کد هارو بریم و در فایل جداگانه ای بنویسیم.

پس یه فایل به نام "storyview.dart" بسازید و بقیه کد هارو در این فایل بنویسید.

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
storyview.dart - 1/2
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
توضیحات کد بالاpoint_up_2:

- در لاین لاین 2 اومدیم و فایل main.dart مون رو ساختیم چون میخوایم بعد از نمایش دادن استوری ها ما رو منتقل کنه به صفحه اصلی که در کد های بالا ساختیمش.

- در لاین 3 هم اومدیم و پکیج StoryView مون رو به پروژه اضافه کردیم. تا بیتونیم صفحه استوری هامون رو بسازیم.

- در لاین 12 هم کلاس رو ساختیم.

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

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
storyview.dart - 2/2
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
توضیحات کد بالاpoint_up_2 :

- در لاین های 3 تا 5 اومدیم و صفحه مون رو ساختیم و توش یه column دادیم برای اینکه بیاد و پروفایلمون رو و صفحه استوری مون رو در یک ستون نمایش بده.

- در لاین های 6 تا 16 اومدیم و پروفایل کسی که استوری رو گذاشته رو ساختیم.
. در لاین 7 بهش یه عکس پروفایل دادیم و آدرس عکسش رو در لاین های 8 تا 9 دادیم.
. در لاین 12 اومدیم و بهش یه عنوان دادیم که ما به عنوان نمایش اسم پروفایل استفاده میکنیم.
. در لاین 13 اومدیم و یه زیرنویس براش تعریف کردیم که قراره به عنوان زمان منتشرشدن استوری ازش استفاده کنیم.
. در لاین 14 اومدیم و رنگ کل قسمت پروفایل رو مشکی کردیم.
. در لاین 15 هم اومدیم و رنگ متن هارو سفید کردیم.

- برای پر کردن بقیه قسمت ها (صفحه استوری) ما اومدیم و از ویجت Expanded استفاده کردیم.

- و بالاخره اومدیم و در فرزند ویجت Expanded صفحه استوری هامون رو ساختیم.

- بعد در لاین 19 اومدیم و storyItems مون رو ساختیم در واقع این یه لیست هست که قراره استوری های ما رو ازمون بگیره.
برای اضافه کردن استوری ادامه مطلب رو بخونید.

- در لاین های 20 تا 23 اومدیم و یه استوری از نوع متن ساخیتم .
در لاین 21 اومدیم و متن استوریمون رو براش تعریف کردیم.
در لاین 22 هم اومدیم و رنگ استوریمون رو بهش دادیم.
خیلی از این استوری استفاده کردیم تو واتساپ و انیستاگرام.
اگه خروجی رو ببینید بهتر متوجه میشید.

- در لاین های 24 تا 29 اومدیم و یه استوری از نوع عکس ساختیم که خیلی ازش دیدید و نیازی به توضیح نداره.
. در لاین 25 اومدیم و آدرس عکس مون رو دادیم.
. در لاین 27 اومدیم و کنترولر مون به استوریمون معرفی کردیم.
در لاین 28 اومدیم و توضیحات عکس استوری شده رو براش تعریف کردیم ،که اگه خروجی ببینید بهتر متوجه میشید.

- در لاین های 30 تا 34 اومدیم و یه استوری دیگه از نوع عکس ساختیم و یه توضیح فارسی درباره عکس دادیم که متوجه بشید که از توضیحات فارسی هم پشتیبانی میکنه.

- و برای بهت شدن در لاین های 35 تا 39 دوباره یه استوری از نوع عکس ساختیم.

- در لاین های 40 تا 44 اومدیم و یه استوری از نوع عکس ساختیم ولی عمدی اومدیم و آدرس عکس رو اشتباه وارد کردیم (اصلا سایتی به این آدرس نداریم) تا ببینیم که در صورت لود نشدن عکس چیکار میکنه که تو خروجی این قسمت رو جداگانه میبینید.

- در لاین های 45 تا 49 که کامنت شده اومدیم و یه استوری از نوع ویدیو ساختیم و میبینید خیلی به استوری عکس شبیه فقط چون من url ویدیو نداشتم متونستم انو تست کنم.

- در لاین 51 اومدیم و کنترولر مون رو بهش دادیم.

- در لاین 52 اومدیم و inline مون رو false کردیم که نشان دهنده تمام صفحه بودن یا نبودن هست.

- در لاین 53 هم اومدیم حالت تکرار استوری هارو false کردیم این به این معنی که بعد از تام شدن استوری ها دوباره از اول شروع به پخش شدن نمیکنه.

- در لاین های 55 و 56 اومدیم و متد onComplete مون رو صدا زدیم این متد زمانی کار میکنه که استوری ها به پایان برسه.
و بهش گفتیم که وقتی استوری ها به پایان رسید بیا و ما رو منتقل کن به صفحه اصلی دوباره.

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
شاید شما یه عکسی تو ویندوز داشته باشید که نمیخواید اون رو به پروژه اضافه کنید حالا به هر دلیلی.
و سرور هم ندارید اون رو از سرور بخونید.
پس چی کار کنیم میتونید از روش که من استفاده میکنم استفاده کنید .
من برای پروژه بالا اومدیم و عکسم رو در سایت آپلود ایرانی آپلود کردم و آدرسش رو به برنامم دادم .
با این کار چون عکس تو سرور های ایرانی آپلود شده با سرعت بیشتری لود میشه.

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
خب اینم از این پروژه ای که قولش رو داده بودم.
امیدوارم تمام استفاده رو ازش ببرید.
حالا وقتش شده تا خروجی خفن کار رو ببینیم:

point_downflutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
Output

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۶ اردیبهشت
فلاترشاپ
فلاترشاپ
خیلی پروژه خوبی بود میتونید ازش تو پروژه های بزرگ تری با سفارشی سازی خودتون به راحتی و بدون خطا استفاده کنید ، اگه سوالی درباره پروژه بالا یا مشکلی در نوشتنش داشتید و یا آموزش درخواستی خاصی داشتید که بهتون یاد بدم حتما حتما به ادمین کانالمون پیام بدید.

point_downChannel Adminpoint_down
@Admin_FlutterShop

point_downFlutterShoppoint_down
https://rubika.ir/fluttershop
Please open Rubika to view this post
VIEW IN RUBIKA
۱۸ اردیبهشت
فلاترشاپ
فلاترشاپ
اسم علامت های کیبورد در زبان فارسی
Please open Rubika to view this post
VIEW IN RUBIKA
۱۸ اردیبهشت
فلاترشاپ
فلاترشاپ
اسم علامت های کیبورد در زبان انگلیسی
Please open Rubika to view this post
VIEW IN RUBIKA
۲۷ اردیبهشت
فلاترشاپ
فلاترشاپ
Please open Rubika to view this post
VIEW IN RUBIKA
۲۸ اردیبهشت
فلاترشاپ
فلاترشاپ
Please open Rubika to view this post
VIEW IN RUBIKA
۲۸ اردیبهشت
فلاترشاپ
فلاترشاپ
Please open Rubika to view this post
VIEW IN RUBIKA
فلاترشاپ
فلاترشاپ
15دنبال کننده
به کانال "فلاترشاپ" خوش اومدید.🖐🖐
این کانال روبیکامون هست اگه خواستی میتونی توی کانال ایتا مونم عضو بشی.
تو این کانال میخوام ترفند های خفن و کاربردی در فریمورک فلاتر رو به صورت رایگان بهتون یاد بدم.
پس اگه برنامه نویس فلاتر هستی زود بیا و عضو شو.
point_downادمین کانالpoint_down
@Admin_FlutterShop
مشاهده کانال پیام‌رسان