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

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

1. مقدمه

Material Design و کتابخانه Material Flutter چیست؟

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

کتابخانه Material Flutter شامل ویجت‌های Flutter است که طرح‌های اجزای طراحی متریال (به اختصار MDC ) را برای ایجاد یک تجربه کاربری ثابت در بین برنامه‌ها و پلتفرم‌ها پیاده‌سازی می‌کنند. با تکامل سیستم طراحی متریال، این مؤلفه‌ها به‌روزرسانی می‌شوند تا از پیاده‌سازی بی‌نقص پیکسلی، با رعایت استانداردهای توسعه فرانت‌اند Google اطمینان حاصل کنند.

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

چیزی که خواهی ساخت

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

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

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

اندروید	iOS

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

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

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

تازه کار

متوسط

مسلط

2. محیط توسعه Flutter خود را تنظیم کنید

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

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

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

3. برنامه استارتر Codelab را دانلود کنید

پروژه شروع در دایرکتوری material-components-flutter-codelabs-101-starter/mdc_100_series قرار دارد.

... یا آن را از GitHub شبیه سازی کنید

برای شبیه سازی این کد لبه از GitHub، دستورات زیر را اجرا کنید:

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

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

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

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

اندروید	iOS

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

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 نحوه ایجاد تمام ویجت ها در رابط کاربری ما را کنترل می کند.

4. ویجت های 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) که یک بارگذاری مجدد داغ را انجام می دهد.

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

اندروید	iOS

5. دکمه ها را اضافه کنید

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

انتخاب بین دکمه های متن و بالا

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

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

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

درباره سلسله مراتب دکمه ها در مقاله دکمه ها از دستورالعمل های مواد بیشتر بیاموزید.

نوار Overflow Bar را اضافه کنید

بعد از فیلدهای متنی، 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) 
      },
    ),

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

اندروید	iOS

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

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

TextEditingControllers را اضافه کنید

برای اینکه بتوانیم مقادیر فیلدهای متنی را پاک کنیم، 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,

ویرایش رویPressed

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

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

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

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

پاپ

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

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

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

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

    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,
    );

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

همین! پروژه خود را ذخیره کنید پیش بروید و روی "بعدی" کلیک کنید.

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

اندروید	iOS

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

6. تبریک!

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

مراحل بعدی

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

از طرف دیگر، به MDC-102: Material Design Structure and Layout بروید تا در مورد اجزای تحت پوشش MDC-102 برای Flutter اطلاعات کسب کنید.

من توانستم با صرف زمان و تلاش معقول این کد لبه را تکمیل کنم

کاملا موافقم

موافقم

خنثی

مخالف

به شدت مخالفم

من می‌خواهم در آینده از Material Component استفاده کنم