Flutter

Install#

برای نصب فلاتر ابتدا باید وارد سایت آن شویم

حال در قسمت get started، سیستم عامل خود را انتخاب کرده و فایل مربوطه را دانلود میکنیم.

حال باید android studio را نصب کنیم و سپس باید در سایت soft98 فایل java SE development kit را دانلود کنیم (jdk)
حال بعد از نصب نرم افزار ها باید فایل flutter را اکسترکت کرده و در درایو C، یک فولدر ب نام src بسازیم و سپس درون آن بریزیم
تمام sdk های مورد نظر android studio را باید نصب کنیم و سپس بعد از آن باید وارد sdk manager شویم و در قسمت sdk tools باید Android SDK command-line tools (latest) را تیک می زنیم تا دانلود شود.

🎉 در این قسمت باید یک شبیه ساز نیز بسازیم بعد از نصب فایل ها ک در قسمت AVD manager می توان این کار را انجام داد.

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

Variable name: JAVA_HOME
Variable value: C:\Program Files\Java\jdk-14.0.1

Variable name: ANDROID_HOME
Variable value: C:\Users\msaba\AppData\Local\Android\Sdk

حال در همان قسمت وارد path می شویم و آدرس های زیر را ب آن اضافه می کنیم

C:\flutter\bin
C:\Users\msaba\AppData\Local\Android\Sdk\platform-tools

و بعد از آن باید سیستم را reset می کنیم

حال باید دستور زیر را بزنیم و تمامی سوالات را Y میزنیم

flutter doctor --android-licenses

حال باید در cmd دستور زیر را بزنیم و صبر کنیم

flutter doctor

حال باید در vs code پلاگین های flutter و dart را نصب میکنیم
حال در فولدر مورد نظر با استفاده از دستور زیر میتوان یک پروژه flutter را ساخت

flutter create first-project

حال میتوان دستور زیر را زد و پروژه را استارت زد اما قبل از آن در قسمت پایین vscode روی no device کلیک میکنیم و شبیه سازی ک در android studio ساخته ایم را اجرا میکنیم.

flutter run

اجرا شدن برای بار اول بسیار طولانی می باشد.

در حالت کلی ما در ویجت ها ما 2 نوع state داریم ک یکی stateless و یکی هم stateful می باشد ک در حالت کلی اگر از statemanagement ها اگر استفاده نکنیم، باید در حالت کلی برای صفحاتی ک می خواهیم ک تغییر کنن از stateful ها و برای صفحاتی ک نمی خواهیم آن ها را تغییر دهیم از stateless ها استفاده می کنیم.

🎉 اما در حالت کلی stateless ها از لحاظ performance از stateful ها بهتر هستند و می توان برای تغییرات از statemanegement ها برای هندل این موضوع استفاده کرد.

🎉 در حالت کلی در flutter همه چیز به صورت widget می باشد و همه چیز widget می گوییم.

🎉 در ویجت های stateful ما به setState دسترسی داریم و می توانیم متغیر های مان را ب راحتی تغییر دهیم.

🎉 همچنین برای اینکه محدوده هر widget را در شبیه ساز ببینیم، می توانیم از ctrl + shift + p استفاده کنیم و سپس گزینه Flutter: toggle debug painting را بزنیم.

static fonts & images#

🎉 برای اضافه کردن font یا image های استاتیک، باید ب صورت زیر عمل کنیم:

ابتدا وارد فایل pubspec.yaml می شویم و در بخش هایی ک خود flutter مشخص کرده است و کامنت شده است، آدرس فایل های فونت و عکس مان را مشخص می کنیم. (بخش fonts و asstes)

🎉 همچنین اگر چندین عکس داشته باشیم، می توانیم بجای مشخص کردن آدرس کامل آن عکس، آدرس را تا فولدر آن عکس ها مشخص میکنیم

   assets:
     - assets/images/users/mohammad.jpg
     - assets/images/
  fonts:
    - family: iransans
      fonts:
        - asset: assets/fonts/iran-sans.ttf

سعی شود حتما یه بار برنامه متوقف شود و دوباره اجرا شود.

حال می توان در هر جایی از کدهایمان از عکس ها و فونت های مورد نظرمان استفاده کنیم

        body: Column(
          children: [
            Container(
              width: 500,
              height: 500,
              child: Image.asset(
                "assets/images/buttons-guide.png",
                fit: BoxFit.fill,
              ),
            ),
            const Text("Mohammad Farhadi", style: TextStyle(fontSize: 30, fontFamily: "inter"),)
          ],
        ),

همچنین می توانیم برای بهتر شدن کد هایمان در یک جا فونت هایمان را بدهیم تا بر روی همه جای برنامه اعمال شود

    return MaterialApp(
      theme: ThemeData(fontFamily: "inter"),
    )