آموزش استفاده از ویجت‌های پایه در فلاتر: Text، Container و Image

فلاتر یکی از محبوب‌ترین ابزارهای توسعه اپلیکیشن‌های موبایل است که به دلیل سرعت بالا و امکانات متنوع مورد توجه قرار گرفته است. در این مقاله، به بررسی سه ویجت پایه‌ای در فلاتر یعنی Text، Container و Image می‌پردازیم که نقش اساسی در طراحی رابط کاربری دارند.

ویجت Text

ویجت Text برای نمایش متن در اپلیکیشن استفاده می‌شود. این ویجت قابلیت‌های مختلفی مانند تنظیم فونت، رنگ متن، اندازه متن و غیره را ارائه می‌دهد.

مثال ساده:

Text(
  'سلام دنیا!',
  style: TextStyle(
    fontSize: 20,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
)

در کد بالا، متن "سلام دنیا!" با اندازه ۲۰، رنگ آبی و فونت بولد نمایش داده می‌شود.

تنظیمات دیگر:

ویجت Text همچنین امکاناتی مانند جهت نوشتار (LTR یا RTL)، خط‌کشی زیر متن، و فاصله بین حروف را فراهم می‌کند.

ویجت Container

ویجت Container یکی از قدرتمندترین ویجت‌ها در فلاتر است که برای ایجاد بخش‌بندی‌ها، افزودن حاشیه‌ها و تنظیم رنگ‌ها استفاده می‌شود.

مثال ساده:

Container(
  width: 100,
  height: 100,
  color: Colors.red,
)

در این مثال یک کانتینر با عرض و ارتفاع ۱۰۰ پیکسل و رنگ قرمز ایجاد شده است.

تنظیمات پیشرفته:

کانتینر قابلیت افزودن حاشیه (Border)، سایه (BoxShadow) و تصویر پس‌زمینه دارد:

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 5,
        offset: Offset(2, 2),
      )
    ],
  ),
)

در این کد یک کانتینر سبز با گوشه‌های گرد و سایه طراحی شده است.

ویجت Image

ویجت Image برای نمایش تصاویر در اپلیکیشن استفاده می‌شود. این ویجت از منابع مختلف مانند فایل‌های داخلی، شبکه یا حافظه موقت دستگاه پشتیبانی می‌کند.

مثال ساده:

نمایش تصویر از شبکه:

Image.network(
'https://www.example.com/image.png'
)

در این مثال تصویری از یک URL خاص بارگذاری شده است.

نمایش تصویر محلی:

Image.asset(
'assets/images/example.png
')

این کد تصویری را از پوشه محلی پروژه بارگذاری می‌کند.

تنظیمات پیشرفته:

ویجت Image قابلیت‌هایی مانند تغییر اندازه تصویر (fit)، افزودن گوشه‌های گرد و کنترل کیفیت را دارد:

Image.network(
'https://www.example.com/image.png',
  fit: BoxFit.cover
,
)

این کد تصویر را با حالت Cover نمایش می‌دهد تا کل فضای موجود پر شود.

نتیجه‌گیری

ویجت‌های Text، Container و Image اجزای اصلی طراحی رابط کاربری در فلاتر هستند. با ترکیب صحیح این ویجت‌ها می‌توانید صفحات زیبا و کاربردی طراحی کنید. اگر تازه وارد دنیای فلاتر شده‌اید، تمرین با این ویجت‌ها نقطه شروع خوبی برای یادگیری عمیق‌تر خواهد بود.