اصول ایجاد یک برنامه فلاتر در Android Studio

4 سال پیش

امتیاز دهید post

اصول ایجاد یک برنامه فلاتر در Android Studio

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، بیایید یک برنامه ساده فلاتر ایجاد کنیم تا اصول ایجاد یک برنامه فلاتر در Android Studio درک کنیم.

مرحله 1 – Android Studio را باز کنید

مرحله 2 – ایجاد پروژه Flutter. برای این کار ، روی File → New → New Flutter Project کلیک کنید

مرحله 3 – برنامه Flutter را انتخاب کنید. برای این کار ، Flutter Application را انتخاب کرده و Next را کلیک کنید.

مرحله 4 – برنامه را به صورت زیر پیکربندی کنید و روی Next کلیک کنید.

نام پروژه: hello_app
Flutter SDK Path: <path_to_flutter_sdk>
مکان پروژه: <path_to_project_folder>
توضیحات: hello world بر اساس برنامه فلاتر

مرحله 5 – پیکربندی پروژه.

دامنه شرکت company را به صورت flutterapp.tutorialspoint.com تنظیم کنید و روی پایان کلیک کنید.

مرحله 6 – وارد دامنه شرکت شوید.

اندروید استودیو با کمترین قابلیت، برنامه ای کاملاً فعال را ایجاد می کند. اجازه دهید ساختار برنامه را بررسی کنیم و سپس کد را تغییر دهیم تا وظیفه خود را انجام دهیم.

ساختار برنامه و هدف آن به شرح زیر است:

اجزای مختلف ساختار برنامه در اینجا توضیح داده شده است:

android – کد منبع خودکار ایجاد شده برای ایجاد برنامه اندروید
ios – کد منبع خودکار برای ایجاد برنامه ios ایجاد می شود
lib – پوشه اصلی شامل کد دارت است که با استفاده از فریم ورک فلاتر نوشته شده است
ib / main.dart – نقطه ورودی برنامه فلاتر
test – پوشه ای حاوی کد Dart برای آزمایش برنامه فلاتر
test / widget_test.dart – کد نمونه
.gitignore – فایل کنترل نسخه Git
.metadata – تولید خودکار توسط ابزارهای فلاتر
.packages – به صورت خودکار برای ردیابی بسته های فلاتر تولید می شود
.iml – فایل پروژه مورد استفاده توسط Android studio
pubspec.yaml – مورد استفاده توسط پاب، مدیر پکیج فلاتر
pubspec.lock – تولید خودکار مدیر پکیج فلاتر، Pub
README.md – فایل توضیحات پروژه که در قالب Markdown نوشته شده است

مرحله 7 – کد دارت را در فایل lib / main.dart با کد زیر جایگزین کنید –

import 'package:flutter/material.dart';

void main() =&gt; runApp(MyApp());

class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child:
            Text(
               'Hello World',
            )
         ),
      );
   }
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Hello World Demo Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MyHomePage(title: 'Home page'),

);

}

class MyHomePage extends StatelessWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(this.title),

body: Center(

child:

Text(

'Hello World',

)

);

}

اجازه دهید کد دارت را خط به خط بررسی کنیم.

خط 1 – پکیج فلاتر ، مواد را وارد می کند. این ماده بسته ای است برای ایجاد واسط کاربری مطابق با دستورالعمل های طراحی Material که توسط اندروید مشخص شده است.

خط 3 – این نقطه ورود برنامه فلاتر است. تابع runApp را فراخوانی می کند و آن را به یک شی کلاس MyApp منتقل می کند. هدف از تابع runApp پیوست ویجت داده شده به صفحه است.

خط 5-17 – ویجت برای ایجاد UI در فریم ورک فلاتر استفاده می شود. StatelessWidget یک ابزارک است، که هیچ حالتی از ابزارک را حفظ نمی کند. MyApp StatelessWidget را گسترش می دهد و روش ساخت آن را تکمیل میکند. هدف از روش ساخت ایجاد بخشی از UI برنامه است. در اینجا، روش build از MaterialApp ، یک ابزارک برای ایجاد UI سطح ریشه برنامه استفاده می کند. این سه ویژگی دارد: عنوان ، تم و خانه (title, theme and home.)

Title: عنوان برنامه است

theme :تم موضوع ویجت است. در اینجا ، ما رنگ آبی را به عنوان رنگ کلی برنامه با استفاده از کلاس ThemeData و ویژگی آن، PrimarySwatch قرار می دهیم.

home UI: داخلی برنامه است که ویجت دیگری را به نام MyHomePage تنظیم کرده ایم

خط 19 – 38 – MyHomePage همان MyApp است با این تفاوت که ویجت داربست ((scaffold را برمی گرداند. داربست یک ابزارک سطح بالا در کنار ابزارک MaterialApp است که برای ایجاد طراحی مواد سازگار با UI استفاده می شود. این دو ویژگی مهم دارد، appBar برای نشان دادن عنوان برنامه و متن برای نشان دادن محتوای واقعی برنامه.

AppBar ویجت دیگری برای ارائه عنوان برنامه است و ما از آن در ویژگی appBar استفاده کرده ایم. در ویژگی بدنه، ما از ابزارک Center استفاده کرده ایم که ویجت کودک را مرکز آن قرار می دهد. متن آخرین ویجت داخلی برای نمایش متن است و در مرکز صفحه نمایش داده می شود.

مرحله 8 – اکنون برنامه را با استفاده از ، اجرای → اجرای main.dart اجرا کنید

مرحله 9 – در آخر، خروجی برنامه به شرح زیر است :

منبع.

لیست جلسات قبل آموزش برنامه نویسی فلاتر

امتیاز دهید post

نویسنده مطلب saber

اصول ایجاد یک برنامه فلاتر در Android Studio

اصول ایجاد یک برنامه فلاتر در Android Studio

لیست جلسات قبل آموزش برنامه نویسی فلاتر

دیدگاه شما

بدون دیدگاه

اصول ایجاد یک برنامه فلاتر در Android Studio

لیست جلسات قبل آموزش برنامه نویسی فلاتر

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه