این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

فلوتر MDC-101: مبانی اجزای مواد

۱. مقدمه

طراحی متریال و کتابخانه متریال فلاتر چیستند؟

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

کتابخانه Material Flutter شامل ویجت‌های Flutter است که طرح‌های کامپوننت‌های Material Design (به اختصار MDC ) را پیاده‌سازی می‌کنند تا یک تجربه کاربری سازگار در برنامه‌ها و پلتفرم‌ها ایجاد کنند. با تکامل سیستم Material Design، این کامپوننت‌ها به‌روزرسانی می‌شوند تا پیاده‌سازی پیکسلی بی‌نقص و سازگار با استانداردهای توسعه front-end گوگل تضمین شود.

در این آزمایشگاه کد، شما با استفاده از چندین کامپوننت Material Flutter یک صفحه ورود به سیستم خواهید ساخت.

آنچه خواهید ساخت

این آزمایشگاه کد، اولین از چهار آزمایشگاه کد است که شما را در ساخت برنامه‌ای به نام Shrine ، یک برنامه تجارت الکترونیک که لباس و کالاهای خانگی می‌فروشد، راهنمایی می‌کند. این آزمایشگاه نشان می‌دهد که چگونه می‌توانید با استفاده از Material Flutter، کامپوننت‌ها را برای انعکاس هر برند یا سبکی سفارشی کنید.

در این آزمایشگاه کد، شما یک صفحه ورود برای Shrine خواهید ساخت که شامل موارد زیر است:

تصویری از لوگوی Shrine
نام برنامه (معبد)
دو فیلد متنی، یکی برای وارد کردن نام کاربری و دیگری برای وارد کردن رمز عبور
دو دکمه

اندروید	آی‌او‌اس

اجزا و زیرسیستم‌های Flutter متریال در این آزمایشگاه کد

فیلد متنی
دکمه
موج جوهر (یک شکل بصری از بازخورد برای رویدادهای لمسی)

سطح تجربه خود را در توسعه فلاتر چگونه ارزیابی می‌کنید؟

تازه کار

متوسط

ماهر

۲. محیط توسعه فلاتر خود را تنظیم کنید

برای تکمیل این آزمایشگاه به دو نرم‌افزار نیاز دارید - SDK فلاتر و یک ویرایشگر .

شما می‌توانید codelab را با استفاده از هر یک از این دستگاه‌ها اجرا کنید:

یک دستگاه فیزیکی اندروید یا iOS که به رایانه شما متصل شده و روی حالت توسعه‌دهنده (Developer mode) تنظیم شده باشد.
شبیه‌ساز iOS (نیاز به نصب ابزارهای Xcode دارد).
شبیه‌ساز اندروید (نیاز به راه‌اندازی در اندروید استودیو دارد).
یک مرورگر (برای اشکال‌زدایی، کروم مورد نیاز است).
به عنوان یک برنامه دسکتاپ ویندوز ، لینوکس یا macOS . شما باید روی پلتفرمی که قصد استقرار آن را دارید، توسعه دهید. بنابراین، اگر می‌خواهید یک برنامه دسکتاپ ویندوز توسعه دهید، باید روی ویندوز توسعه دهید تا به زنجیره ساخت مناسب دسترسی داشته باشید. الزامات خاص سیستم عامل وجود دارد که به تفصیل در docs.flutter.dev/desktop پوشش داده شده است.

۳. اپلیکیشن شروع کدلب را دانلود کنید

پروژه‌ی آغازین در دایرکتوری material-components-flutter-codelabs-101-starter/mdc_100_series قرار دارد.

... یا آن را از گیت‌هاب کلون کنید

برای کپی کردن این codelab از گیت‌هاب، دستورات زیر را اجرا کنید:

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

پروژه را باز کنید و برنامه را اجرا کنید

پروژه را در ویرایشگر دلخواه خود باز کنید.
دستورالعمل‌های «اجرای برنامه» را در بخش «شروع به کار: تست درایو » برای ویرایشگر انتخابی خود دنبال کنید.

موفقیت! کد آغازین صفحه ورود به Shrine باید روی دستگاه شما اجرا شود. باید لوگوی Shrine و نام "Shrine" را درست زیر آن ببینید.

اندروید	آی‌او‌اس

بیایید به کد نگاه کنیم.

login.dart را باز کنید. باید شامل این موارد باشد:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

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

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

توجه کنید که شامل یک دستور import و دو کلاس جدید است:

دستور import امکان استفاده از کتابخانه Material را در این فایل فراهم می‌کند.
کلاس LoginPage کل صفحه نمایش داده شده در شبیه ساز را نشان می‌دهد.
build() کلاس _LoginPageState نحوه ایجاد تمام ویجت‌ها در رابط کاربری ما را کنترل می‌کند.

۴. ویجت‌های TextField را اضافه کنید

برای شروع، دو فیلد متنی به صفحه ورود خود اضافه خواهیم کرد که کاربران نام کاربری و رمز عبور خود را در آن وارد می‌کنند. ما از ویجت TextField استفاده خواهیم کرد که یک برچسب شناور را نمایش می‌دهد و یک موج لمسی را فعال می‌کند.

این صفحه عمدتاً با یک ListView ساختار یافته است که فرزندان خود را در یک ستون قابل پیمایش مرتب می‌کند. بیایید فیلدهای متنی را در زیر قرار دهیم.

ویجت‌های TextField را اضافه کنید

دو فیلد متنی جدید و یک فاصله بعد از const SizedBox(height: 120.0) اضافه کنید.

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
const SizedBox(height: 120.0),
// [Password]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

هر کدام از فیلدهای متنی یک فیلد decoration: دارند که یک ویجت InputDecoration را می‌پذیرد. فیلد filled: به این معنی است که پس‌زمینه فیلد متنی به طور کمرنگی پر شده است تا به افراد کمک کند ناحیه هدف ضربه یا لمس فیلد متنی را تشخیص دهند. obscureText: true فیلد متنی دوم به طور خودکار ورودی تایپ شده توسط کاربر را با بولت‌ها جایگزین می‌کند، که برای رمزهای عبور مناسب است.

پروژه خود را ذخیره کنید (با فشردن کلیدهای ترکیبی command + s) که باعث اجرای Hot Reload می‌شود.

حالا باید صفحه‌ای با دو فیلد متنی برای نام کاربری و رمز عبور ببینید! به انیمیشن برچسب شناور نگاه کنید:

اندروید	آی‌او‌اس

۵. دکمه‌ها را اضافه کنید

در مرحله بعد، دو دکمه به صفحه ورود خود اضافه خواهیم کرد: "Cancel" و "Next". ما از دو نوع ویجت دکمه استفاده خواهیم کرد: TextButton و ElevatedButton .

انتخاب بین متن و دکمه‌های برجسته

چرا به سادگی دو دکمه‌ی برجسته نمایش داده نمی‌شود؟ هر نوع دکمه نشان می‌دهد که کدام اقدامات از بقیه مهم‌تر هستند.

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

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

برای کسب اطلاعات بیشتر در مورد سلسله مراتب دکمه‌ها، به مقاله دکمه‌ها در دستورالعمل‌های متریال مراجعه کنید.

نوار سرریز را اضافه کنید

بعد از فیلدهای متنی، OverflowBar به فرزندان ListView اضافه کنید:

// TODO: Add button bar (101)
OverflowBar(
  alignment: MainAxisAlignment.end,
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

OverflowBar فرزندان خود را در یک ردیف مرتب می‌کند.

دکمه‌ها را اضافه کنید

سپس دو دکمه به لیست children OverflowBar اضافه کنید:

    // TODO: Add buttons (101)
    TextButton(
      child: const Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101) 
      },
    ),

پروژه خود را ذخیره کنید. در زیر آخرین فیلد متنی، باید دو دکمه ظاهر شود:

اندروید	آی‌او‌اس

OverflowBar کار طرح‌بندی را برای شما انجام می‌دهد. این ابزار دکمه‌ها را به صورت افقی قرار می‌دهد، بنابراین آنها در کنار هم ظاهر می‌شوند.

لمس یک دکمه، انیمیشن موج جوهر را آغاز می‌کند، بدون اینکه اتفاق دیگری رخ دهد. بیایید قابلیتی را به توابع ناشناس onPressed: اضافه کنیم، به طوری که دکمه لغو، فیلدهای متنی را پاک کند و دکمه بعدی صفحه را ببندد:

افزودن کنترل‌کننده‌های ویرایش متن

برای اینکه امکان پاک کردن مقادیر فیلدهای متنی فراهم شود، TextEditingControllers را برای کنترل متن آنها اضافه خواهیم کرد.

درست زیر تعریف کلاس _LoginPageState ، کنترلرها را به عنوان متغیرهای final اضافه کنید.

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

در controller: مربوط به اولین فیلد متنی، مقدار _usernameController را تنظیم کنید:

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

در controller: مربوط به فیلد متنی دوم، اکنون _passwordController را تنظیم کنید:

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

ویرایش در حالت فشرده

یک دستور برای پاک کردن هر کنترلر در تابع onPressed: از TextButton اضافه کنید:

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

پروژه خود را ذخیره کنید. اکنون وقتی چیزی را در فیلدهای متنی تایپ می‌کنید، با فشردن دکمه لغو، هر فیلد دوباره پاک می‌شود.

این فرم ورود در وضعیت خوبی است! بیایید کاربران خود را به بقیه برنامه Shrine هدایت کنیم.

پاپ

برای رد کردن این view، می‌خواهیم این صفحه (که فلاتر آن را route می‌نامد) را از پشته ناوبری حذف کنیم .

در تابع onPressed: از ElevatedButton، جدیدترین مسیر را از Navigator انتخاب کنید:

        // TODO: Show the next page (101) 
        Navigator.pop(context);

در آخر، فایل home.dart را باز کنید و در Scaffold resizeToAvoidBottomInset را روی false تنظیم کنید:

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

انجام این کار تضمین می‌کند که ظاهر صفحه‌کلید، اندازه صفحه اصلی یا ویجت‌های آن را تغییر نمی‌دهد.

پروژه خود را ذخیره کنید. ادامه دهید و روی «بعدی» کلیک کنید.

تو انجامش دادی!

اندروید	آی‌او‌اس

این صفحه، نقطه شروع آزمایشگاه کد بعدی ماست که در MDC-102 روی آن کار خواهید کرد.

۶. تبریک می‌گویم!

ما فیلدهای متنی و دکمه‌ها را اضافه کردیم و به ندرت لازم بود کد طرح‌بندی را در نظر بگیریم. کامپوننت‌های متریال برای فلاتر با استایل‌های زیادی ارائه می‌شوند و تقریباً به راحتی می‌توان آنها را روی صفحه قرار داد.

مراحل بعدی

فیلدهای متنی و دکمه‌ها دو جزء اصلی در سیستم متریال هستند، اما اجزای بسیار بیشتری وجود دارد! می‌توانید بقیه را نیز در کاتالوگ ویجت‌های کامپوننت‌های متریال بررسی کنید.

روش دیگر، برای کسب اطلاعات بیشتر در مورد اجزای پوشش داده شده در MDC-102 برای Flutter، به MDC-102: ساختار و طرح‌بندی طراحی متریال مراجعه کنید.

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

کاملاً موافقم

موافق

خنثی

مخالف

کاملاً مخالفم

من دوست دارم در آینده به استفاده از کامپوننت‌های متریال ادامه دهم.