১. ভূমিকা
| ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়ন করতে সাহায্য করে। গুগলের একদল ইঞ্জিনিয়ার এবং ইউএক্স ডিজাইনার দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI কম্পোনেন্ট রয়েছে এবং এটি অ্যান্ড্রয়েড, আইওএস, ওয়েব এবং ফ্লাটারের জন্য উপলব্ধ। material.io/develop |
কোডল্যাব MDC-101- এ, আপনি একটি লগইন পেজ তৈরি করতে দুটি ম্যাটেরিয়াল কম্পোনেন্ট ব্যবহার করেছিলেন: টেক্সট ফিল্ড এবং ইঙ্ক রিপলযুক্ত বাটন। এখন চলুন নেভিগেশন, স্ট্রাকচার এবং ডেটা যোগ করে এই ভিত্তিটিকে আরও বিস্তৃত করি।
আপনি যা তৈরি করবেন
এই কোডল্যাবে, আপনি Shrine নামক একটি অ্যাপের জন্য একটি হোম স্ক্রিন তৈরি করবেন, যেটি পোশাক এবং গৃহস্থালীর সামগ্রী বিক্রি করে এমন একটি ই-কমার্স অ্যাপ। এতে থাকবে:
- একটি শীর্ষ অ্যাপ বার
- পণ্যে পূর্ণ একটি গ্রিড তালিকা
অ্যান্ড্রয়েড | আইওএস |
|
|
এই কোডল্যাবে ম্যাটেরিয়াল ফ্লাটার কম্পোনেন্ট এবং সাবসিস্টেম
- শীর্ষ অ্যাপ বার
- গ্রিড
- কার্ড
ফ্লাটার ডেভেলপমেন্টে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
২. আপনার ফ্লাটার ডেভেলপমেন্ট পরিবেশ সেট আপ করুন।
এই ল্যাবটি সম্পন্ন করার জন্য আপনার দুটি সফটওয়্যার প্রয়োজন— ফ্লাটার এসডিকে এবং একটি এডিটর ।
আপনি এই ডিভাইসগুলোর যেকোনো একটি ব্যবহার করে কোডল্যাবটি চালাতে পারেন:
- আপনার কম্পিউটারের সাথে সংযুক্ত এবং ডেভেলপার মোডে সেট করা একটি ফিজিক্যাল অ্যান্ড্রয়েড বা আইওএস ডিভাইস।
- iOS সিমুলেটর (এর জন্য Xcode টুলস ইনস্টল করা প্রয়োজন)।
- অ্যান্ড্রয়েড এমুলেটর (অ্যান্ড্রয়েড স্টুডিওতে সেটআপ করা প্রয়োজন)।
- একটি ব্রাউজার (ডিবাগিংয়ের জন্য ক্রোম আবশ্যক)।
- একটি Windows , Linux , বা macOS ডেস্কটপ অ্যাপ্লিকেশন হিসেবে, আপনাকে অবশ্যই সেই প্ল্যাটফর্মে ডেভেলপ করতে হবে যেখানে আপনি এটি ডেপ্লয় করার পরিকল্পনা করছেন। সুতরাং, আপনি যদি একটি Windows ডেস্কটপ অ্যাপ ডেভেলপ করতে চান, তবে উপযুক্ত বিল্ড চেইন অ্যাক্সেস করার জন্য আপনাকে অবশ্যই Windows-এই ডেভেলপ করতে হবে। অপারেটিং সিস্টেম-ভিত্তিক কিছু নির্দিষ্ট আবশ্যকতা রয়েছে, যা docs.flutter.dev/desktop- এ বিস্তারিতভাবে আলোচনা করা হয়েছে।
৩. কোডল্যাব স্টার্টার অ্যাপটি ডাউনলোড করুন।
MDC-101 এর পর কি?
আপনি যদি MDC-101 সম্পন্ন করে থাকেন, তাহলে আপনার কোড এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। সরাসরি এই ধাপে যান: একটি টপ অ্যাপ বার যোগ করুন ।
একেবারে নতুন করে শুরু করছেন?
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-flutter-codelabs-102-starter_and_101-complete/mdc_100_series ডিরেক্টরিতে অবস্থিত।
...অথবা গিটহাব থেকে এটি ক্লোন করুন
গিটহাব থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলো চালান:
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
প্রজেক্টটি খুলুন এবং অ্যাপটি চালান।
- আপনার পছন্দের এডিটরে প্রজেক্টটি খুলুন।
- আপনার নির্বাচিত এডিটরের জন্য " Get Started: Test drive "-এ থাকা "Run the app" নির্দেশাবলী অনুসরণ করুন।
সফল! আপনি আপনার ডিভাইসে MDC-101 কোডল্যাবের Shrine লগইন পেজটি দেখতে পাবেন।
অ্যান্ড্রয়েড | আইওএস |
|
|
এখন যেহেতু লগইন স্ক্রিনটা দেখতে ভালো লাগছে, চলুন অ্যাপটিতে কিছু পণ্য যোগ করি।
৪. উপরে একটি অ্যাপ বার যোগ করুন
এই মুহূর্তে, আপনি 'Next' বোতামে ক্লিক করলে হোম স্ক্রিনটি দেখতে পাবেন, যেখানে লেখা থাকবে 'You did it!'। এটা চমৎকার! কিন্তু এখন আমাদের ব্যবহারকারীর করার মতো কোনো কাজ নেই, বা অ্যাপের মধ্যে তিনি কোথায় আছেন, সে সম্পর্কেও কোনো ধারণা নেই। এই সমস্যা সমাধানে, এখন নেভিগেশন যোগ করার সময় এসেছে।
ম্যাটেরিয়াল ডিজাইন এমন নেভিগেশন প্যাটার্ন প্রদান করে যা উচ্চ মাত্রার ব্যবহারযোগ্যতা নিশ্চিত করে। এর সবচেয়ে দৃশ্যমান উপাদানগুলোর মধ্যে একটি হলো টপ অ্যাপ বার।
নেভিগেশনের সুবিধা দিতে এবং ব্যবহারকারীদের অন্যান্য কাজে দ্রুত অ্যাক্সেস করার জন্য, চলুন একটি টপ অ্যাপ বার যোগ করি।
একটি অ্যাপবার উইজেট যোগ করুন
home.dart এ, Scaffold-এ একটি AppBar যোগ করুন এবং হাইলাইট করা const : সরিয়ে দিন।
return const Scaffold(
// TODO: Add app bar (102)
appBar: AppBar(
// TODO: Add buttons and title (102)
),
স্ক্যাফোল্ডের ` 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 সেট করুন। (লিডিং-টু-ট্রেইলিং ক্রম অনুকরণ করতে এটিকে title: ফিল্ডের আগে রাখুন):
// TODO: Add buttons and title (102)
leading: IconButton(
icon: const Icon(
Icons.menu,
semanticLabel: 'menu',
),
onPressed: () {
print('Menu button');
},
),
আপনার প্রজেক্টটি সংরক্ষণ করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
মেনু আইকনটি (যা 'হ্যামবার্গার' নামেও পরিচিত) ঠিক সেখানেই দেখা যায়, যেখানে আপনি আশা করেন।
আপনি টাইটেলের শেষেও বাটন যোগ করতে পারেন। ফ্লাটারে এগুলোকে "অ্যাকশন" বলা হয়।
অ্যাকশন যোগ করুন
আরও দুটি আইকনবাটন বসানোর জায়গা আছে।
শিরোনামের পরে AppBar ইনস্ট্যান্সে সেগুলোকে যোগ করুন:
// 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: এটি আড়াআড়িভাবে কতগুলো আইটেম থাকবে তা নির্দিষ্ট করে। আমরা ২টি কলাম চাই।
` padding: ` ফিল্ডটি GridView-এর চারদিকে ফাঁকা জায়গা তৈরি করে। স্বাভাবিকভাবেই, আপনি পেছনের বা নিচের দিকে প্যাডিং দেখতে পাবেন না, কারণ সেগুলোর পাশে এখনও কোনো GridView চাইল্ড নেই।
` childAspectRatio: ` ফিল্ডটি একটি অ্যাসপেক্ট রেশিও (প্রস্থ ও উচ্চতার অনুপাত)-এর উপর ভিত্তি করে আইটেমগুলোর আকার নির্ধারণ করে।
ডিফল্টরূপে, গ্রিডভিউ একই আকারের টাইল তৈরি করে।
আমাদের একটি কার্ড আছে কিন্তু সেটি খালি। চলুন আমাদের কার্ডটিতে চাইল্ড উইজেট যোগ করি।
বিষয়বস্তুগুলো সাজিয়ে নিন
কার্ডগুলোতে একটি ছবি, একটি শিরোনাম এবং প্রাসঙ্গিক লেখার জন্য জায়গা থাকা উচিত।
GridView-এর চাইল্ডগুলো আপডেট করুন:
// 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 উইজেটটি ছবির আকৃতি নির্ধারণ করে।
প্যাডিং লেখাটিকে পাশ থেকে কিছুটা ভেতরের দিকে টেনে আনে।
দুটি টেক্সট উইজেটকে উল্লম্বভাবে সাজানো হয়েছে এবং তাদের মাঝে ৮ পয়েন্টের ফাঁকা জায়গা ( সাইজডবক্স ) রাখা হয়েছে। সেগুলোকে প্যাডিংয়ের ভেতরে রাখার জন্য আমরা আরেকটি কলাম তৈরি করি।
আপনার প্রজেক্টটি সংরক্ষণ করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
এই প্রিভিউতে আপনি দেখতে পাচ্ছেন যে, কার্ডটি কিনারা থেকে কিছুটা ভেতরের দিকে বসানো, এর কোণাগুলো গোলাকার এবং একটি ছায়া রয়েছে (যা কার্ডটির উচ্চতা প্রকাশ করে)। ম্যাটেরিয়াল সিস্টেমে এই সম্পূর্ণ আকৃতিটিকে 'কন্টেইনার' বলা হয়। (আসল উইজেট ক্লাস ' কন্টেইনার' -এর সাথে এটিকে গুলিয়ে ফেলবেন না।)
কার্ডগুলো সাধারণত অন্যান্য কার্ডের সাথে একসাথে দেখানো হয়। চলো, এগুলোকে একসাথে একটি গ্রিডে সাজিয়ে নিই।
৬. একটি কার্ড সংগ্রহ তৈরি করুন।
যখন একটি স্ক্রিনে একাধিক কার্ড উপস্থিত থাকে, তখন সেগুলোকে এক বা একাধিক সংগ্রহে একত্রিত করা হয়। একটি সংগ্রহের কার্ডগুলো সমতলীয় হয়, অর্থাৎ কার্ডগুলোর স্বাভাবিক উচ্চতা একে অপরের সমান থাকে (যদি না কার্ডগুলো তুলে নেওয়া হয় বা টেনে সরানো হয়, কিন্তু আমরা এখানে তা করব না)।
কার্ডগুলোকে একটি সংগ্রহে গুণ করুন
এই মুহূর্তে আমাদের কার্ডটি GridView-এর children: ফিল্ডের ভেতরে ইনলাইনে তৈরি করা হচ্ছে। এতে অনেক বেশি নেস্টেড কোড রয়েছে যা পড়া কঠিন হতে পারে। চলুন, এটিকে এমন একটি ফাংশনে নিয়ে আসি যা আমাদের ইচ্ছামতো খালি কার্ড তৈরি করতে পারবে এবং কার্ডের একটি লিস্ট রিটার্ন করবে।
build() ফাংশনের উপরে একটি নতুন প্রাইভেট ফাংশন তৈরি করুন (মনে রাখবেন যে আন্ডারস্কোর দিয়ে শুরু হওয়া ফাংশনগুলি প্রাইভেট 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() ফাংশনটি পরিবর্তন করে _buildGridCards() ফাংশনে BuildContext পাস করুন:
// 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
),
অ্যাপটি হট রিস্টার্ট করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
আপনি হয়তো লক্ষ্য করেছেন যে আমরা কার্ডগুলোর মধ্যে কোনো উল্লম্ব ফাঁকা জায়গা রাখি না। এর কারণ হলো, এগুলোর উপরে এবং নিচে ডিফল্টভাবেই ৪ পয়েন্ট মার্জিন থাকে।
আপনার প্রজেক্টটি সংরক্ষণ করুন।
পণ্যের ডেটা দেখা যাচ্ছে, কিন্তু ছবিগুলোর চারপাশে অতিরিক্ত ফাঁকা জায়গা থাকছে। ছবিগুলো ডিফল্টভাবে (এই ক্ষেত্রে) .scaleDown BoxFit দিয়ে আঁকা হয়। চলুন, এটিকে .fitWidth এ পরিবর্তন করি, যাতে ছবিগুলো কিছুটা জুম ইন হয় এবং অতিরিক্ত ফাঁকা জায়গাটি দূর হয়ে যায়।
ছবিতে BoxFit.fitWidth মান সহ একটি fit: ফিল্ড যোগ করুন:
// TODO: Adjust the box size (102)
fit: BoxFit.fitWidth,
অ্যান্ড্রয়েড | আইওএস |
|
|
আমাদের পণ্যগুলো এখন অ্যাপে একদম নিখুঁতভাবে দেখা যাচ্ছে!
৭. অভিনন্দন!
আমাদের অ্যাপটির একটি সাধারণ কার্যপ্রণালী রয়েছে, যা ব্যবহারকারীকে লগইন স্ক্রিন থেকে হোম স্ক্রিনে নিয়ে যায়, যেখানে পণ্যগুলো দেখা যায়। মাত্র কয়েকটি কোড লাইনে আমরা একটি টপ অ্যাপ বার (একটি শিরোনাম ও তিনটি বাটন সহ) এবং কার্ড (আমাদের অ্যাপের বিষয়বস্তু উপস্থাপনের জন্য) যুক্ত করেছি। আমাদের হোম স্ক্রিনটি এখন একটি সাধারণ কাঠামো এবং ব্যবহারযোগ্য বিষয়বস্তু সহ সহজ ও কার্যকরী।
পরবর্তী পদক্ষেপ
টপ অ্যাপ বার, কার্ড, টেক্সট ফিল্ড এবং বাটনের মাধ্যমে আমরা এখন ম্যাটেরিয়াল ফ্লাটার লাইব্রেরির চারটি মূল কম্পোনেন্ট ব্যবহার করেছি! আপনি ম্যাটেরিয়াল কম্পোনেন্টস উইজেটস ক্যাটালগ ভিজিট করে আরও অনেক কিছু দেখতে পারেন।
যদিও আমাদের অ্যাপটি সম্পূর্ণরূপে কার্যকর, এটি এখনও কোনো নির্দিষ্ট ব্র্যান্ড বা দৃষ্টিভঙ্গি প্রকাশ করে না। MDC-103: Material Design Theming with Color, Shape, Elevation and Type কোর্সে , আমরা একটি প্রাণবন্ত ও আধুনিক ব্র্যান্ড ফুটিয়ে তোলার জন্য এই উপাদানগুলোর স্টাইল কাস্টমাইজ করব।