آموزش قدم به قدم گرفتن خروجی apk و ساختن اپلیکیشن فلاتر 😍

سلام و درود بر فلاتری های عزیز! امروز میخواهیم قدم به قدم بهتون آموزش بدیم که چطوری از اپلیکیشن فلاتری خودتون خروجی apk بگیرید! و در مارکت ها انتشار بدهید. پس تا انتهای آموزش با ما باشید .

تغییر آیکن اپلیکیشن launcher icon در فلاتر

برای تغییر ایکن برنامه فلاتری دو روش وجود دارد. راه حل اول به اینصورت است که به صورت دستی icon ها رو تغییر بدهیم. و راه حل دوم استفاده از پکیج یا کتابخانه است.ما در این مقاله هر دو روش رو آموزش می دهیم.

تغییر ایکن icon اپلیکیشن فلاتر بدون افزونه یا کتابخانه

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

1. در تصویر شماره 1 باید ایکن خودتون رو که اندازه آن باید (1024×1024) باشد را آپلود کنید. که میتوانید با کشیدن فایل به اون کادر و یا با کلیک روی کادر تصویر خودتون رو انتخاب کنید.
2. در تصویر شماره 2 باید پلتفرم خودتون رو انتخاب کنید! که آیا ایکن رو برای خانواده آیفون و مک میخواهید یا برای اندروید. که ما در تصویر اندروید رو انتخاب کردیم.
3. در تصویر شماره 3 باید نامی برای ایکن هاتون انتخاب کنید که طبق همان الگو! همه ی ایکن ها رو با اون نام درست میکنه. و اگر چیزی ننویسید، خودش اتوماتیک ایکن ها را با نام ic_launcher می سازد. که پیشنهاد می شود این قسمت رو خالی بگذارید تا با نام پیشفرض icon ها ساخته شوند.
4. و در آخر دکمه Generate رو بزنید تا فرایند ساخت ایکن شروع بشه. وقتی تمام شد به صورت خودکار دانلود آغاز می شود.

پس از اتمام دانلود، حالا یک فایل زیپ zip در اختیار شماست. حالا فایل زیپ رو استخراج کنید تا به فایل ها دسترسی داشته باشیم. وقتی پوشه مورد نظر رو باز کنید باید با همچین فایل هایی مواجه بشید.

تصویری با نام playstore ساخته که برای این است که وقتی بخواهید اپلیکیشنتون رو در گوگل پلی انتشار بدهید از این لوگو استفاده کنید. همچنین تصویری هم با نام appstore ساخته که اون هم به همین منظور است. حال ما با پوشه android کار داریم. اگر وارد پوشه اندروید شدید، 5 پوشه با نام های mipmap-hdpi مشاهده می کنید. که هر پوشه برای اندازه خاصی است! که اگر به داخل پوشه ها نگاه کنید متوجه این منظور خواهید شد.

باز کردن پوشه های پروژه اندروید استودیو در Explorer

حال در اندروید استودیو به این مسیر می رویم. android > app > src > main > res بعد روی یکی از پوشه های داخل فولدر res کلیک راست کنید و موس رو روی گزینه Open in نگه دارید و گزینه Explorer رو انتخاب کنید. مانند تصویر زیر.

وقتی روی Explorer کلیک کردید! پنجره ای باز میشه که شامل 9 فایل هستش. دقت داشته باشید ما فقط به 5 فایلی که اسمشون با mipmap شروع شده کار داریم و به بقیه فولدر ها کاری نداریم. حال 5 پوشه ای که خودمون با سایت appicon ساختیم رو کپی کنید و با 5 پوشه پروژه جایگذاری کنید. همانند تصویر زیر.

به همین سادگی ایکن برنامه شما عوض شد. حال روش دوم را با استفاده از افزونه آموزش می دهیم.

تغییر ایکن icon اپلیکیشن فلاتر با استفاده از کتابخانه flutter launcher icons

ابتدا دستور زیر را کپی کرده و در فایل pubspec.yml زیر dev_dependencies جایگذاری کنید تا پکیج flutter launcher icons روی پروژه شما نصب بشه. درضمن الان که بنده این آموزش رو می نویسم ورژن این کتابخانه 0.9.3 است. برای اطلاع از ورژن جدید و همچنین اطلاعات بیشتر درباره این کتابخانه! روی این لینک کلیک کنید.

flutter_launcher_icons: ^0.9.3

پس از نصب کتابخانه باید یک پوشه برای تصویر icon تون بسازید. و تصویر رو در آن قرار دهید. و سپس مسیر آن تصویر را هم در در فایل pubspec.yml قرار دهید. که در این آموزش مسیر ایکون ما assets/icon_launcher/Sourcecodeflutter.png است. مانند تصویر زیر

سپس باید کد زیر را در فایل pubspec.yml وارد کنید.

flutter_icons:
  android: true
  ios: true
  image_path: "مسیر ایکون که واسش پوشه ساختیم"
  image_path_android:"مسیر آیکون اندروید"
  image_path_ios:"مسیر ایکون ایفون"

• android: اگر میخواهید برای اندروید ایکون بسازید، مقدار این گزینه رو true قرار دهید.
• ios: اگر میخواهید برای ios هم ایکون بسازید ، true کنید و یا حذف یا مقدارش رو false قرار دهید.
• image_path: اگر ایکون هر دو پلتفرم یکی هستند و تفاوتی با هم ندارند! مسیر ایکون رو قرار دهید.
• image_path_android و image_path_ios: اگر ایکون های دو پلتفرم با هم فرق دارند و میخواهید در اندروید یه نوع ایکن و در ios ایکن دیگر نمایش داده بشه! مسیر هر کدام رو جداگانه وارد کنید و image_path را حذف کنید که نیازی به اون ندارید.

در این آموزش ما میخواهیم فقط برای اندروید ایکن بسازیم. همانند تصویر زیر

و در قدم آخر دستور زیر را در ترمینال (Alt + F12) اندروید استودیو وارد و اینتر بزنید تا فرایند تغییر ایکن صورت بگیرد.

flutter pub run flutter_launcher_icons:main

که برای اطمینان از این تغییر، به آدرس android > app > src > main > res و روی یکی از پوشه های mipmap کلیک کرده و روی تصویر کلیک کنید. می بینید که ایکون با موفقیت تغییر یافته است. مانند تصویر زیر

آموزش ساین کردن اپلیکیشن Signing the app در فلاتر

برای اینکه بتوانیم اپلیکیشن خود را در مارکت هایی مثل گوگل پلی، کافه بازار، مایکت و… انتشار دهیم! باید یک کلیدی برای اپلیکیشن خود بسازیم که پس فردا غیر از خودمون کسی نتواند اپ ما رو بروزرسانی و منتشر کنه. مگر اینکه این کلید رو داشته باشه. همچنین برای اینکه به گوگل اثبات کنیم که برنامه ما مخرب نیست و ما هم برنامه نویس معتبری هستیم! باید برنامه مون رو ساین کنیم.

خب برای امضا کردن اپ ابتدا دستور زیر را در ترمینال وارد و اینتر بزنید.

  keytool -genkey -v -keystore c:\Users\USER_NAME\upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload

فقط قبل از اینکه کد بالا را در ترمینال وارد کنید به این نکات توجه داشته باشید که:

• به جای USER_NAME نام کامپیوتر خودتون رو وارد کنید.
• اگر میخواهید در مسیر دیگری فایل key شما ساخته بشه اون رو به جای c:\Users\USER_NAME وارد کنید.
• upload-keystore نام کلید شماست، به هر اسمی که میخواهید میتونید تغییر بدهید.
• alias هم نام مستعار است که اون هم به هر اسمی که میخواهید میتونید تغییر دهید.
• تمام مراحل بالا را به یاد داشته باشید که بعدا نیازش داریم

بعد از اینکه کد را وارد ترمینال کردین و دکمه اینتر رو زدین حالا چند تا سوال ازتون میپرسه که باید بهش جواب بدین، همه این سوالات برای اطلاعات کلید شماست و روی آن ست میشه. یعنی گوگل پلی با این مشخصات، اطلاعات شمای برنامه نویس رو میدونه. سوالات به ترتیب زیر هستند.

• Enter keystore password: در اینجا باید پسوردی رو برای کلیدتون وارد کنید.(توجه: هنگام وارد کردن رمز چیزی در ترمینال تایپ نمیشه پس اینقدر بهش نگاه نکن و فقط بنویس 😄)
• Re-enter new password: ایینجا دوباره همون رمز رو وارد کنید. اگه درست تایپ کرده باشید میره به سوال بعد.
• What is your first and last name: اینجا نام و نام خانوادگی رو وارد کنید.
• What is the name of your organizational unit: اینجا نقش خودتون در شرکت رو بنویسید که معمولا dev می نویسند.
• What is the name of your organization: اینجا نام شرکتتون رو بنویسید.
• What is the name of your City or Locality: در اینجا نام شهر محل زندگیتون رو بنویسید.
• What is the name of your State or Province: اینجا نام خیابان محل سکونت رو بنویسید.
• What is the two-letter country code for this unit: و در آخر کد کشورتون رو وارد کنید که مال ایران 98 است.
• بعد از اینکه به همه سوالات پاسخ دادید، یه سوال دیگه میپرسه و میگه آیا همه اطلاعات رو به درستی وارد کردید؟ اگه درست بود، yes رو تایپ و اینتر بزنید.
• Enter key password for <نام مستعار>: حالا اینبار میگه یه پسورد هم برای نام مستعارتون ست کنید.
• Re-enter new password: دوباره رمز رو تایپ کنید و اینتر بزنید.
• حالا می بینید که در آدرس و نامی که خودتون واسش تعیین کرده بودید کلید رو با پسوند key واستون ساخته است. مانند تصویر زیر

ست کردن کلید ساخته شده key با پروژه فلاتر

اول باید یک فایلی با نام key.properties در پوشه اندروید بسازید. مانند تصویر زیر

وقتی فایل رو ساختین حالا باید کد زیر رو داخل فایل قرار دهید.

storePassword= رمز اولی که در سوال اول انتخاب کردید
keyPassword=رمز دومی که در مرحله آخر اضافه کردین
keyAlias=نام مستعارتون
storeFile=آدرس کلید ساخته شده تون

مانند تصویر زیر:

حالا باید این فایل رو با گریدل ست کنیم. برای این منظور به پوشه android > app > build.gradle بروید. داخل کد های فایل گریدل دنبال کد android بگردید و قبل از بلاک کد Android کد های زیر رو جایگذاری کنید.

   def keystoreProperties = new Properties()
   def keystorePropertiesFile = rootProject.file('key.properties')
   if (keystorePropertiesFile.exists()) {
       keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
   }

مانند تصویر زیر:

حال در همان پوشه گریدل دنبال بلاک کدی با نام buildTypes بگردید و کد زیر را با اون جایگذاری کنید.

   signingConfigs {
       release {
           keyAlias keystoreProperties['keyAlias']
           keyPassword keystoreProperties['keyPassword']
           storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
           storePassword keystoreProperties['storePassword']
       }
   }
   buildTypes {
       release {
           signingConfig signingConfigs.release
       }
   }

مانند تصاویر زیر:

نکته: توجه داشته باشید چون فایل های گریدل رو دستکاری کردیم شاید لازم باشد یکبار flutter clean رو هم انجام بدهیم.

آموزش تغییر دادن نام اپلیکیشن در فلاتر

برای تغییر اسم اپلیکیشن، که منظورمان همان نامی است که وقتی کاربر اپ شما رو نصب میکنه ،نام برنامه شما رو زیر آیکون اپلیکیشن می بینه. خب برای این کار ابتدا به مسیر android > app > src > main > AndroidManifest.xml رفته و داخل بلاک کد application مقدار android:label رو به اسم اپلیکیشن تغییر دهید. مانند تصویر زیر:

ساخت فایل نصبی apk اپلیکیشن در فلاتر

حالا در مرحله آخر کافیه که کد زیر را در ترمینال وارد کنید! و یا در تولبار این مسیر رو پیش برید. Build > Flutter > Build apk

flutter build apk

حال به مسیری که برای ساخت پروژه تعیین کردین رفته و به مسیر build > app > outputs > flutter-apk > app-release.apk بروید. این فایل app-release.apk اپلیکیشن نهایی شماست.

راستی اگه میخوای حجم اپلیکیشن رو هنگاک خروجی تا 60 درصد کاهش کاهش بدی! آموزش کاهش حجم خروجی فلاتر رو ببین. حتما به کارت میاد.

امیدوارم از این آموزش لذت برده باشید. لطفا با نظرات و پیشنهادات ارزشمندتون ما رو در ادامه این راه دلگرم کنید. موفق باشید.