MDC-101 ফ্লাটার: মেটেরিয়াল কম্পোনেন্টস বেসিক

1. ভূমিকা

ম্যাটেরিয়াল ডিজাইন এবং ম্যাটেরিয়াল ফ্লাটার লাইব্রেরি কী?

ম্যাটেরিয়াল ডিজাইন হলো সাহসী এবং সুন্দর ডিজিটাল পণ্য তৈরির একটি ব্যবস্থা। নীতি এবং উপাদানগুলির একটি সুসংগত সেটের অধীনে স্টাইল, ব্র্যান্ডিং, মিথস্ক্রিয়া এবং গতিকে একত্রিত করে, পণ্য দলগুলি তাদের সর্বাধিক নকশা সম্ভাবনা উপলব্ধি করতে পারে।

ম্যাটেরিয়াল ফ্লাটার লাইব্রেরিতে ফ্লাটার উইজেট রয়েছে যা অ্যাপ এবং প্ল্যাটফর্মগুলিতে একটি সামঞ্জস্যপূর্ণ ব্যবহারকারীর অভিজ্ঞতা তৈরি করার জন্য ম্যাটেরিয়াল ডিজাইন উপাদানগুলির (সংক্ষেপে MDC ) নকশা বাস্তবায়ন করে। ম্যাটেরিয়াল ডিজাইন সিস্টেম বিকশিত হওয়ার সাথে সাথে, এই উপাদানগুলি গুগলের ফ্রন্ট-এন্ড ডেভেলপমেন্ট মান মেনে সামঞ্জস্যপূর্ণ পিক্সেল-নিখুঁত বাস্তবায়ন নিশ্চিত করার জন্য আপডেট করা হয়।

এই কোডল্যাবে, আপনি ম্যাটেরিয়াল ফ্লটারের বেশ কয়েকটি উপাদান ব্যবহার করে একটি লগইন পৃষ্ঠা তৈরি করবেন।

তুমি কী তৈরি করবে

এই কোডল্যাবটি চারটি কোডল্যাবের মধ্যে প্রথম যা আপনাকে শ্রাইন নামে একটি অ্যাপ তৈরিতে সহায়তা করবে, এটি একটি ই-কমার্স অ্যাপ যা পোশাক এবং গৃহস্থালীর জিনিসপত্র বিক্রি করে। এটি প্রদর্শন করবে কিভাবে আপনি ম্যাটেরিয়াল ফ্লটার ব্যবহার করে যেকোনো ব্র্যান্ড বা স্টাইল প্রতিফলিত করার জন্য উপাদানগুলিকে কাস্টমাইজ করতে পারেন।

এই কোডল্যাবে, আপনি Shrine-এর জন্য একটি লগইন পৃষ্ঠা তৈরি করবেন যাতে থাকবে:

  • মন্দিরের লোগোর একটি ছবি
  • অ্যাপটির নাম (শ্রাইন)
  • দুটি টেক্সট ফিল্ড, একটি ব্যবহারকারীর নাম লেখার জন্য এবং অন্যটি পাসওয়ার্ড দেওয়ার জন্য
  • দুটি বোতাম

অ্যান্ড্রয়েড

আইওএস

অ্যান্ড্রয়েডে শ্রাইন লগইন পৃষ্ঠা

iOS-এ শ্রাইন লগইন পৃষ্ঠা

এই কোডল্যাবে ম্যাটেরিয়াল ফ্লাটার উপাদান এবং সাবসিস্টেম

  • টেক্সট ফিল্ড
  • বোতাম
  • কালি লহরী (স্পর্শ ইভেন্টের জন্য প্রতিক্রিয়ার একটি দৃশ্যমান রূপ)

ফ্লাটার ডেভেলপমেন্টের সাথে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?

নবীন মধ্যবর্তী দক্ষ

2. আপনার ফ্লাটার ডেভেলপমেন্ট পরিবেশ সেট আপ করুন

এই ল্যাবটি সম্পূর্ণ করার জন্য আপনার দুটি সফটওয়্যারের প্রয়োজন - ফ্লটার SDK এবং একটি এডিটর ।

আপনি এই ডিভাইসগুলির যেকোনো একটি ব্যবহার করে কোডল্যাব চালাতে পারেন:

  • আপনার কম্পিউটারের সাথে সংযুক্ত একটি বাস্তব Android বা iOS ডিভাইস এবং ডেভেলপার মোডে সেট করা আছে।
  • iOS সিমুলেটর (Xcode টুল ইনস্টল করার প্রয়োজন)।
  • অ্যান্ড্রয়েড এমুলেটর (অ্যান্ড্রয়েড স্টুডিওতে সেটআপ প্রয়োজন)।
  • একটি ব্রাউজার (ডিবাগিংয়ের জন্য Chrome প্রয়োজন)।
  • উইন্ডোজ , লিনাক্স , অথবা ম্যাকওএস ডেস্কটপ অ্যাপ্লিকেশন হিসেবে। আপনি যে প্ল্যাটফর্মে স্থাপন করার পরিকল্পনা করছেন সেখানেই আপনাকে ডেভেলপ করতে হবে। সুতরাং, যদি আপনি একটি উইন্ডোজ ডেস্কটপ অ্যাপ ডেভেলপ করতে চান, তাহলে উপযুক্ত বিল্ড চেইন অ্যাক্সেস করার জন্য আপনাকে উইন্ডোজেই ডেভেলপ করতে হবে। অপারেটিং সিস্টেম-নির্দিষ্ট প্রয়োজনীয়তা রয়েছে যা docs.flutter.dev/desktop এ বিস্তারিতভাবে বর্ণনা করা হয়েছে।

৩. কোডল্যাব স্টার্টার অ্যাপটি ডাউনলোড করুন

স্টার্টার প্রজেক্টটি 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

প্রকল্পটি খুলুন এবং অ্যাপটি চালান।

  1. আপনার পছন্দের এডিটরে প্রকল্পটি খুলুন।
  2. আপনার পছন্দের সম্পাদকের জন্য শুরু করুন: টেস্ট ড্রাইভে "অ্যাপটি চালান" নির্দেশাবলী অনুসরণ করুন।

সফল! আপনার ডিভাইসে শ্রাইনের লগইন পৃষ্ঠার স্টার্টার কোডটি চলমান থাকা উচিত। আপনি শ্রাইনের লোগো এবং তার ঠিক নীচে "শ্রাইন" নামটি দেখতে পাবেন।

অ্যান্ড্রয়েড

আইওএস

মন্দিরের লোগো

মন্দিরের লোগো

কোডটি দেখা যাক।

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-তে সমস্ত উইজেট কীভাবে তৈরি করা হয় তা নিয়ন্ত্রণ করে।

৪. টেক্সটফিল্ড উইজেট যোগ করুন

শুরু করার জন্য, আমরা আমাদের লগইন পৃষ্ঠায় দুটি টেক্সট ফিল্ড যুক্ত করব, যেখানে ব্যবহারকারীরা তাদের ব্যবহারকারীর নাম এবং পাসওয়ার্ড লিখবেন। আমরা টেক্সটফিল্ড উইজেট ব্যবহার করব, যা একটি ভাসমান লেবেল প্রদর্শন করে এবং একটি স্পর্শ রিপল সক্রিয় করে।

এই পৃষ্ঠাটি মূলত একটি 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 মান স্বয়ংক্রিয়ভাবে ব্যবহারকারীর টাইপ করা ইনপুটকে বুলেট দিয়ে প্রতিস্থাপন করে, যা পাসওয়ার্ডের জন্য উপযুক্ত।

আপনার প্রকল্পটি সংরক্ষণ করুন (কীস্ট্রোক: কমান্ড + s দিয়ে) যা একটি Hot Reload সম্পাদন করে।

এখন তুমি ইউজারনেম এবং পাসওয়ার্ডের জন্য দুটি টেক্সট ফিল্ড সহ একটি পৃষ্ঠা দেখতে পাবে! ভাসমান লেবেল অ্যানিমেশনটি দেখুন:

অ্যান্ড্রয়েড

আইওএস

ব্যবহারকারীর নাম এবং পাসওয়ার্ড ক্ষেত্র সহ মন্দিরের লোগো

৫. বোতাম যোগ করুন

এরপর, আমরা আমাদের লগইন পৃষ্ঠায় দুটি বোতাম যুক্ত করব: "বাতিল করুন" এবং "পরবর্তী।" আমরা দুই ধরণের বোতাম উইজেট ব্যবহার করব: 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 এর 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 আপনার জন্য লেআউটের কাজ পরিচালনা করে। এটি বোতামগুলিকে অনুভূমিকভাবে অবস্থান করে, যাতে সেগুলি পাশাপাশি প্রদর্শিত হয়।

একটি বোতাম স্পর্শ করলে একটি কালি রিপল অ্যানিমেশন শুরু হয়, অন্য কিছু না ঘটলেও। আসুন anonymous onPressed: ফাংশনে কার্যকারিতা যোগ করি, যাতে cancel বাটনটি টেক্সট ফিল্ডগুলি সাফ করে এবং পরবর্তী বোতামটি স্ক্রিনটি বাতিল করে:

টেক্সটএডিটিংকন্ট্রোলার যোগ করুন

টেক্সট ফিল্ডের মানগুলি সাফ করা সম্ভব করার জন্য, আমরা তাদের টেক্সট নিয়ন্ত্রণ করার জন্য 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,

চাপা অবস্থায় সম্পাদনা করুন

TextButton এর onPressed: ফাংশনে প্রতিটি কন্ট্রোলার সাফ করার জন্য একটি কমান্ড যোগ করুন:

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

আপনার প্রকল্পটি সংরক্ষণ করুন। এখন যখন আপনি টেক্সট ফিল্ডে কিছু টাইপ করবেন, তখন বাতিল টিপলে প্রতিটি ফিল্ড আবার পরিষ্কার হয়ে যাবে।

এই লগইন ফর্মটি ভালো অবস্থায় আছে! আসুন আমাদের ব্যবহারকারীদের শ্রাইন অ্যাপের বাকি অংশে এগিয়ে নিয়ে যাই।

পপ

এই ভিউটি খারিজ করার জন্য, আমরা এই পৃষ্ঠাটি (যাকে Flutter একটি route বলে) নেভিগেশন স্ট্যাক থেকে পপ (অথবা অপসারণ) করতে চাই।

ElevatedButton এর onPressed: ফাংশনে, ন্যাভিগেটর থেকে সাম্প্রতিকতম রুটটি পপ করুন: 

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

এটি করার ফলে নিশ্চিত হয় যে কীবোর্ডের চেহারা হোম পেজ বা এর উইজেটের আকার পরিবর্তন করে না।

ব্যস! আপনার প্রোজেক্টটি সংরক্ষণ করুন। এগিয়ে যান এবং "পরবর্তী" ক্লিক করুন।

তুমি এটা করেছো!

অ্যান্ড্রয়েড

আইওএস

'তুমি এটা করেছো' লেখা স্ক্রিন

'তুমি এটা করেছো' লেখা স্ক্রিন

এই স্ক্রিনটি আমাদের পরবর্তী কোডল্যাবের সূচনা বিন্দু, যা আপনি MDC-102 তে কাজ করবেন।

৬. অভিনন্দন!

আমরা টেক্সট ফিল্ড এবং বোতাম যোগ করেছি এবং লেআউট কোড বিবেচনা করতে হয়নি। ফ্লটারের জন্য ম্যাটেরিয়াল কম্পোনেন্টগুলি অনেক স্টাইলের সাথে আসে এবং প্রায় অনায়াসে স্ক্রিনে স্থাপন করা যায়।

পরবর্তী পদক্ষেপ

টেক্সট ফিল্ড এবং বোতাম হল ম্যাটেরিয়াল সিস্টেমের দুটি মূল উপাদান, কিন্তু আরও অনেক কিছু আছে! আপনি বাকিগুলো ম্যাটেরিয়াল কম্পোনেন্টস উইজেট ক্যাটালগেও অন্বেষণ করতে পারেন।

বিকল্পভাবে, Flutter-এর জন্য MDC-102-এ অন্তর্ভুক্ত উপাদানগুলি সম্পর্কে জানতে MDC-102: Material Design Structure and Layout- এ যান।

আমি যথেষ্ট সময় এবং প্রচেষ্টার মাধ্যমে এই কোডল্যাবটি সম্পূর্ণ করতে সক্ষম হয়েছি।

দৃঢ়ভাবে একমত একমত নিরপেক্ষ অসম্মতি দৃঢ়ভাবে একমত নই

আমি ভবিষ্যতে ম্যাটেরিয়াল কম্পোনেন্ট ব্যবহার চালিয়ে যেতে চাই।

দৃঢ়ভাবে একমত একমত নিরপেক্ষ অসম্মতি দৃঢ়ভাবে একমত নই