ساخت پروژه Hello World در فریموورک Flutter

تو مطلب قبلی با هم دیگه اولین پروژه Flutter خودمون و ایجاد کردیم, حالا میخوایم همون پروژه و ویرایش کنیم و خودمون کدنویسی کنیم.

ساخت اولین پروژه با Flutter

دیدیم که پروژه ما یک فایل به اسم main.dart داره وارد این فایل شوید و تمام کدها را پاک کنید.

برای اجرا شدن اپلیکیشن ما تمام کدهای خودمون که مربوط به UI برنامه هست و داخل متد runApp مینویسیم و همین متد runApp هم داخل متد main قرار دارد.

import 'package:flutter/material.dart';


void main(){
  runApp(
  
  );
}

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

container یک لایه کلی هست در صفحه که بستگی به خودتون داره از چه نوع لایه ای استفاده کنید ما از یک لایه ای استفاده می کنیم که تمام عناصر و در وسط صفحه قرار دهد

import 'package:flutter/material.dart';

void main(){
  runApp(
   new Center(
          child:new Text(
            "Hello Worl",
            textDirection: TextDirection.ltr,
            style: new TextStyle(fontSize: 22.0,
            ),
          )
      )
  );
}

در مثال بالا ما یک container  از نوع Center انتخاب کردیم یک نوشته در آن قرار دادیم. تمام عناصری که داخل container میخواهیم قرار دهیم را باید با کلمه child: مشخص کنیم.

در نهایت تعیین کردیم که متن ما چپ به راست هست و یک استایل هم به اون دادیم که اندازه متن و ۲۲ تعیین می کند.

برای عوض کردن رنگ پس زمینه میتونیم به شکل زیر عمل کنیم

import 'package:flutter/material.dart';

void main(){
  runApp(
   new Center(
       color: Colors.blue,
          child:new Text(
            "Hello Worl",
            textDirection: TextDirection.ltr,
            style: new TextStyle(fontSize: 22.0,
            ),
          )
      )
  );
}