1. ভূমিকা
| ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সাহায্য করে। গুগলের ইঞ্জিনিয়ার এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান রয়েছে এবং এটি অ্যান্ড্রয়েড, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ। |
codelab MDC-101 তে, আপনি একটি লগইন পৃষ্ঠা তৈরি করতে দুটি Material Components ব্যবহার করেছেন: টেক্সট ফিল্ড এবং কালির তরঙ্গ সহ বোতাম। এখন আসুন নেভিগেশন, কাঠামো এবং ডেটা যোগ করে এই ভিত্তিটি আরও বিস্তৃত করি।
তুমি কী তৈরি করবে
এই কোডল্যাবে, আপনি Shrine নামক একটি অ্যাপের জন্য একটি হোম স্ক্রিন তৈরি করবেন, এটি একটি ই-কমার্স অ্যাপ যা পোশাক এবং গৃহস্থালীর জিনিসপত্র বিক্রি করে। এতে থাকবে:
- একটি শীর্ষ অ্যাপ বার
- পণ্যে ভরা একটি গ্রিড তালিকা
অ্যান্ড্রয়েড | আইওএস |
|
|
এই কোডল্যাবে ম্যাটেরিয়াল ফ্লাটার উপাদান এবং সাবসিস্টেম
- শীর্ষ অ্যাপ বার
- গ্রিড
- কার্ড
ফ্লাটার ডেভেলপমেন্টের সাথে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
2. আপনার ফ্লাটার ডেভেলপমেন্ট পরিবেশ সেট আপ করুন
এই ল্যাবটি সম্পূর্ণ করার জন্য আপনার দুটি সফটওয়্যারের প্রয়োজন - ফ্লটার SDK এবং একটি এডিটর ।
আপনি এই ডিভাইসগুলির যেকোনো একটি ব্যবহার করে কোডল্যাব চালাতে পারেন:
- আপনার কম্পিউটারের সাথে সংযুক্ত একটি বাস্তব Android বা iOS ডিভাইস এবং ডেভেলপার মোডে সেট করা আছে।
- iOS সিমুলেটর (Xcode টুল ইনস্টল করার প্রয়োজন)।
- অ্যান্ড্রয়েড এমুলেটর (অ্যান্ড্রয়েড স্টুডিওতে সেটআপ প্রয়োজন)।
- একটি ব্রাউজার (ডিবাগিংয়ের জন্য Chrome প্রয়োজন)।
- উইন্ডোজ , লিনাক্স , অথবা ম্যাকওএস ডেস্কটপ অ্যাপ্লিকেশন হিসেবে। আপনি যে প্ল্যাটফর্মে স্থাপন করার পরিকল্পনা করছেন সেখানেই আপনাকে ডেভেলপ করতে হবে। সুতরাং, যদি আপনি একটি উইন্ডোজ ডেস্কটপ অ্যাপ ডেভেলপ করতে চান, তাহলে উপযুক্ত বিল্ড চেইন অ্যাক্সেস করার জন্য আপনাকে উইন্ডোজেই ডেভেলপ করতে হবে। অপারেটিং সিস্টেম-নির্দিষ্ট প্রয়োজনীয়তা রয়েছে যা docs.flutter.dev/desktop এ বিস্তারিতভাবে বর্ণনা করা হয়েছে।
৩. কোডল্যাব স্টার্টার অ্যাপটি ডাউনলোড করুন
MDC-101 থেকে চালিয়ে যাচ্ছেন?
যদি আপনি MDC-101 সম্পন্ন করে থাকেন, তাহলে আপনার কোডটি এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। ধাপে যান: একটি শীর্ষ অ্যাপ বার যোগ করুন ।
একেবারে শুরু থেকে?
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-flutter-codelabs-102-starter_and_101-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 102-starter_and_101-complete
প্রকল্পটি খুলুন এবং অ্যাপটি চালান।
- আপনার পছন্দের এডিটরে প্রকল্পটি খুলুন।
- আপনার পছন্দের সম্পাদকের জন্য শুরু করুন: টেস্ট ড্রাইভে "অ্যাপটি চালান" নির্দেশাবলী অনুসরণ করুন।
সফল! আপনার ডিভাইসে MDC-101 কোডল্যাব থেকে শ্রাইন লগইন পৃষ্ঠাটি দেখতে পাবেন।
অ্যান্ড্রয়েড | আইওএস |
|
|
এখন যেহেতু লগইন স্ক্রিনটি ভালো দেখাচ্ছে, আসুন অ্যাপটিতে কিছু পণ্য যোগ করি।
৪. একটি শীর্ষ অ্যাপ বার যোগ করুন
এখনই, "পরবর্তী" বোতামে ক্লিক করলে আপনি হোম স্ক্রিনে "তুমি এটা করেছো!" লেখা দেখতে পাবেন। দারুন! কিন্তু এখন আমাদের ব্যবহারকারীদের কোনও পদক্ষেপ নেওয়ার বা অ্যাপে তাদের অবস্থান সম্পর্কে কোনও ধারণা নেই। সাহায্য করার জন্য, নেভিগেশন যোগ করার সময় এসেছে।
ম্যাটেরিয়াল ডিজাইন এমন নেভিগেশন প্যাটার্ন অফার করে যা উচ্চ মাত্রার ব্যবহারযোগ্যতা নিশ্চিত করে। সবচেয়ে দৃশ্যমান উপাদানগুলির মধ্যে একটি হল একটি শীর্ষ অ্যাপ বার।
নেভিগেশন প্রদান করতে এবং ব্যবহারকারীদের অন্যান্য ক্রিয়াকলাপে দ্রুত অ্যাক্সেস দিতে, আসুন একটি শীর্ষ অ্যাপ বার যুক্ত করি।
একটি অ্যাপবার উইজেট যোগ করুন
home.dart এ, স্ক্যাফোল্ডে একটি AppBar যোগ করুন এবং হাইলাইট করা const মুছে ফেলুন:
return const Scaffold(
// TODO: Add app bar (102)
appBar: AppBar(
// TODO: Add buttons and title (102)
),
Scaffold এর appBar: ফিল্ডে AppBar যোগ করলে, আমরা বিনামূল্যে একটি নিখুঁত লেআউট পাব, যেখানে AppBar পৃষ্ঠার উপরে এবং বডি নীচে থাকবে।
একটি টেক্সট উইজেট যোগ করুন
home.dart এ, AppBar এ একটি শিরোনাম যোগ করুন:
// TODO: Add app bar (102)
appBar: AppBar(
// TODO: Add buttons and title (102)
title: const Text('SHRINE'),
// TODO: Add trailing buttons (102)
আপনার প্রকল্পটি সংরক্ষণ করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
অনেক অ্যাপ বারে শিরোনামের পাশে একটি বোতাম থাকে। আসুন আমাদের অ্যাপে একটি মেনু আইকন যোগ করি।
একটি শীর্ষস্থানীয় আইকনবাটন যোগ করুন
home.dart এ থাকাকালীন, AppBar এর leading: ক্ষেত্রের জন্য একটি IconButton সেট করুন। (leading-to-trailing ক্রম অনুকরণ করার জন্য title: ক্ষেত্রের আগে এটি রাখুন):
// TODO: Add buttons and title (102)
leading: IconButton(
icon: const Icon(
Icons.menu,
semanticLabel: 'menu',
),
onPressed: () {
print('Menu button');
},
),
আপনার প্রকল্পটি সংরক্ষণ করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
মেনু আইকনটি (যা "হ্যামবার্গার" নামেও পরিচিত) ঠিক যেখানে আপনি আশা করেছিলেন সেখানেই দেখাবে।
আপনি শিরোনামের শেষ দিকে বোতামও যোগ করতে পারেন। Flutter-এ, এগুলোকে "ক্রিয়া" বলা হয়।
অ্যাকশন যোগ করুন
আরও দুটি আইকনবাটনের জন্য জায়গা আছে।
শিরোনামের পরে অ্যাপবার ইনস্ট্যান্সে এগুলি যুক্ত করুন:
// TODO: Add trailing buttons (102)
actions: <Widget>[
IconButton(
icon: const Icon(
Icons.search,
semanticLabel: 'search',
),
onPressed: () {
print('Search button');
},
),
IconButton(
icon: const Icon(
Icons.tune,
semanticLabel: 'filter',
),
onPressed: () {
print('Filter button');
},
),
],
আপনার প্রকল্পটি সংরক্ষণ করুন। আপনার হোম স্ক্রিনটি এইরকম দেখাবে:
অ্যান্ড্রয়েড | আইওএস |
|
|
এখন অ্যাপটিতে একটি লিডিং বোতাম, একটি শিরোনাম এবং ডানদিকে দুটি অ্যাকশন রয়েছে। অ্যাপ বারটি একটি সূক্ষ্ম ছায়া ব্যবহার করে উচ্চতা প্রদর্শন করে যা দেখায় যে এটি কন্টেন্টের চেয়ে ভিন্ন স্তরে রয়েছে।
৫. একটি গ্রিডে একটি কার্ড যোগ করুন
এখন যেহেতু আমাদের অ্যাপটির কিছু কাঠামো আছে, আসুন আমরা কার্ডগুলিতে রেখে বিষয়বস্তুটি সাজাই।
একটি গ্রিডভিউ যোগ করুন
উপরের অ্যাপ বারের নিচে একটি কার্ড যোগ করে শুরু করা যাক। কার্ড উইজেটটিতেই পর্যাপ্ত তথ্য নেই যেখানে আমরা এটি দেখতে পারি, তাই আমরা এটিকে একটি গ্রিডভিউ উইজেটে ধারণ করতে চাই।
স্ক্যাফোল্ডের বডিতে কেন্দ্রটি একটি গ্রিডভিউ দিয়ে প্রতিস্থাপন করুন:
// TODO: Add a grid view (102)
body: GridView.count(
crossAxisCount: 2,
padding: const EdgeInsets.all(16.0),
childAspectRatio: 8.0 / 9.0,
// TODO: Build a grid of cards (102)
children: <Widget>[Card()],
),
আসুন কোডটি খুলে ফেলি। GridView count() কনস্ট্রাক্টরকে ব্যবহার করে কারণ এটি প্রদর্শিত আইটেমের সংখ্যা গণনাযোগ্য এবং অসীম নয়। কিন্তু এর লেআউট নির্ধারণের জন্য আরও তথ্যের প্রয়োজন।
crossAxisCount: কতগুলি আইটেম জুড়ে আছে তা নির্দিষ্ট করে। আমরা 2টি কলাম চাই।
padding: ফিল্ডটি গ্রিডভিউয়ের চার পাশেই জায়গা করে। অবশ্যই আপনি ট্রেলিং বা নিচের দিকে প্যাডিং দেখতে পাবেন না কারণ তাদের পাশে এখনও কোনও গ্রিডভিউ শিশু নেই।
childAspectRatio: ক্ষেত্রটি আকৃতির অনুপাতের (উচ্চতার চেয়ে প্রস্থ) উপর ভিত্তি করে আইটেমগুলির আকার সনাক্ত করে।
ডিফল্টরূপে, গ্রিডভিউ একই আকারের টাইল তৈরি করে।
আমাদের একটা কার্ড আছে কিন্তু সেটা খালি। আসুন আমাদের কার্ডে চাইল্ড উইজেট যোগ করি।
বিষয়বস্তু লেআউট করুন
কার্ডগুলিতে একটি ছবি, একটি শিরোনাম এবং গৌণ পাঠ্যের জন্য অঞ্চল থাকা উচিত।
গ্রিডভিউয়ের শিশু আপডেট করুন:
// TODO: Build a grid of cards (102)
children: <Widget>[
Card(
clipBehavior: Clip.antiAlias,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
AspectRatio(
aspectRatio: 18.0 / 11.0,
child: Image.asset('assets/diamond.png'),
),
Padding(
padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Title'),
const SizedBox(height: 8.0),
Text('Secondary Text'),
],
),
),
],
),
)
],
এই কোডটি একটি কলাম উইজেট যোগ করে যা চাইল্ড উইজেটগুলিকে উল্লম্বভাবে সাজানোর জন্য ব্যবহৃত হয়।
crossAxisAlignment: field CrossAxisAlignment.start নির্দিষ্ট করে, যার অর্থ "টেক্সটটিকে সামনের প্রান্তে সারিবদ্ধ করা।"
AspectRatio উইজেট নির্ধারণ করে যে ছবিটি কোন ধরণের ছবি সরবরাহ করা হোক না কেন, কোন আকার ধারণ করবে।
প্যাডিংটি পাশ থেকে লেখাটি একটু ভেতরে আনে।
দুটি টেক্সট উইজেট উল্লম্বভাবে স্ট্যাক করা হয়েছে এবং তাদের মধ্যে 8 পয়েন্ট খালি স্থান রয়েছে ( SizedBox )। আমরা প্যাডিংয়ের ভিতরে তাদের রাখার জন্য আরেকটি কলাম তৈরি করি।
আপনার প্রকল্পটি সংরক্ষণ করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
এই প্রিভিউতে, আপনি দেখতে পাবেন কার্ডটি প্রান্ত থেকে ভিতরের দিকে, গোলাকার কোণগুলি সহ, এবং একটি ছায়া (যা কার্ডের উচ্চতা প্রকাশ করে)। সম্পূর্ণ আকৃতিটিকে Material-এ "ধারক" বলা হয়। ( Container নামক প্রকৃত উইজেট ক্লাসের সাথে বিভ্রান্ত হবেন না।)
কার্ডগুলি সাধারণত অন্যান্য কার্ডের সাথে একটি সংগ্রহে দেখানো হয়। আসুন সেগুলিকে একটি গ্রিডে সংগ্রহ হিসাবে সাজিয়ে রাখি।
৬. একটি কার্ড সংগ্রহ করুন
যখনই একটি স্ক্রিনে একাধিক কার্ড উপস্থিত থাকে, তখন সেগুলিকে এক বা একাধিক সংগ্রহে একত্রিত করা হয়। একটি সংগ্রহের কার্ডগুলি সমতল হয়, যার অর্থ কার্ডগুলি একে অপরের মতো একই বিশ্রামের উচ্চতা ভাগ করে নেয় (যদি না কার্ডগুলি তোলা বা টেনে আনা হয়, তবে আমরা এখানে তা করব না)।
কার্ডটিকে একটি সংগ্রহে গুণ করুন
এই মুহূর্তে আমাদের কার্ডটি GridView এর children: ফিল্ডের ইনলাইনে তৈরি করা হয়েছে। এটি অনেক নেস্টেড কোড যা পড়া কঠিন হতে পারে। আসুন এটিকে এমন একটি ফাংশনে এক্সট্র্যাক্ট করি যা যত খুশি খালি কার্ড তৈরি করতে পারে এবং কার্ডগুলির একটি তালিকা প্রদান করে।
build() ফাংশনের উপরে একটি নতুন private ফাংশন তৈরি করুন (মনে রাখবেন যে আন্ডারস্কোর দিয়ে শুরু হওয়া ফাংশনগুলি private API):
// TODO: Make a collection of cards (102)
List<Card> _buildGridCards(int count) {
List<Card> cards = List.generate(
count,
(int index) {
return Card(
clipBehavior: Clip.antiAlias,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
AspectRatio(
aspectRatio: 18.0 / 11.0,
child: Image.asset('assets/diamond.png'),
),
Padding(
padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const <Widget>[
Text('Title'),
SizedBox(height: 8.0),
Text('Secondary Text'),
],
),
),
],
),
);
},
);
return cards;
}
তৈরি হওয়া কার্ডগুলো GridView-এর children ফিল্ডে অ্যাসাইন করুন। GridView-এর সবকিছু এই নতুন কোড দিয়ে প্রতিস্থাপন করতে ভুলবেন না:
// TODO: Add a grid view (102)
body: GridView.count(
crossAxisCount: 2,
padding: const EdgeInsets.all(16.0),
childAspectRatio: 8.0 / 9.0,
children: _buildGridCards(10) // Replace
),
আপনার প্রকল্পটি সংরক্ষণ করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
কার্ডগুলো আছে, কিন্তু সেগুলো এখনও কিছুই দেখায় না। এখন পণ্যের তথ্য যোগ করার সময়।
পণ্যের ডেটা যোগ করুন
অ্যাপটিতে ছবি, নাম এবং দাম সহ কিছু পণ্য রয়েছে। আসুন এটি কার্ডে ইতিমধ্যে থাকা উইজেটগুলিতে যোগ করি।
তারপর, home.dart এ, একটি নতুন প্যাকেজ এবং ডেটা মডেলের জন্য সরবরাহ করা কিছু ফাইল আমদানি করুন:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'model/product.dart';
import 'model/products_repository.dart';
অবশেষে, পণ্যের তথ্য আনতে _buildGridCards() পরিবর্তন করুন, এবং কার্ডগুলিতে সেই ডেটা ব্যবহার করুন:
// TODO: Make a collection of cards (102)
// Replace this entire method
List<Card> _buildGridCards(BuildContext context) {
List<Product> products = ProductsRepository.loadProducts(Category.all);
if (products.isEmpty) {
return const <Card>[];
}
final ThemeData theme = Theme.of(context);
final NumberFormat formatter = NumberFormat.simpleCurrency(
locale: Localizations.localeOf(context).toString());
return products.map((product) {
return Card(
clipBehavior: Clip.antiAlias,
// TODO: Adjust card heights (103)
child: Column(
// TODO: Center items on the card (103)
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
AspectRatio(
aspectRatio: 18 / 11,
child: Image.asset(
product.assetName,
package: product.assetPackage,
// TODO: Adjust the box size (102)
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
child: Column(
// TODO: Align labels to the bottom and center (103)
crossAxisAlignment: CrossAxisAlignment.start,
// TODO: Change innermost Column (103)
children: <Widget>[
// TODO: Handle overflowing labels (103)
Text(
product.name,
style: theme.textTheme.titleLarge,
maxLines: 1,
),
const SizedBox(height: 8.0),
Text(
formatter.format(product.price),
style: theme.textTheme.titleSmall,
),
],
),
),
),
],
),
);
}).toList();
}
দ্রষ্টব্য: এখনও কম্পাইল এবং রান করা হবে না। আমাদের আরও একটি পরিবর্তন আছে।
এছাড়াও, কম্পাইল করার আগে build() ফাংশনটি পরিবর্তন করে BuildContext কে _buildGridCards() এ পাস করুন:
// TODO: Add a grid view (102)
body: GridView.count(
crossAxisCount: 2,
padding: const EdgeInsets.all(16.0),
childAspectRatio: 8.0 / 9.0,
children: _buildGridCards(context) // Changed code
),
অ্যাপটি হট রিস্টার্ট করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
আপনি হয়তো লক্ষ্য করেছেন যে আমরা কার্ডগুলির মধ্যে কোনও উল্লম্ব স্থান যোগ করি না। কারণ, ডিফল্টরূপে, তাদের উপরে এবং নীচে 4 পয়েন্ট মার্জিন থাকে।
আপনার প্রকল্পটি সংরক্ষণ করুন।
পণ্যের তথ্য দেখা যাচ্ছে, কিন্তু ছবিগুলোর চারপাশে অতিরিক্ত জায়গা আছে। ছবিগুলো ডিফল্টভাবে .scaleDown এর BoxFit দিয়ে আঁকা হয় (এই ক্ষেত্রে)। আসুন এটিকে .fitWidth এ পরিবর্তন করি যাতে তারা একটু জুম করে এবং অতিরিক্ত জায়গা মুছে ফেলে।
ছবিতে একটি fit: ফিল্ড যোগ করুন যার মান BoxFit.fitWidth :
// TODO: Adjust the box size (102)
fit: BoxFit.fitWidth,
অ্যান্ড্রয়েড | আইওএস |
|
|
আমাদের পণ্যগুলি এখন অ্যাপে নিখুঁতভাবে দেখা যাচ্ছে!
৭. অভিনন্দন!
আমাদের অ্যাপটিতে একটি মৌলিক প্রবাহ রয়েছে যা ব্যবহারকারীকে লগইন স্ক্রিন থেকে হোম স্ক্রিনে নিয়ে যায়, যেখানে পণ্যগুলি দেখা যায়। মাত্র কয়েকটি লাইন কোডের মাধ্যমে, আমরা একটি শীর্ষ অ্যাপ বার (একটি শিরোনাম এবং তিনটি বোতাম সহ) এবং কার্ড (আমাদের অ্যাপের বিষয়বস্তু উপস্থাপন করার জন্য) যুক্ত করেছি। আমাদের হোম স্ক্রিন এখন সহজ এবং কার্যকরী, একটি মৌলিক কাঠামো এবং কার্যকরী বিষয়বস্তু সহ।
পরবর্তী পদক্ষেপ
উপরের অ্যাপ বার, কার্ড, টেক্সট ফিল্ড এবং বোতামের সাহায্যে আমরা এখন ম্যাটেরিয়াল ফ্লাটার লাইব্রেরি থেকে চারটি মূল উপাদান ব্যবহার করেছি! আপনি ম্যাটেরিয়াল কম্পোনেন্ট উইজেট ক্যাটালগ পরিদর্শন করে আরও অন্বেষণ করতে পারেন।
যদিও এটি সম্পূর্ণরূপে কার্যকর, আমাদের অ্যাপটি এখনও কোনও নির্দিষ্ট ব্র্যান্ড বা দৃষ্টিভঙ্গি প্রকাশ করে না। MDC-103: রঙ, আকৃতি, উচ্চতা এবং প্রকারের সাথে উপাদান নকশা থিমিং -এ , আমরা একটি প্রাণবন্ত, আধুনিক ব্র্যান্ড প্রকাশ করার জন্য এই উপাদানগুলির স্টাইল কাস্টমাইজ করব।