آموزش ساخت تولبار در فلاتر

تقریبا میتونیم بگیم اکثر اپلیکیشن ها دارای یک قسمت به نام تولبار هستند که معمولا شامل یک متن و چند آیکون می شود.

تولبارها در بالای صفحه قرار میگیرند و بقیه ویجت ها در زیر آنها پیاده سازی می شود.

در فلاتر برای ساخت تولبار ما از یک لایه به نام Scafold استفاده می کنیم. این لایه ویجت های جالبی در اختیار ما میگذارد یکی از این ویجت ها Appbar نام دارد.

با استفاده از Appbar ما میتونیم به راحتی با 2 خط کد تولباری متریال طراحی کنیم.

 
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold()}
appbar: Appbar(),
body: Text('Hello Flutter')
}

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

برای نوشتن متن در تولبار به راحتی در قسمت یک تکست اضافه می کنیم.

 
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold()}
appbar: Appbar(
title: Text('Hello Flutter')
),
body: Text('Hello Flutter')
}

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

عنوان بصورت پیش فرض در سیستم عامل ios وسط نمایش داده می شود اما در اندروید در سمت چپ قرار میگیرد برای به وسط اوردن متن در اندروید از دستور زیر قبل از title استفاده کنید استفاده کنید.

  centerTitle: true

به غیر از ویژگی title ویژگی مهم دیگری هم Appbar داره که عموما برای اضافه کردن ایکون در این قسمت استفاده می شود که actions نام دارد.

 
title: Text('My Fancy Dress'),
  actions: [
    IconButton(
      icon: Icon(Icons.playlist_play),
      tooltip: 'Air it',
      onPressed: _airDress,
    )

برای تمرین کد بالا را خودتون به کد هی قبلی اضافه کنید و نتیجه را مشاهده کنید.