نوشته های Mahdi Gharooni

flutter bottom_navigation_bar

Mahdi Gharooni — Mon, 26 Oct 2020 15:57:29 +0330

تو این مقاله قصد دارم درمورد طرز استفاده از پکیج perforated_bottom_navigation_bar صحبت کنم. کد اصلی پروژه هم در ریپازیتوزی گیت هاب موجود هست . همانطور که در مثال زیر مشاهده میکنید چون منوی ما دارای یه حفره است و دکمه ای درون آن قرار دارد اسمشو گذاشتم perforated_bottom_navigation_bar بمعنای منوی حفره دار میباشد. این پکیج میتونه خیلی کاربردی باشه ولی در عین حال استفاده ازش بسیار ساده است. perforated_bottom_navigation_barهم اکنون که دارم این مقاله رو مینویسم نسخه 0.0.11 منتشر شده و مخصوص منویی با ۵ تب است !برای راحتی کار تو قسمت example تو یه مثال ساده توضیح دادم که دقیقا چگونه از پکیج استفاده کنیم و در اینجا هم همون مثالو یکم گسترش میدیم .این پکیج Scaffold ریترن میکنه و شما میتونید تمام مقدار هایی که میخواهید در برنامه داشته باشید رو به همین پکیج بدین .تو این مثال ما قصد داریم منویی با ۵ تب داشته باشیم ، هر تب ایکون مخصوص به خودشو داره ، هر تب صفحه مجزا و یک title جداگانه دارد . import'package:flutter/material.dart'; import'package:perforated_bottom_navigation_bar/perforated_bottom_navigation_bar.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State { @override Widget build(BuildContext context) { return PerforatedBottomNavigationBar( appBarTitles: [ Text( 'setting Title', style: TextStyle(color: Colors.blue), ), Text( 'person Title', style: TextStyle(color: Colors.blue), ), Text( 'home Title', style: TextStyle(color: Colors.blue), ), Text( 'phone Title', style: TextStyle(color: Colors.blue), ), Text( 'location Title', style: TextStyle(color: Colors.blue), ), ], body: [ Center(child: Text('setting')), Center(child: Text('person')), Center(child: Text('home')), Center(child: Text('phone')), Center(child: Text('location')), ], icons: [ Icons.settings, Icons.person, Icons.home, Icons.phone, Icons.location_on, ], iconsTooltips: [ 'setting', 'person', 'home', 'phone', 'location', ], initialIndex: 2, iconColor: Colors.blueGrey, selectedIconColor: Colors.blue, buttonBackgroundColor: Colors.blueAccent, ); } } حالا مقادیری که این پکیج میتونه بگیره رو باهم مرور میکنیم : body : معادل همون body of scaffold هستش. که اینجا میشه لیستی از صفحاتی که میخواهیم نمایش بدیم. appBar : اگر میخواهید یک appBar برای تمام صفحات استفاده کنید میتونید ازین ارگومان استفاده کنید. اما اکر قصد دارید برای ه صفحه بصورت مجزا appBar ست کنین باید از appBarTitles استفاده کنین که لیستی از ویجت ها میگیره . مانند مثال بالا . Icons :لیستی از آیکون های منو . این لسیت فعلا میتونه ۵ ایتم داشته باشه و همون ایکون های اصلی منو هستش.initialIndex :ایندکس تب اولیه برنامه . مقدار پیش فرض ۲ میباشد یعنی تب وسط تب اولیه هستش . selectedIconSize :سایز ایکون تبی که انتخاب شده است. مقدار پیش فرض آن ۳۰ میباشد. unSelectedIconSize : سایز ایکون تبی که انتخاب نشده است. مقدار پیش فرض آن ۲۵ میباشد. iconColor :رنگ ایکون ها وقتی انتخاب نشده اند. selectedIconColor :رنگ ایکون ها وقتی انتخاب شده اند. drawer :همون ویجتی است که قراره بعنوان دراور نمایش داده شود .scaffoldKey :اگر قصد دارید یک key برای scaffold ست کنین میتونین ازین ارگومان استفاده کنین . bottomBarKey :اگر قصد دارید یک key برای bottomNavigationBar ست کنین میتونین ازین ارگومان استفاده کنین.iconsTooltips :لیستی از stringها که بعنوان tooltip هر تب استفاده میشه . buttonBarElevation :مقدار elevation دکمه وسط منو . buttonBackgroundColor :رنگ دکمه وسط منو . بقیه ارگومان ها کمتر استفاده میشوند ولی اگر قصد استفاده از اونهارو دارید میتونین به داکیومنت هایی که توی پروژه نوشتم نگاهی بندازین. امیدوارم این مطلب براتون مفید بوده باشه و خوشحال میشم نظرات و پیشنهاداتتونو بامن در میون بزارید . دیگر مقاله های من راجع فلاتر در ویرگول : استفاده از Flutter با docker ، بدون AndroidStudioگرفتن خروجی Flutter در Gitlab Ci\Cl

گرفتن خروجی Flutter در Gitlab Ci\Cl

Mahdi Gharooni — Wed, 15 Apr 2020 17:02:41 +0430

در این مقاله قصد دارم توضیح بدم که چگونه در gitlab CI\Cl بتونیم از دستورات فلاتر استفاده کنیم و خروجی بگیریم.برای مشاهده ریپازیتوری Github این پروژه میتونید به اینجا برید.برای مشاهده این مقاله در Medium هم میتونید از این استفاده کنید. اگر توی مبحث gitlab CI\Cl مبتدی هستین یا دقیق تر بدونید چرا اصلا باید ازش استفاده کنیم میتونید از داکیومنت خودش استفاده کنید. خب میدونیم که ما باید یه فایلی ب اسم .gitlab-ci.yml به فولدر اصلی پروژمون اضافه کنیم و Gitlab دستوراتی که اینجا براش مینویسیمو اجرا میکنه و از فلاتر خروجی میگیره. پس اول از همه نیاز به Java & Flutter SDK داره که ما با استفاده از داکر بهش اضافه میکنیم. من docker image که خودم قبلا درست کرده بودمو استفاده میکنم که توی dockerHub هم موجوده ، اگر میخواید درمورد چگونگی آماده سازی اونم بخونید میتونید به اینجا یسری بزنید. خب پس ما توی خط اول فایلمون اینو اضافه میکنیم :image: mahdigharooni/flutter:latestبا اجرای همین خط کد تمام نیازمندی های ما برای دستورات فلاتر اضافه میشه و ما میتونیم براحتی از فلارت خروجی بگیریم.در ادامه فایل هم کار هایی که قصد دارید انجام بشه رو مینویسید که نمونه کداش هستش. من برای پروژم قصد دارم یه خروجی debug از برنچ develop بگیره و توی artifacts ذخیره کنه تا بتونم دانلودش کنم.image: mahdigharooni/flutter:lateststages: - buildflutter_build: stage: build before_script: - flutter channel stable - flutter upgrade - flutter pub get - flutter clean script: - flutter analyze - flutter build apk --debug artifacts: paths: - build/app/outputs/apk/debug/app-debug.apk only: refs: - developتقریبا کار ما تموم شده و میتونیم فایل بعد از پوش کردن تغییراتمون اجراش کنیم.تو قسمت CI\CL یه pipeline جدید میسازیم و دکمه run میزنیم تا فایلمون اجرا بشه . اگر مشکلی پیش نیاد با پیام Job succeeded روبرو میشید. run pipelineامیدوارم که این مقاله بهتون کمک کرده باشه.موفق باشید.

استفاده از Flutter با docker ، بدون AndroidStudio

Mahdi Gharooni — Wed, 19 Feb 2020 14:20:09 +0330

در این مقاله قصد دارم دستورات flutter را بدون استفاده از AndroidStudio و با کمک docker را اجرا کنم. یکی از مهمترین دلایلی که ما برای استفاده از فلاتر بدون اندروید استدیو اقدام میکنیم اینکه مثلا سمت سرور میخواهیم با دستورات فلاتر کار کنیم و از application خودمون فایل apk بسازیم ، پس به Dart SDK و Java SDK نیازمندیم . بخاطر محدودیت های سمت سرور نمیتونیم همیشه این نیازمندیها رو مستقیما دانلود کنیم و استفاده کنیم پس از docker استفاده میکنیم تا بتونیم غیر مستقیم نیازمندی هامونو دانلود کرده و از دستورات فلاتر استفاده کنیم . برای درک بهتر این مقاله لازم هست که حتما با فلاتر کار کرده باشین و با مفاهیم اولیه داکر مثل dockerFile , docker image , docker container آشنایی نسبی داشته باشید. نیازمندی ها ی پروژه من قصد دارم یک پرژه ساده رو با داکر بیارم بالا. پس در root پروژه یک فایلی بنام DockerFile اضافه میکنم :dockerFileاین فایل تمام SDK ها و نیازمندی های پروژه مارو دانلود میکنه. شما میتونید با توجه به پروژه خودتون این فایل تغییر بدین.همینطور فایل docker-compose.yml نیز به root پروژه اضافه میکنم :docker-compose.ymlاین فایل مسوول مدیریت تمام کار های داکر هست و بعدا DockerFile اجرا میکنه. حالا میرسیم به اجرای دستورات داکر در root پروژه .با زدن دستور زیر فایل docker-compose.yml اجرا میشه و DockerFile مارو اجرا میکنه.docker-compose up --buildاین دستور تمام چیزهایی که برای پروژه لازم داریمو دانلود میکنه و ممکنه کمی طول بکشه. ولی در اخر docker image و docker container ما ساخته میشه . برای دیدن docker image ها میتونیم از دستور زیر استفاده کنیم :docker imageو برای دیدن docker containerها میتونیم ازاین دستور استفاده کنیم :docker containerخب تقریبا کار ما تموم شده و میتونیم بریم از کانتینری که ساختیم استفاده کنیم و توش به پروژه دست پیدا کنیم و از دستورات فلاتر استفاده کنیم .برای چک کردن اینکه دستورات فلاتر هنوز کار نمیکنه :خب حالا با استفاده از آیدی کانتینر یا اسم کانتینر وارد کانتینر میشیم :docker exec -it [container_id] bashیا docker exec -it myapp bash ورود به کانتینرخب ما تونستیم با موفقیت به کانتینر وارد بشیم و پروژمونو دسترسی داشته باشیم. برای مطمعن شدن اینکه میتونیم از دستورات فلاتر استفاده کنیم :و همینطور دستور flutter doctor :flutter doctorهمانطور که در عکس میبینید ما تونسیتم بدون استفاده از اندروید استدیو و دانلود مستقیم Dart SDK به دستورات فلاتر دسترسی داشته باشیم. برای اسفاده از ورژن اپدیت فلاتر میتونید از دستور flutter upgrade استفاده کنید و از فلاتر لذت ببرید.GitHub repositoryDockerHub repositoryMedium storylinkedIn