7 نکته و تکنیک برای یادگیری ساخت اپلیکیشن با فلاتر در سال 2021

فلاتر یک کیت طراحی رابط کاربری است که توسط گوگل ساخته شده است. نکات و تکنیک های بسیاری برای یادگیری فلاتر در سال 2021 وجود دارد که می تواند روند یادگیری شما را بسیار سریعتر و بهتر کند. در ادامه با معرفی این 10 نکته همراه ما باشید.

ساخت اپلیکیشن با اپتو | ساخت اپلیکیشن بدون کدنویسی

1- بستن کیبورد به کمک فلاتر

با کمک Gesture Detector می توانید به راحتی این کار را انجام دهید:

GestureDetector(                                                                                                     	
          onTap: () {
                        FocusScope.of(context).requestFocus(FocusNode());
              },
              child: Container(
                   color: Colors.white,
     	          child:  new Column(
                       mainAxisAlignment:  MainAxisAlignment.center,
                       crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
                       TextField( ),
                       Text("Test"),                            	
                 ],
            )
       )

2- استفاده از تایمر در فلاتر

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

void periodic() {
Timer.periodic(
    Duration(seconds: 1),
       (Timer time) {
	print("time: ${time.tick}");
       if (time.tick == 5) {
    	time.cancel();
    	print('Timer Cancelled');
         }
      },

   );

}

3- نشان دادن آیتم ها بصورت جدا در ListView

ListView باعث اسکرول شدن آیتم های لیست ویو می شود. اغلب اوقات نیاز داریم که به کمک یک جدا کننده، المان های ListView را جدا کنیم. این جدا کننده می تواند یک دیوایدر یا یک خط باشد.

ListView.separated(
  itemCount: data.length,
  separatorBuilder: (BuildContext context, int index) => Divider( height: 3, color: Colors.white),
  itemBuilder: (BuildContext context, int index) {
	return Container(
  	height: 150,
  	color: Colors.red,
  	child: Center(
   child: Text('${data[index]}'),
),
      );
   }
)

4- ساخت یک تصویر دایره ای به کمک فلاتر

ClipOval ابزاری است که به شما اجازه می دهد که ابزارهای درون آن به صورت دایره ای یا بیضی به نمایش در بیایند. به کمک این ابزار می توانیم ابزارهای داخلی این ویجت را شکل دایره ای یا بیضی دهیم. اگر طول و عرض را یکسان بدهیم، شکل تشکیل شده دایره ای خواهد شد. اگر این دو مشخصه متفاوت باشند، شکل شبیه به بیضی خواهد شد. در ادامه نمونه استفاده شده از این کلاس و ابزار را می بینیم:

ClipOval(
   child: Image.network(
       imgUrl,
       fit: BoxFit.fill,
       width: 190.0,
       height: 190.0,
   ),
);

5- ریفکتور کردن کد به کمک فلاتر

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

ButtonContainer(child: child).

6- عملگر If Null

بررسی اینکه آیا چیزی نال هست یا نه. اگر نال نباشد، مقدار موجود را بر می گرداند و اگر نال باشد، مقداری که می خواهیم را بر میگرداند.

abc ?? = 5  // تخصیص مقدار 5 به abc، در صورتی که abc نال باشد.

7- بک گراند دادن به کانتینر

می خواهید که به کانتینر خود تصویر پس زمینه بدهید؟ تا به حال از Stack برای این کار استفاده می کردید؟ راه بهتری وجود دارد که نتیجه ی بهتری می دهد. کد زیر را ببینید:

Container(
  width: double.maxFinite,
  height: double.maxFinite,
  decoration: BoxDecoration(   
    image: DecorationImage(
      image: NetworkImage('https://bit.ly/2oqNqj9'),
    ),
  ),
  child: Center(
    child: Text(
      'Flutter.dev',
      style: TextStyle(color: Colors.red),
    ),
  ),
),

همانطور که میبینید المان های زیادی برای تغییر و بهبود ظاهر کانتینر وجود دارد.