فلوتر MDC-103: طرح‌بندی مواد با رنگ، شکل، ارتفاع و نوع

1. مقدمه

logo_components_color_2x_web_96dp.png

Material Components (MDC) به توسعه دهندگان کمک می کند طراحی مواد را پیاده سازی کنند. MDC که توسط تیمی از مهندسان و طراحان UX در Google ایجاد شده است، دارای ده‌ها مؤلفه رابط کاربری زیبا و کاربردی است و برای Android، iOS، وب و Flutter.material.io/develop در دسترس است.

اکنون می‌توانید از Material Flutter برای سفارشی کردن سبک متمایز برنامه‌های خود بیش از همیشه استفاده کنید. توسعه اخیر متریال دیزاین به طراحان و توسعه دهندگان انعطاف بیشتری برای بیان برند محصول خود می دهد.

در Codelabs MDC-101 و MDC-102، شما از Material Flutter برای ساختن اصول اولیه اپلیکیشنی به نام Shrine استفاده کردید، یک برنامه تجارت الکترونیک که لباس و کالاهای خانگی می فروشد. این برنامه شامل یک جریان کاربری است که با صفحه ورود شروع می شود، سپس کاربر را به صفحه اصلی می برد که محصولات را نمایش می دهد.

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

در این لبه کد، برنامه Shrine را با استفاده از:

  • رنگ
  • تایپوگرافی
  • ارتفاع
  • شکل
  • طرح بندی

اندروید

iOS

صفحه ورود به حرم با تم قهوه ای و صورتی

صفحه ورود به حرم با تم قهوه ای و صورتی

صفحه محصول Shrine، با نوار برنامه بالا و شبکه‌ای نامتقارن با قابلیت پیمایش افقی پر از محصولات، با تم صورتی

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

  • تم ها
  • تایپوگرافی
  • ارتفاع
  • لیست تصاویر

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

تازه کار متوسط مسلط

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

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

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

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

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

از MDC-102 ادامه می دهید؟

اگر MDC-102 را تکمیل کرده اید، کد شما باید برای این کد لبه آماده باشد. رفتن به مرحله: رنگ ها را تغییر دهید .

از صفر شروع کنم؟

برنامه codelab starter را دانلود کنید

برنامه شروع در فهرست راهنمای material-components-flutter-codelabs-103-starter_and_102-complete/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 103-starter_and_102-complete

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

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

موفقیت! شما باید صفحه ورود به حرم را از کد لبه های قبلی دستگاه خود ببینید.

اندروید

iOS

صفحه ورود به حرم بدون موضوع

صفحه ورود به حرم بدون موضوع

برای مشاهده صفحه محصول روی "بعدی" کلیک کنید.

اندروید

iOS

صفحه شبکه محصولات Shrine بدون موضوع

صفحه شبکه محصولات Shrine بدون موضوع

4. رنگ ها را تغییر دهید

یک طرح رنگی ایجاد شده است که نشان‌دهنده برند Shrine است و طراح از شما می‌خواهد که آن طرح رنگی را در برنامه Shrine پیاده‌سازی کنید.

برای شروع، بیایید آن رنگ ها را به پروژه خود وارد کنیم.

ایجاد colors.dart

یک فایل دارت جدید در lib به نام colors.dart ایجاد کنید. وارد کردن material.dart و اضافه کردن const Color : 

import 'package:flutter/material.dart';

const kShrinePink50 = Color(0xFFFEEAE6);
const kShrinePink100 = Color(0xFFFEDBD0);
const kShrinePink300 = Color(0xFFFBB8AC);
const kShrinePink400 = Color(0xFFEAA4A4);

const kShrineBrown900 = Color(0xFF442B2D);

const kShrineErrorRed = Color(0xFFC5032B);

const kShrineSurfaceWhite = Color(0xFFFFFBFA);
const kShrineBackgroundWhite = Colors.white;

پالت رنگ سفارشی

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

ویرایشگر تم مواد آنها را در سایه هایی با برچسب عددی، از جمله برچسب های 50، 100، 200، .... تا 900 از هر رنگ، سازماندهی کرده است. حرم فقط از سایه های 50، 100 و 300 از نمونه صورتی و 900 از نمونه قهوه ای استفاده می کند.

d0362cb45c565a8e.jpeg470b0e1c2669ae2.png

هر پارامتر رنگی یک ویجت به رنگی از این طرح ها نگاشت می شود. به عنوان مثال، رنگ تزئینات یک فیلد نوشتاری هنگامی که به طور فعال ورودی دریافت می کند باید رنگ اصلی موضوع باشد. اگر آن رنگ در دسترس نیست (به راحتی در پس زمینه آن قابل مشاهده است)، به جای آن از رنگ دیگری استفاده کنید.

اکنون که رنگ‌هایی را که می‌خواهیم استفاده کنیم، داریم، می‌توانیم آن‌ها را در رابط کاربری اعمال کنیم. ما این کار را با تنظیم مقادیر یک ویجت ThemeData که برای نمونه MaterialApp در بالای سلسله مراتب ویجت اعمال می کنیم، انجام خواهیم داد.

سفارشی سازی ThemeData.light()

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

بیایید colors.dart در app.dart.

import 'colors.dart';

سپس موارد زیر را خارج از محدوده کلاس ShrineApp به app.dart اضافه کنید:

// TODO: Build a Shrine Theme (103)
final ThemeData _kShrineTheme = _buildShrineTheme();

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light(useMaterial3: true);
  return base.copyWith(
    colorScheme: base.colorScheme.copyWith(
      primary: kShrinePink100,
      onPrimary: kShrineBrown900,
      secondary: kShrineBrown900,
      error: kShrineErrorRed,
    ),
    // TODO: Add the text themes (103)
    // TODO: Decorate the inputs (103)
  );
}

اکنون، theme: در انتهای تابع build() ShrineApp (در ویجت MaterialApp) به عنوان موضوع جدید ما باشد: 

  // TODO: Customize the theme (103)
  theme: _kShrineTheme, // New code

پروژه خود را ذخیره کنید اکنون صفحه ورود شما باید به شکل زیر باشد:

اندروید

iOS

صفحه ورود به حرم با تم صورتی و قهوه ای

صفحه ورود به حرم با تم صورتی و قهوه ای

5. سبک تایپوگرافی و برچسب را تغییر دهید

علاوه بر تغییر رنگ، طراح تایپوگرافی خاصی را نیز به ما داده است تا از آن استفاده کنیم. Flutter's ThemeData شامل 3 موضوع متنی است. هر موضوع متن مجموعه‌ای از سبک‌های متن است، مانند «تیتر» و «عنوان». ما از چند سبک برای برنامه خود استفاده می کنیم و برخی از مقادیر را تغییر می دهیم.

تم متن را سفارشی کنید

برای وارد کردن فونت ها به پروژه، آنها باید به فایل pubspec.yaml اضافه شوند.

در pubspec.yaml، بلافاصله پس از flutter: برچسب:

  # TODO: Insert Fonts (103)
  fonts:
    - family: Rubik
      fonts:
        - asset: fonts/Rubik-Regular.ttf
        - asset: fonts/Rubik-Medium.ttf
          weight: 500

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

عیب یابی فایل pubspec

در صورت برش و چسباندن اعلان بالا، ممکن است در اجرای pub دریافت با خطا مواجه شوید. اگر خطا دریافت کردید، با حذف فضای سفید اصلی و جایگزینی آن با فاصله با استفاده از تورفتگی 2 فاصله شروع کنید. (دو فاصله قبل

fonts:

، چهار فاصله قبل

family: Rubik

، و غیره.)

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

در login.dart موارد زیر را در Column() تغییر دهید:

Column(
  children: <Widget>[
    Image.asset('assets/diamond.png'),
    const SizedBox(height: 16.0),
    Text(
      'SHRINE',
      style: Theme.of(context).textTheme.headlineSmall,
    ),
  ],
)

در app.dart ، موارد زیر را بعد از _buildShrineTheme() اضافه کنید:

// TODO: Build a Shrine Text Theme (103)
TextTheme _buildShrineTextTheme(TextTheme base) {
  return base
      .copyWith(
        headlineSmall: base.headlineSmall!.copyWith(
          fontWeight: FontWeight.w500,
        ),
        titleLarge: base.titleLarge!.copyWith(
          fontSize: 18.0,
        ),
        bodySmall: base.bodySmall!.copyWith(
          fontWeight: FontWeight.w400,
          fontSize: 14.0,
        ),
        bodyLarge: base.bodyLarge!.copyWith(
          fontWeight: FontWeight.w500,
          fontSize: 16.0,
        ),
      )
      .apply(
        fontFamily: 'Rubik',
        displayColor: kShrineBrown900,
        bodyColor: kShrineBrown900,
      );
}

این یک TextTheme می گیرد و ظاهر سرفصل ها، عنوان ها و زیرنویس ها را تغییر می دهد.

اعمال fontFamily در این روش، تغییرات را فقط در مقادیر مقیاس تایپوگرافی مشخص شده در copyWith() (سربرگ، عنوان، عنوان) اعمال می کند.

برای برخی از فونت‌ها، ما یک fontWeight سفارشی را با افزایش 100 تنظیم می‌کنیم: w500 (وزن 500) با متوسط ​​و w400 مطابق با معمولی است.

از متن جدید t heme s استفاده کنید

پس از خطا، تم های زیر را به _buildShrineTheme اضافه کنید:

// TODO: Add the text themes (103)
textTheme: _buildShrineTextTheme(base.textTheme),
textSelectionTheme: const TextSelectionThemeData(
  selectionColor: kShrinePink100,
),

پروژه خود را ذخیره کنید این بار، برنامه را نیز راه اندازی مجدد کنید (معروف به Hot Restart )، زیرا ما فونت ها را اصلاح کردیم.

اندروید

iOS

صفحه شبکه محصول Shrine با مضامین متنی اعمال شده

متن در صفحه ورود و صفحه اصلی متفاوت به نظر می رسد - برخی از متن ها از فونت روبیک استفاده می کنند و سایر متن ها به جای سیاه یا سفید به رنگ قهوه ای رندر می شوند. آیکون ها نیز به رنگ قهوه ای ارائه می شوند.

متن را کوچک کنید

برچسب ها خیلی بزرگ هستند.

در home.dart ، children: از درونی ترین ستون: 

// TODO: Change innermost Column (103)
children: <Widget>[
// TODO: Handle overflowing labels (103)
  Text(
    product.name,
    style: theme.textTheme.button,
    softWrap: false,
    overflow: TextOverflow.ellipsis,
    maxLines: 1,
  ),
  const SizedBox(height: 4.0),
  Text(
    formatter.format(product.price),
    style: theme.textTheme.bodySmall,
  ),
  // End new code
],

متن را در مرکز قرار دهید و رها کنید

می‌خواهیم برچسب‌ها را در مرکز قرار دهیم و متن را به جای پایین هر تصویر در پایین هر کارت تراز کنیم.

برچسب ها را به انتهای (پایین) محور اصلی منتقل کنید و آنها را در مرکز قرار دهید:

  // TODO: Align labels to the bottom and center (103)
  mainAxisAlignment: MainAxisAlignment.end,
  crossAxisAlignment: CrossAxisAlignment.center,

پروژه خود را ذخیره کنید

اندروید

iOS

صفحه شبکه محصول حرم با تراز متن های مختلف

صفحه شبکه محصول حرم با تراز متن های مختلف

که خیلی بهتر به نظر می رسد.

زمینه فیلدهای متنی

همچنین می‌توانید با یک InputDecorationTheme ، دکوراسیون را در فیلدهای متنی تم کنید.

در app.dart ، در متد _buildShrineTheme() یک inputDecorationTheme: مقدار:

// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
  border: OutlineInputBorder(),
),

در حال حاضر، فیلدهای متن دارای یک تزئین filled است. بیایید آن را حذف کنیم. حذف filled و مشخص کردن inputDecorationTheme به فیلدهای متنی سبک طرح کلی می‌دهد.

در login.dart مقادیر filled: true حذف کنید:

// Remove filled: true values (103)
TextField(
  controller: _usernameController,
  decoration: const InputDecoration(
    // Removed filled: true
    labelText: 'Username',
  ),
),
const SizedBox(height: 12.0),
TextField(
  controller: _passwordController,
  decoration: const InputDecoration(
    // Removed filled: true
    labelText: 'Password',
  ),
  obscureText: true,
),

راه اندازی مجدد داغ. وقتی قسمت نام کاربری فعال است (زمانی که در حال تایپ آن هستید) صفحه ورود شما باید به این شکل باشد:

اندروید

iOS

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

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

در یک فیلد متنی تایپ کنید - حاشیه ها و برچسب های شناور با رنگ اصلی نمایش داده می شوند. اما ما نمی توانیم آن را به راحتی ببینیم. برای افرادی که در تفکیک پیکسل هایی که کنتراست رنگ کافی ندارند، در دسترس نیست. (برای اطلاعات بیشتر، به مقاله راهنمای مواد رنگ و دسترسی مراجعه کنید.)

در app.dart ، یک focusedBorder: زیر inputDecorationTheme:

// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
  border: OutlineInputBorder(),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(
      width: 2.0,
      color: kShrineBrown900,
    ),
  ),
),

سپس یک floatingLabelStyle: در زیر inputDecorationTheme:

// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
  border: OutlineInputBorder(),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(
      width: 2.0,
      color: kShrineBrown900,
    ),
  ),
  floatingLabelStyle: TextStyle(
    color: kShrineBrown900,
  ),
),

در نهایت، اجازه دهید دکمه Cancel از رنگ ثانویه به جای اصلی برای افزایش کنتراست استفاده کند.

TextButton(
  child: const Text('CANCEL'),
  onPressed: () {
    _usernameController.clear();
    _passwordController.clear();
  },
  style: TextButton.styleFrom(
    primary: Theme.of(context).colorScheme.secondary,
  ),
),

پروژه خود را ذخیره کنید

اندروید

iOS

صفحه ورود به حرم با دکمه CANCEL قابل دسترسی

صفحه ورود به حرم با دکمه CANCEL قابل دسترسی

6. ارتفاع را تنظیم کنید

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

ارتفاع دکمه NEXT را تغییر دهید

ارتفاع پیش‌فرض برای ElevatedButton 2 است. بیایید آن را بالاتر ببریم.

در login.dart ، یک style: value را به NEXT ElevatedButton اضافه کنید:

ElevatedButton(
  child: const Text('NEXT'),
  onPressed: () {
    Navigator.pop(context);
  },
  style: ElevatedButton.styleFrom(
    foregroundColor: kShrineBrown900,
    backgroundColor: kShrinePink100,
    elevation: 8.0,
  ),
),

پروژه خود را ذخیره کنید

اندروید

iOS

صفحه ورود به حرم با دکمه NEXT بالا

صفحه ورود به حرم با دکمه NEXT بالا

ارتفاع کارت را تنظیم کنید

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

در home.dart ، یک elevation: value به کارت‌ها اضافه کنید:

// TODO: Adjust card heights (103)
elevation: 0.0,

پروژه را ذخیره کنید.

اندروید

iOS

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

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

شما سایه زیر کارت ها را برداشته اید.

7. شکل اضافه کنید

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

شکل فیلدهای متنی را در صفحه ورود تغییر دهید

در app.dart فایل زیر را وارد کنید:

import 'supplemental/cut_corners_border.dart';

هنوز در app.dart ، طرح زمینه دکوراسیون فیلد نوشتاری را برای استفاده از حاشیه بریده شده تغییر دهید: 

// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
  border: CutCornersBorder(),
  focusedBorder: CutCornersBorder(
    borderSide: BorderSide(
      width: 2.0,
      color: kShrineBrown900,
    ),
  ), 
  floatingLabelStyle: TextStyle(
    color: kShrineBrown900,
  ),
),

شکل دکمه ها را در صفحه ورود تغییر دهید

در login.dart ، یک حاشیه مستطیلی اریب به دکمه CANCEL اضافه کنید:

TextButton(
  child: const Text('CANCEL'),
  onPressed: () {
    _usernameController.clear();
    _passwordController.clear();
  },
  style: TextButton.styleFrom(
    foregroundColor: kShrineBrown900,
    shape: const BeveledRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(7.0)),
    ),
  ),
),

TextButton هیچ شکل قابل مشاهده ای ندارد، پس چرا یک شکل حاشیه اضافه کنید؟ بنابراین انیمیشن ریپل هنگام لمس به همان شکل محدود می شود.

حالا همان شکل را به دکمه NEXT اضافه کنید:

ElevatedButton(
  child: const Text('NEXT'),
  onPressed: () {
    Navigator.pop(context);
  },
  style: ElevatedButton.styleFrom(
    foregroundColor: kShrineBrown900,
    backgroundColor: kShrinePink100,
    elevation: 8.0,
    shape: const BeveledRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(7.0)),
    ),
  ),
),

برای تغییر شکل همه دکمه‌ها، می‌توانیم از elevatedButtonTheme یا textButtonTheme در app.dart استفاده کنیم. که به عنوان یک چالش برای زبان آموز باقی مانده است!

راه اندازی مجدد داغ.

اندروید

iOS

صفحه ورود به حرم با تم شکل اعمال شده است

صفحه ورود به حرم با تم شکل اعمال شده است

8. چیدمان را تغییر دهید

در مرحله بعد، بیایید چیدمان را تغییر دهیم تا کارت ها با نسبت ها و اندازه های مختلف نشان داده شوند، به طوری که هر کارت از کارت های دیگر منحصر به فرد به نظر برسد.

GridView را با AsymmetricView جایگزین کنید

ما قبلاً فایل ها را برای یک چیدمان نامتقارن نوشته ایم.

در home.dart ، وارد کردن زیر را اضافه کنید:

import 'supplemental/asymmetric_view.dart';

_buildGridCards را حذف کنید و body جایگزین کنید:

body: AsymmetricView(
  products: ProductsRepository.loadProducts(Category.all),
),

پروژه را ذخیره کنید.

اندروید

iOS

صفحه محصول عبادتگاه با چیدمان نامتقارن افقی قابل پیمایش

صفحه محصول عبادتگاه با چیدمان نامتقارن افقی قابل پیمایش

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

9. تم دیگری را امتحان کنید (اختیاری)

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

رنگ ها را اصلاح کنید

در colors.dart ، رنگ زیر را اضافه کنید:

const kShrinePurple = Color(0xFF5D1049);

در app.dart ، تابع _buildShrineTheme() را به صورت زیر تغییر دهید:

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    colorScheme: base.colorScheme.copyWith(
      primary: kShrinePurple,
      secondary: kShrinePurple,
      error: kShrineErrorRed,
    ),
    scaffoldBackgroundColor: kShrineSurfaceWhite,
    textSelectionTheme: const TextSelectionThemeData(
      selectionColor: kShrinePurple,
    ),
    appBarTheme: const AppBarTheme(
      foregroundColor: kShrineBrown900,
      backgroundColor: kShrinePink100,
    ),

    inputDecorationTheme: const InputDecorationTheme(
      border: CutCornersBorder(),
      focusedBorder: CutCornersBorder(
        borderSide: BorderSide(
          width: 2.0,
          color: kShrinePurple,
        ),
      ),
      floatingLabelStyle: TextStyle(
        color: kShrinePurple,
      ),
    ),
  );
}

راه اندازی مجدد داغ. اکنون باید موضوع جدید ظاهر شود.

اندروید

iOS

صفحه ورود به حرم با تم بنفش و صورتی

صفحه ورود به حرم با تم بنفش و صورتی

اندروید

iOS

صفحه محصول حرم با موضوع صورتی

صفحه محصول حرم با موضوع صورتی

نتیجه بسیار متفاوت است! بیایید app.dart's _buildShrineTheme به آنچه قبل از این مرحله بود برگردانیم. یا کد شروع 104 را دانلود کنید.

10. تبریک می گویم!

در حال حاضر، شما برنامه ای ایجاد کرده اید که شبیه مشخصات طراحی طراح شما است.

مراحل بعدی

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

فایل‌های موجود در فهرست supplemental را حفاری کنید تا یاد بگیرید که چگونه شبکه‌بندی چیدمان نامتقارن و اسکرول افقی را ساختیم.

اگر طراحی برنامه برنامه ریزی شده شما حاوی عناصری باشد که اجزایی در کتابخانه ندارند چه؟ در MDC-104: Material Advanced Components ما نشان می‌دهیم که چگونه می‌توان اجزای سفارشی را با استفاده از کتابخانه Material Flutter ایجاد کرد تا ظاهر دلخواه را به دست آورد.

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

کاملا موافقم موافقم خنثی مخالف به شدت مخالفم

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

کاملا موافقم موافقم خنثی مخالف به شدت مخالفم