آموزش Flutter : ویجت چیست ؟

آذر 21, 1397| علی شیرالی
ویجت در فلوتر چیست ؟ | مارکت اندروید ریور

در این مقاله توضیح میدهیم widget چیست و در فلاتر چه کاربردی دارد . در ادامه مقالات آموزشی قبل در زمینه آموزش Flutter اینبار به کاربرد ویجت ها در فلاتر رسیدیم همواره میتوانید مقالات قبلی را با تگ فلاتر در اندروید ریور دنبال کنید. یک فنجان قهوه را هیچگاه فراموش نکنید.

Widget در فلاتر چیست ؟

همانطور که در مقالات ابتدایی که درباره فلاتر نوشته ایم ، میدانیم که فلاتر یک تحول عظیم در زمینه برنامه نویسی چند سکویی مورد تایید گوگل است  که توسط گوگل ایجاد شده است که کمک میکند با استفاده از یک زبان کد نویسی به مراتب ساده تر از java یک اپلیکیشن مالتی پلتفرم برای اندروید و iOS تولید کنید.

در این زبان برنامه نویسی جدید که برپایه زبان Dart بوده مفاهیم پایه تغییر کردند که البته امری طبیعی است.

View در جاوا Widget در فلاتر

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

ویجت در فلوتر

Widget ها تغییر ناپذیر هستند

همانطور که در مقالات قبلی توضیح دادیم ویجت ها در فلاتر قابل تغییر نیستند و از این حیث با ویو در جاوا متفاوت هستند. وقتی ویجت ها با توجه به عملکرد اپلیکیشن تغییر میکنند و یا وضعیت آنها تغییر میکند فلاتریک درخت عملکردی از آنها در چهارچوب ویجت ایجاد میکند که جزئیات را نمایان می سازد. همانطور که میدانیم در اندروید ویو ها یک بار اصطلاحا draw یا کشیده می شوند و مجددا تکرار نمی شود.

همچنین بخوانید :  آموزش راست چین (RTL) کردن سورس اندروید

 

Widget در فلاتر بسیار سبک هستند

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

تعریف یک Widget در فلاتر

برای درک بهتر ویجت در در ادامه یک مثال برای شما آوردیم در این مثال با استفاده از ویجت Text یک نوشتار را با استفاده از یک کلاس StatelessWidget استفاده می کنیم.

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

ما میخواهیم رابط کاربری به صورت داینامیک بوده و با توجه به اطلاعات دریافتی تغییر کند پس لازم داریم یک کلاس StatefulWidget را ایجاد کنیم. مثلا میخواهیم وقتی کاربر روی دکمه ” من فلاتر را دوست دارم ” کلیک کرد وضعیت عنصر بروزرسانی شود. این عملکرد برای دریافت اطلاعات از وب نیز کاربرد دارد . ما در این بخش از عملکرد اینتراکشن یا درونی استفاده می کنیم.

همچنین بخوانید :  مهاجرت به AndroidX در برنامه نویسی اندروید

پس کد ما شبیه این است :

import 'package:flutter/material.dart';

void main() {
  runApp(SampleApp());
}

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text
  String textToShow = "I Like Flutter";

  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(child: Text(textToShow)),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: Icon(Icons.update),
      ),
    );
  }
}

یک تفاوت دیگر در طراحی در جاوا و فلاتر
در جاوا همانطور که میدانید برای طراحی یک لی اوت کد های xml می زدیم اما در فلاتر خبری از xml نیست و برای طراحی یک لی اوت کافیست یک widget tree یا ویجت با ساختار چارتی درختی ایجاد کنید که این می تواند در نوع خود بسیار جالب باشد . فلاتر همیشه میتواند شما را غافلگیر کند.

0/5 (0 Reviews)
علی شیرالی CO-Founder نویسنده مقاله

بنیانگذار مارکت اندروید ریور و گاهی هم گیم باز 🎮 و صد البته یه عاشق فیلمسازی 🎬 و عکاسی 📷 که چندین گام جدی هم توی این زمینه برداشته..



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

مقالات مرتبط را بخوانید :


سورس های اندروید شامل تخفیف رو ببین !


  تخفیف ها و اخبار ویژه رو در تلگراممون دنبال کن :)
به این مقاله امتیاز دهید :
0/5 (0 Reviews)
  خرید سورس های حرفه ای بازی و اپلیکیشن اندروید

دسته‌ها: آموزش برنامه نویسی اندروید

دیدگاهتان را بنویسید

راهنما : برای نوشتن موارد مختلف در دیدگاه می توانید از راهنمای نگارش اندروید ریور استفاده کنید : نگارش کد کوتاه `your code`
نگارش کد بلند یا نگارش بخش عمده یک سورس کد :
[sourcecode lang="your code language"] your code here [/sourcecode]