১. ভূমিকা
ম্যাটেরিয়াল ডিজাইন এবং ম্যাটেরিয়াল ফ্লাটার লাইব্রেরি বলতে কী বোঝায়?
ম্যাটেরিয়াল ডিজাইন হলো আকর্ষণীয় ও সুন্দর ডিজিটাল পণ্য তৈরির একটি পদ্ধতি। একগুচ্ছ সুসংহত নীতি ও উপাদানের অধীনে স্টাইল, ব্র্যান্ডিং, ইন্টারঅ্যাকশন এবং মোশনকে একত্রিত করার মাধ্যমে প্রোডাক্ট টিমগুলো তাদের ডিজাইনের সর্বোচ্চ সম্ভাবনাকে কাজে লাগাতে পারে।
ম্যাটেরিয়াল ফ্লাটার লাইব্রেরিতে এমন ফ্লাটার উইজেট রয়েছে যা বিভিন্ন অ্যাপ ও প্ল্যাটফর্মে একটি সামঞ্জস্যপূর্ণ ইউজার এক্সপেরিয়েন্স তৈরি করার জন্য ম্যাটেরিয়াল ডিজাইন কম্পোনেন্ট (সংক্ষেপে MDC )-এর ডিজাইনগুলো বাস্তবায়ন করে। ম্যাটেরিয়াল ডিজাইন সিস্টেমের বিবর্তনের সাথে সাথে, গুগলের ফ্রন্ট-এন্ড ডেভেলপমেন্ট স্ট্যান্ডার্ড মেনে সামঞ্জস্যপূর্ণ ও পিক্সেল-পারফেক্ট বাস্তবায়ন নিশ্চিত করতে এই কম্পোনেন্টগুলোও আপডেট করা হয়।
এই কোডল্যাবে, আপনি ম্যাটেরিয়াল ফ্লাটারের কয়েকটি কম্পোনেন্ট ব্যবহার করে একটি লগইন পেজ তৈরি করবেন।
আপনি যা তৈরি করবেন
এই কোডল্যাবটি চারটি কোডল্যাবের মধ্যে প্রথম, যা আপনাকে ' Shrine' নামক একটি ই-কমার্স অ্যাপ তৈরি করতে নির্দেশনা দেবে। এই অ্যাপটি পোশাক এবং গৃহস্থালির সামগ্রী বিক্রি করে। এতে দেখানো হবে কীভাবে আপনি ম্যাটেরিয়াল ফ্লাটার ব্যবহার করে যেকোনো ব্র্যান্ড বা স্টাইল অনুযায়ী কম্পোনেন্টগুলো কাস্টমাইজ করতে পারেন।
এই কোডল্যাবে, আপনি Shrine-এর জন্য একটি লগইন পেজ তৈরি করবেন যাতে নিম্নলিখিত বিষয়গুলো থাকবে:
- শ্রাইনের লোগোর একটি ছবি
- অ্যাপটির নাম (শ্রাইন)
- দুটি টেক্সট ফিল্ড, একটি ইউজারনেম এবং অন্যটি পাসওয়ার্ড দেওয়ার জন্য।
- দুটি বোতাম
অ্যান্ড্রয়েড | আইওএস |
|
|
এই কোডল্যাবে ম্যাটেরিয়াল ফ্লাটার কম্পোনেন্ট এবং সাবসিস্টেম
- টেক্সট ফিল্ড
- বোতাম
- কালির ঢেউ (স্পর্শজনিত প্রতিক্রিয়ার একটি চাক্ষুষ রূপ)
ফ্লাটার ডেভেলপমেন্টে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
২. আপনার ফ্লাটার ডেভেলপমেন্ট পরিবেশ সেট আপ করুন।
এই ল্যাবটি সম্পন্ন করার জন্য আপনার দুটি সফটওয়্যার প্রয়োজন— ফ্লাটার এসডিকে এবং একটি এডিটর ।
আপনি এই ডিভাইসগুলোর যেকোনো একটি ব্যবহার করে কোডল্যাবটি চালাতে পারেন:
- আপনার কম্পিউটারের সাথে সংযুক্ত এবং ডেভেলপার মোডে সেট করা একটি ফিজিক্যাল অ্যান্ড্রয়েড বা আইওএস ডিভাইস।
- iOS সিমুলেটর (এর জন্য Xcode টুলস ইনস্টল করা প্রয়োজন)।
- অ্যান্ড্রয়েড এমুলেটর (অ্যান্ড্রয়েড স্টুডিওতে সেটআপ করা প্রয়োজন)।
- একটি ব্রাউজার (ডিবাগিংয়ের জন্য ক্রোম আবশ্যক)।
- একটি Windows , Linux , বা macOS ডেস্কটপ অ্যাপ্লিকেশন হিসেবে, আপনাকে অবশ্যই সেই প্ল্যাটফর্মে ডেভেলপ করতে হবে যেখানে আপনি এটি ডেপ্লয় করার পরিকল্পনা করছেন। সুতরাং, আপনি যদি একটি Windows ডেস্কটপ অ্যাপ ডেভেলপ করতে চান, তবে উপযুক্ত বিল্ড চেইন অ্যাক্সেস করার জন্য আপনাকে অবশ্যই Windows-এই ডেভেলপ করতে হবে। অপারেটিং সিস্টেম-ভিত্তিক কিছু নির্দিষ্ট আবশ্যকতা রয়েছে, যা docs.flutter.dev/desktop- এ বিস্তারিতভাবে আলোচনা করা হয়েছে।
৩. কোডল্যাব স্টার্টার অ্যাপটি ডাউনলোড করুন।
স্টার্টার প্রজেক্টটি material-components-flutter-codelabs-101-starter/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 101-starter
প্রজেক্টটি খুলুন এবং অ্যাপটি চালান।
- আপনার পছন্দের এডিটরে প্রজেক্টটি খুলুন।
- আপনার নির্বাচিত এডিটরের জন্য " Get Started: Test drive "-এ থাকা "Run the app" নির্দেশাবলী অনুসরণ করুন।
সফল! Shrine-এর লগইন পেজের স্টার্টার কোডটি আপনার ডিভাইসে চালু হয়ে যাওয়ার কথা। আপনি Shrine-এর লোগো এবং তার ঠিক নিচে "Shrine" নামটি দেখতে পাবেন।
অ্যান্ড্রয়েড | আইওএস |
|
|
চলুন কোডটি দেখি।
login.dart এর উইজেটসমূহ
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স্টেটমেন্টটি এই ফাইলে ম্যাটেরিয়াল লাইব্রেরি ব্যবহারের সুযোগ দেয়। -
LoginPageক্লাসটি সিমুলেটরে প্রদর্শিত সম্পূর্ণ পৃষ্ঠাটিকে প্রতিনিধিত্ব করে। -
_LoginPageStateক্লাসেরbuild()ফাংশনটি আমাদের UI-এর সমস্ত উইজেট কীভাবে তৈরি হবে তা নিয়ন্ত্রণ করে।
৪. টেক্সটফিল্ড উইজেট যোগ করুন
শুরুতে, আমরা আমাদের লগইন পেজে দুটি টেক্সট ফিল্ড যোগ করব, যেখানে ব্যবহারকারীরা তাদের ইউজারনেম এবং পাসওয়ার্ড লিখবেন। আমরা TextField উইজেটটি ব্যবহার করব, যা একটি ফ্লোটিং লেবেল প্রদর্শন করে এবং একটি টাচ রিপল সক্রিয় করে।
এই পৃষ্ঠাটি মূলত একটি ListView দিয়ে গঠিত, যা এর চাইল্ড এলিমেন্টগুলোকে একটি স্ক্রলযোগ্য কলামে সাজিয়ে রাখে। চলুন নিচে টেক্সট ফিল্ডগুলো রাখি।
টেক্সটফিল্ড উইজেটগুলো যোগ করুন
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 ভ্যালুটি ব্যবহারকারীর টাইপ করা ইনপুটকে স্বয়ংক্রিয়ভাবে বুলেট দিয়ে প্রতিস্থাপন করে, যা পাসওয়ার্ডের জন্য উপযুক্ত।
আপনার প্রজেক্টটি সেভ করুন (কমান্ড + এস কী-স্ট্রোকের মাধ্যমে), যা একটি হট রিলোড সম্পন্ন করবে।
এখন আপনি ইউজারনেম এবং পাসওয়ার্ডের জন্য দুটি টেক্সট ফিল্ডসহ একটি পেজ দেখতে পাবেন! ফ্লোটিং লেবেল অ্যানিমেশনটি দেখুন:
অ্যান্ড্রয়েড | আইওএস |
|
|
৫. বাটন যোগ করুন
এরপরে, আমরা আমাদের লগইন পেজে দুটি বাটন যোগ করব: 'Cancel' এবং 'Next'। আমরা দুই ধরনের বাটন উইজেট ব্যবহার করব: TextButton এবং ElevatedButton ।
ওভারফ্লোবার যোগ করুন
টেক্সট ফিল্ডগুলোর পরে, ListView এর চাইল্ডগুলোতে OverflowBar যোগ করুন:
// 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 তার চাইল্ডগুলোকে একটি সারিতে সাজিয়ে রাখে।
বোতামগুলো যোগ করুন
এরপর OverflowBar এর children লিস্টে দুটি বাটন যোগ করুন:
// 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: field-এ, _usernameController সেট করুন:
// TODO: Add TextField widgets (101)
// [Name]
TextField(
controller: _usernameController,
দ্বিতীয় টেক্সট ফিল্ডের controller: field-এ, এখন _passwordController সেট করুন:
// TODO: Add TextField widgets (101)
// [Password]
TextField(
controller: _passwordController,
সম্পাদনা করুন প্রেসড
TextButton-এর onPressed: ফাংশনে প্রতিটি কন্ট্রোলার ক্লিয়ার করার জন্য একটি কমান্ড যোগ করুন:
// TODO: Clear the text fields (101)
_usernameController.clear();
_passwordController.clear();
আপনার প্রজেক্টটি সেভ করুন। এখন থেকে টেক্সট ফিল্ডগুলোতে কিছু টাইপ করার পর ক্যানসেল চাপলে প্রতিটি ফিল্ড আবার খালি হয়ে যাবে।
এই লগইন ফর্মটি ঠিক আছে! চলুন আমাদের ব্যবহারকারীদের শ্রাইন অ্যাপের বাকি অংশে নিয়ে যাই।
পপ
এই ভিউটি বাতিল করতে, আমরা এই পেজটিকে (ফ্লাটার যাকে রুট বলে) নেভিগেশন স্ট্যাক থেকে পপ (বা সরিয়ে) করতে চাই।
ElevatedButton-এর onPressed: ফাংশনে, 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,
);
এটি নিশ্চিত করে যে কীবোর্ডের চেহারা হোম পেজ বা এর উইজেটগুলোর আকার পরিবর্তন করে না।
ব্যাস! আপনার প্রজেক্টটি সেভ করুন। এবার 'Next'-এ ক্লিক করুন।
তুমি পেরেছো!
অ্যান্ড্রয়েড | আইওএস |
|
|
এই স্ক্রিনটি আমাদের পরবর্তী কোডল্যাবের সূচনা বিন্দু, যেটি নিয়ে আপনারা MDC-102-এ কাজ করবেন।
৬. অভিনন্দন!
আমরা টেক্সট ফিল্ড ও বাটন যোগ করেছি এবং লেআউট কোড নিয়ে তেমন ভাবতেই হয়নি। ফ্লাটারের ম্যাটেরিয়াল কম্পোনেন্টগুলো প্রচুর স্টাইল নিয়ে আসে এবং প্রায় অনায়াসেই স্ক্রিনে স্থাপন করা যায়।
পরবর্তী পদক্ষেপ
টেক্সট ফিল্ড এবং বাটন হলো ম্যাটেরিয়াল সিস্টেমের দুটি মূল উপাদান, কিন্তু আরও অনেক কিছু আছে! আপনি ম্যাটেরিয়াল কম্পোনেন্টস উইজেট ক্যাটালগেও বাকিগুলো দেখতে পারেন।
বিকল্পভাবে, ফ্লাটারের জন্য MDC-102-এ আলোচিত উপাদানগুলো সম্পর্কে জানতে MDC-102: ম্যাটেরিয়াল ডিজাইন স্ট্রাকচার অ্যান্ড লেআউট- এ যান।