ঝাঁকুনি: ফায়ারবেস দিয়ে কীভাবে সাইন ইন করবেন

মুক্তি

12/25/18 - রিফ্যাক্টরিং এবং পরিষ্কার করার পরে বর্তমান কোড স্নিপেট আপডেট হয়েছে।

01/24/19 - নিবন্ধের শীর্ষে গিথুবের সাথে ডাবল লিঙ্ক।

07/23/19 - ইমেল এবং পাসওয়ার্ডে ট্রিম পদ্ধতি যুক্ত করা হয়েছে

সোর্স কোড

আপনি যদি সমস্ত হোকস-পোকস এড়িয়ে যেতে চান তবে আপনি উত্স কোডটি এখানে দখল করতে পারেন

https://github.com/tattwei46/flutter_login_demo

আপডেট

এখানে এই পোস্টটির ধারাবাহিকতা রয়েছে যা ফায়ারবেস আরটিডিবি দিয়ে সিআরইউডি কীভাবে করবেন তা বর্ণনা করে। শোনো!

তোলপাড় কী?

ফ্লাটার হ'ল অ্যান্ড্রয়েড এবং আইওএসের জন্য উচ্চমানের অ্যাপ্লিকেশন তৈরি করতে গুগল দ্বারা বিকাশ করা একটি ওপেন সোর্স মোবাইল এসডিকে। বিকাশকারীরা এটি সুন্দরভাবে ডিজাইন, মসৃণ অ্যানিমেটেড এবং দ্রুত সম্পাদনকারী অ্যাপ্লিকেশনগুলি তৈরি করতে কেবল তা ব্যবহার করতে পারবেন না, তবে তারা দ্রুত নতুন বৈশিষ্ট্যগুলিকে একীভূত করতে পারে। ঝাঁকুনি একটি রাষ্ট্রীয় গরম পুনরায় লোড এবং একটি গরম পুনঃসূচনা সহ উচ্চ গতির বিকাশ প্রস্তাব করে। পরিচালনার জন্য কেবল একটি কোড বেস সহ, আপনি অ্যান্ড্রয়েড এবং আইওএস প্রকল্পগুলি পরিচালনা করার সাথে তুলনা করে অনেক ব্যয় সাশ্রয় করেন কারণ ফ্লাটার তাদের এআরএম কোডগুলিতে সংকলন করে। ফ্লুর্ট ডার্ট প্রোগ্রামিং ভাষা ব্যবহার করে, এটি গুগলও বিকাশ করেছে।

কেন ডার্টস

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

ফায়ারবেস কী?

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

কীভাবে পরিবেশ স্থাপন করা যায়

  • এই লিঙ্কে নির্দেশাবলী অনুসরণ করুন
  • ঝাঁকুনির এসডিকে পান
  • সমস্ত নির্ভরতা ইনস্টল করতে ফ্লার্ট ডক্টর চালান
ঝাপটায় ডাক্তার
  • আইওএস সিমুলেটরটি খোলার জন্য নিম্নলিখিত কমান্ডটি ব্যবহার করুন
একটি সিমুলেটর খুলুন
  • অ্যান্ড্রয়েড এমুলেটর খোলার জন্য, অ্যান্ড্রয়েড স্টুডিও> সরঞ্জামগুলি> এভিডি পরিচালক শুরু করুন এবং ভার্চুয়াল ডিভাইস তৈরি করুন নির্বাচন করুন।

বিল্ডিং এলোমেলো অ্যাপ

আপনি পোস্টের শেষে গিটহাব লিঙ্কে সম্পূর্ণ উত্স কোডটি পেতে পারেন। নিম্নলিখিতটি দেখায় যে কীভাবে আমরা গিটহাবের উত্স কোডটি সম্পূর্ণ করতে ঝাঁকুনির নমুনা প্রকল্পটি থেকে পেয়েছি।

স্টেপ 1: একটি নতুন বিড়বিড় প্রকল্প তৈরি করুন এবং নাড়াচাড়া লগইন ডেমোতে যান। সিমুলেটরটি শুরু করুন এবং ফ্লার্ট দিয়ে প্রজেক্টটি শুরু করুন। আপনি আপনার পছন্দসই আইডিই হিসাবে অ্যান্ড্রয়েড স্টুডিও বা ভিএসকোড ব্যবহার করতে পারেন। আপনার সম্পাদককে এখানে কনফিগার করার পদক্ষেপ।

ঝাপটায় রান

অ্যান্ড্রয়েড এমুলেটর এবং আইওএস উভয়ই সিমুলেটর চলমান রয়েছে, তাদের উভয়টি চালানোর জন্য নিম্নলিখিত কমান্ডটি চালান।

এলোমেলো করে দাও

আপনার অ্যান্ড্রয়েড এমুলেটর এবং আইওএস সিমুলেটর উভয় ক্ষেত্রে একই স্ক্রিনগুলি দেখতে পাওয়া উচিত।

বাম: অ্যান্ড্রয়েড, ডান: আইওএস
আপনি যদি সিমুলেটরগুলির সাথে স্ক্রিনশট নিতে চান তা জানতে চান,
অ্যান্ড্রয়েডের জন্য: সরঞ্জাম উইন্ডোতে কেবল বামদিকে ক্যামেরা আইকনে ক্লিক করুন। ছবিটি ডেস্কটপে সংরক্ষিত হয়েছে
আইওএসের জন্য: [বিকল্প 1] + শিফট + 4 টিপুন এবং এটি টিপুন। মাউস পয়েন্টারটিকে ক্যামেরা আইকনে পরিবর্তন করতে স্পেস বারটি টিপুন। আইওএস সিমুলেটারে নির্দেশ করুন এবং স্ক্রিনশট নিতে ক্লিক করুন। ছবিটি ডেস্কটপে সংরক্ষিত হয়েছে।

[বিকল্প 2] সিমুলেটর নির্বাচন করুন এবং কমান্ড + এস টিপুন জেরিঝোর সাথে এই তথ্য ভাগ করে নেওয়ার জন্য আপনাকে ধন্যবাদ।

স্টেপ 2: মেইন.ডার্টে, সমস্ত সামগ্রী মুছুন এবং নীচের পাঠ্য বাক্সটি ফাইলে যুক্ত করুন। আমরা লগইনপেজ ক্লাস সহ একটি নতুন ফাইল লগইন_পৃষ্ঠা.ডার্ট তৈরি করতে যাচ্ছি। একটি গরম পুনরায় লোড সম্পাদন করতে আপনার টার্মিনালে আর কী টিপুন। স্ক্রিনে "হ্যালো ওয়ার্ল্ড" বলা উচিত।

মেইন.ডার্ট

আমদানি 'প্যাকেজ: বিড়ম্বনা / উপাদান.ডার্ট'; আমদানি করুন 'login_signup_page.dart'; অকার্যকর প্রধান () => রান অ্যাপ (নতুন মাই অ্যাপ্লিকেশন ()); মাই অ্যাপ্লিকেশন শ্রেণি স্টেটলেস উইজেটকে প্রসারিত করেছে {@ ওভাররাইড উইজেট তৈরি (বিল্ডকন্টেক্সট প্রসঙ্গে) new নতুন নতুন অ্যাপ্লিকেশন অ্যাপ্লিকেশন (শিরোনাম: "বিড়ম্বনা লগইন ডেমো", থিম: নতুন থিমডাটা (প্রাথমিকসওয়াচ: Colors.blue,), হোম: নতুন লগইনসাইনপেজ ()) প্রদান করুন; }}

লগইন_সাইনআপ_পেজ.ডার্ট

আমদানি 'প্যাকেজ: বিড়ম্বনা / উপাদান.ডার্ট'; লগইনসাইনপপেজ শ্রেণিটি স্টেটলেস উইজেটকে প্রসারিত করে {@ ওভাররাইড উইজেট তৈরি (বিল্ডকন্টেক্সট প্রসঙ্গ) {নতুন ফ্রেমওয়ার্ক ফিরিয়ে আনুন (অ্যাপবার: নতুন অ্যাপবার (শিরোনাম: নতুন পাঠ্য ("ফ্লুর লগইন ডেমো")),), দেহ: নতুন ধারক (শিশু: নতুন পাঠ্য (" ওহে বিশ্ব"),       ),     ); }}

স্টেপ 3: স্টেটলেস থেকে স্টেটলেস-এ পরিবর্তন করুন।

লগইন_সাইনআপ_পেজ.ডার্ট

আমদানি 'প্যাকেজ: বিড়ম্বনা / উপাদান.ডার্ট'; লগইনসাইনপেজ পৃষ্ঠা শ্রেণি স্টেটফুল উইজেট {@ ওভাররাইড রাজ্যকে প্রসারিত করে createState () => নতুন _লগিনসাইনআপপেজ স্টেট (); L _লগিনসাইনআপপেজ স্টেট শ্রেণিটি স্থিতি প্রসারিত করে over @ ওভাররেড উইজেট তৈরি (বিল্ডকন্টেক্সট প্রসঙ্গ) new নতুন ফ্রেমওয়ার্ক (অ্যাপবার: নতুন অ্যাপবার (শিরোনাম: নতুন পাঠ্য ("বিড়বিড় করে লগইন ডেমো")),), শরীর: নতুন ধারক (শিশু: নতুন পাঠ্য ("হ্যালো ওয়ার্ল্ড")) ​​ফিরিয়ে দিন ,),); }}

Te স্টেপ 4: কঙ্কালের শরীরে, হ্যালো ওয়ার্ড থেকে পাঠ্যটিকে একটি আকারে প্রতিস্থাপন করুন। এটিতে একটি তালিকাভিউ inোকানো হয়। একটি তালিকাভিউতে বেশ কয়েকটি উইজেট রয়েছে। আমরা প্রতিটি ইউআই উপাদান আলাদা আলাদা উইজেটে রূপান্তর করতে যাচ্ছি।

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

লগইন_সাইনআপ_পেজ.ডার্ট

@ ওভাররাইড উইজেট তৈরি (বিল্ডকন্টেক্সট প্রসঙ্গ) {_isIos = থিম.ফ (প্রসঙ্গ) .প্ল্যাটফর্ম == টার্গেটপ্লেটফর্ম.আইওএস; নতুন কাঠামো ফিরিয়ে আনুন (অ্যাপবার: নতুন অ্যাপবার (শিরোনাম: নতুন পাঠ্য ('বিড়বিড় করে লগইন ডেমো')),), বডি: স্ট্যাক (শিশুরা: [_দেহের বডি (), _ শো ক্যারিকুলারপ্রোগ্রেস (),],)) }

পদক্ষেপ 5: স্বতন্ত্র UI উপাদান তৈরি করুন

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

উইজেট _শোআর সার্কুলারপ্রোগ্রেস () {যদি (_আইসলোড) {রিটার্ন সেন্টার (শিশু: সার্কুলারপ্রোগ্রেস ইন্ডিকেটর ()); } ফেরত ধারক (উচ্চতা: 0.0, প্রস্থ: 0.0,); }

লোগোর জন্য, আমরা একটি হিরো উইজেট ব্যবহার করব এবং আপনার পাবস্পেক.আইএমএলে নিম্নলিখিত লাইনটি যুক্ত করে চিত্রটি আমদানি করব। তারপরে আপনার চিত্রটি আমদানি করতে প্যাকেজগুলি পান run

সম্পদসমূহ: - সম্পদ / ঝাঁকুনি-আইকন.পিএনজি

লগইন_সাইনআপ_পেজ.ডার্ট

উইজেট _ শো লোগো () the নতুন নায়কটিতে ফিরে যান (ট্যাগ: "নায়ক", শিশু: প্যাডিং (প্যাডিং: EdgeInsets.fromLTRB (0.0, 70.0, 0.0, 0.0), শিশু: সার্কেল অবতার (ব্যাকগ্রাউন্ড কালার: কালারস ট্রান্সপারেন্ট, ব্যাসার্ধ: 48, 0, শিশু: ইমেজ.সেট ('সম্পদ / ঝাঁকুনি-আইকন.পিং'),),),); }

[আপডেট] এখন পর্যন্ত আমরা সাইজেডবক্সের সাথে একটি নমনীয় দূরত্বের উইজেট ব্যবহার করেছি, যা দুটি উইজেটের মধ্যে উল্লম্ব দূরত্ব পেতে, উচ্চতার ইনপুটগুলিকে বিবেচনা করে। এখন আসুন কেবল একটি প্যাডিং উইজেটে একটি উইজেট রাখুন এবং প্যাডিং ব্যবহার করুন: এজজিস্টস.ফ্রমে এলটিআরবি (), যার অর্থ বাম, উপরের, ডান এবং নীচে থেকে রয়েছে এবং সেই অনুযায়ী সঠিক অবস্থানে প্যাডিং মানটি প্রবেশ করুন।

এর পরে ইমেল এবং পাসওয়ার্ডের জন্য আমাদের পাঠ্য ক্ষেত্র। প্রতিটি ক্ষেত্রের জন্য দ্রষ্টব্য আমাদের ভ্যালিডেটর এবং অন সেভ করা আছে। এই দুটি কলব্যাকগুলি ট্রিগার করা হয় যখন form. માન્યate () এবং form.save () কল করা হয়। উদাহরণস্বরূপ, যখন form.save () বলা হয়, পাঠ্য ফর্ম ক্ষেত্রের মান অন্য স্থানীয় ভেরিয়েবলে অনুলিপি করা হয়।

ক্ষেত্রের প্রবেশ ফাঁকা রয়েছে কিনা তা পরীক্ষা করার জন্য আমরা আমাদের ক্ষেত্রগুলিতে একটি পরীক্ষক যুক্ত করব এবং তারপরে ব্যবহারকারীকে লাল রঙের একটি সতর্কবার্তা দেখাব। মানগুলি সংরক্ষণ করার জন্য আমাদের _ ইমেইল এবং _ পাসওয়ার্ড ভেরিয়েবলগুলিও তৈরি করতে হবে। আমরা obsecureText সেট করেছি: ব্যবহারকারীর পাসওয়ার্ডটি গোপন করার জন্য পাসওয়ার্ড হিসাবে সত্য।

আপডেট: আমি ই-মেল এবং পাসওয়ার্ড ভ্যালুতে শুরু বা শেষে অযৌক্তিক স্থানগুলি সরাতে একটি ছাঁটাই পদ্ধতি যুক্ত করেছি।

উইজেট _শোমেইলআইনপুট () {পিছনের প্যাডিং (প্যাডিং: কনস্টড এজেন্সিটস.ফর্মএলটিআরবি (0.0, 100.0, 0.0, 0.0), শিশু: নতুন টেক্সটফর্মফিল্ড (ম্যাকলাইনস: 1, কীবোর্ড টাইপ: টেক্সটইনপুট টাইপ.ইমেলএড্রেস, অটোফোকাস: ভুল, সজ্জা: নতুন ইনপুটথেকচার ইমেল ', আইকন: নতুন আইকন (আইকনস মেইল, রঙ: রঙস.grey,)), বৈধকরণকারী: (মান) => মান.আইএসপি?' ইমেল খালি থাকতে পারে না ': নাল, অনসেভ: (মান) => ইমেইল = value.trim (),),); Id উইজেট _শোপ্যাসওয়ার্ডইনপুট () {পিছনের প্যাডিং (প্যাডিং: কনড এজজিস্টস.ফর্মএলটিআরবি (0.0, 15.0, 0.0, 0.0), শিশু: নতুন টেক্সটফর্মফিল্ড (ম্যাক্সলাইনস: 1, অস্পষ্ট পাঠ্য: সত্য, অটোফোকাস: মিথ্যা, সজ্জা: নতুন ইনপুটডেকচার: 'পাসওয়ার্ডটেক্সট:' ', আইকন: নতুন আইকন (আইকনস লক, রঙ: রঙস.grey,)), যাচাইকারী: (মান) => মান.আইএসপি?' পাসওয়ার্ড খালি থাকতে পারে না ': নাল, অন সেভড: (মান) => _ পাসওয়ার্ড = value.trim (),),); }

এরপরে আমাদের প্রাথমিক বোতামটি যুক্ত করতে হবে তবে ব্যবহারকারী কোনও নতুন অ্যাকাউন্টে সাইন আপ করতে বা বিদ্যমান অ্যাকাউন্টে সাইন ইন করতে চায় কিনা তার উপর নির্ভর করে সঠিক পাঠ্যটি প্রদর্শন করতে সক্ষম হওয়া উচিত। এটি করার জন্য, ফর্মটি লগইন বা নিবন্ধকরণের উদ্দেশ্যে রয়েছে কিনা তা ট্র্যাক রাখতে আমাদের একটি গণনা তৈরি করতে হবে।

enum ফর্মমোড {লগইন, সাইনআপ}

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

উইজেট _শো প্রাইমারি বাটন () new নতুন প্যাডিং ফেরত দিন (প্যাডিং: এজজিস্টস.ফর্ম এলটিআরবি (0.0, 45.0, 0.0, 0.0), শিশু: নতুন ম্যাটারিয়াল বাটন (উচ্চতা: 5.0, মিনিট প্রস্থ: 200.0, উচ্চতা: 42.0, রঙ: রঙ । ব্লু, চাইল্ড: _ফর্মমোড == ফর্মমোড.লগিন? নতুন পাঠ্য ('লগইন', শৈলী: নতুন পাঠ্য স্টাইল (ফন্টের আকার: 20.0, রঙ: রঙ: সাদা)): নতুন পাঠ্য ('অ্যাকাউন্ট তৈরি করুন', শৈলী: নতুন পাঠ্য স্টাইল (হরফ আকার: 20.0, রঙ: রঙ: শ্বেত), অনপ্রেসড: _অলিয়েডএন্ডসবমিট,))}

এখন আমাদের একটি গৌণ বোতাম যুক্ত করতে হবে যাতে ব্যবহারকারী লগইন এবং লগইন ফর্মগুলির মধ্যে স্যুইচ করতে পারে। অনপ্রেস পদ্ধতিতে আমরা লগিন এবং সাইনআপের মধ্যে ফর্মের স্থিতিটি পরিবর্তন করতে চাই। গৌণ বোতামটির জন্য নোট: আমরা প্রেরণের জন্য আগের বোতামের মতো রাইজড বাটনটির পরিবর্তে ফ্ল্যাটবটন ব্যবহার করছি। এর কারণ হ'ল যখন আপনার কাছে 2 টি বোতাম রয়েছে এবং আপনি অন্যটির তুলনায় একটি আরও বিশিষ্ট করতে চান, রাইজডবটন সঠিক পছন্দ কারণ এটি ফ্ল্যাটবটনের তুলনায় তাত্ক্ষণিকভাবে ব্যবহারকারীদের দৃষ্টি আকর্ষণ করে।

লগইন_পেজ.ডার্ট

উইজেট _শোসেকেন্ডারিবাটন () new নতুন ফ্ল্যাটবটন ফিরিয়ে দিন (শিশু: _forMode == ফর্মমোড.লগিন? নতুন পাঠ্য ('অ্যাকাউন্ট তৈরি করুন', শৈলী: নতুন টেক্সটস্টাইল (ফন্টের আকার: 18.0, ফন্টের ওজন: w300)): নতুন পাঠ্য ('আপনার কি আছে? অ্যাকাউন্ট? লগইন ', স্টাইল: নতুন টেক্সটস্টাইল (ফন্টসাইজ: 18.0, ফন্টওয়েট: ডাব্লু 300)), অনপ্রেসড: _ফর্মমোড == ফর্মমোড.লোগিন? _চ্যানজফর্মটোসাইনআপ: _ঞ্জেনফর্মটোগলিন,); }

ফর্ম মোডে টগল করার পদ্ধতির জন্য সেটস্টেট মোড়ানো গুরুত্বপূর্ণ, কারণ ফর্মটারকে ফর্মমোডের আপডেট হওয়া মান সহ স্ক্রিনটি পুনরায় রেন্ডার করতে হবে।

শূন্য _চেঞ্জফর্মটোসাইনআপ () form _formKey.currentState.reset (); _errorMessage = ""; সেটস্টেট (() {_forMode = ফর্মমোড.সিগনুপ;}); } শূন্য _চেঞ্জফর্মটলোগিন () form _forKey.currentState.reset (); _errorMessage = ""; সেটস্টেট (() {_forMode = ফর্মমোড.লোগিন;;); }

এরপরে আমাদের একটি _শোআরআরমেসেজ () রয়েছে যা ব্যবহারকারীরা লগইন বা লগইন করার চেষ্টা করার সময় ফায়ারবেস দিক থেকে ত্রুটি বার্তাটি ফরোয়ার্ড করে। এই ত্রুটি বার্তাটি এর মতো দেখতে পারে: "একটি ব্যবহারকারী অ্যাকাউন্ট ইতিমধ্যে বিদ্যমান।" সুতরাং ফায়ারবেস থেকে ত্রুটি বার্তাটি সংরক্ষণ করার জন্য আমাদের কাছে একটি স্ট্রিং _অরররমেসেজ থাকবে।

উইজেট _শোআরআরমিমেজ () {যদি (_errorMessage.length> 0 && _errorMessage! = নাল) new নতুন পাঠ্য (_অরর বার্তা, শৈলী: টেক্সটসাইল (ফন্টসাইজ: 13.0, রঙ: রং.আরড, উচ্চতা: 1.0, ফন্টওয়েট.ও 300) ),); } অন্য {ফেরত নতুন ধারক (উচ্চতা: 0.0,); }}

অবশেষে আমরা এই পৃথক ইউআই উপাদানগুলি সাজাই এবং সেগুলি আমাদের তালিকাভিউতে sertোকান।

উইজেট _শোবডি () new নতুন পাত্রে ফিরে আসুন (প্যাডিং: এজজেনসেটস.ল (১.0.০), শিশু: নতুন ফর্ম (কী: _ফর্মকি, শিশু: নতুন তালিকাভিউ (সঙ্কুচিতভাবে মোড়ানো: সত্য, শিশুরা: [_শো লোগো (), _ শো ইমেইল ইনপুট (), _শো পাসওয়ার্ড ইনপুট (), _শো প্রাইমারি বাটন (), _ শো সেকেন্ডারিবাটন (), _ শোআররমারেসেজ (),),))); }
টেক্সটফর্মফিল্ড কার্যকরকারী

Te স্টেপ 6: ফায়ারবেসে একটি নতুন প্রকল্প নিবন্ধন করুন

Https://console.firebase.google.com এ যান এবং একটি নতুন প্রকল্প নিবন্ধ করুন।

অ্যান্ড্রয়েডের জন্য, অ্যান্ড্রয়েড আইকনটি ক্লিক করুন। আপনার প্যাকেজের নাম লিখুন, যা অ্যান্ড্রয়েড / অ্যাপ্লিকেশন / এসসিআর / প্রধান / অ্যান্ড্রয়েডম্যানিফেস্ট.এক্সএমএলে পাওয়া যাবে

Google-Services.json (অ্যান্ড্রয়েড) কনফিগারেশন ফাইলটি ডাউনলোড করুন।

অ্যাপ্লিকেশন ফোল্ডারে প্রজেক্ট ভিউতে google-Services.json ফাইলটি টানুন

Google- পরিষেবাদি.জসন পড়তে সক্ষম হতে আমাদের Google পরিষেবাদি গ্রেডল প্লাগ-ইন যুক্ত করতে হবে। /Android/app/build.gradle ফাইলে ফাইলটির শেষ লাইনে নিম্নলিখিতটি যুক্ত করুন।

প্লাগইন ব্যবহার করুন: 'com.google.gms.google- পরিষেবাদি'

অ্যান্ড্রয়েড / বিল্ড.gradle এ বিল্ডস্ক্রিপ্ট ট্যাগে একটি নতুন নির্ভরতা যুক্ত করুন।

বিল্ডস্ক্রিপ্ট {
ভান্ডারগুলি {
// ...
}
নির্ভরতা {
// ...
শ্রেণি পথ 'com.google.gms: গুগল পরিষেবাগুলি: 3.2.1'
}

আইওএসের জন্য, এক্সকোড শুরু করতে আইওএস / রানার.এক্সকোর্সস্পেস খুলুন। প্যাকেজের নাম রানার ভিউতে প্যাকেজ আইডিতে অবস্থিত।

কনফিগারেশন ফাইলটি গুগল সার্ভিস-ইনফো.লিস্ট (আইওএস) ডাউনলোড করুন।

গুগল সার্ভিস-ইনফো.লিস্টটি টানুন রুনারের রানার সাবফোল্ডারটিতে নীচের মত দেখাচ্ছে।

Te স্টেপ 7: pubspec.yaml এর উপর নির্ভরতা যুক্ত করুন এরপরে আমাদের pubspec.yaml এ ফায়ারবেস_আউথ নির্ভরতা যুক্ত করতে হবে। সর্বশেষতম সংস্করণ নম্বর পেতে, https://pub.dartlang.org/ এ যান এবং ফায়ারবেস প্রমাণের জন্য অনুসন্ধান করুন।

ফায়ারবেস_আউথ: .6 0.6.6

Te স্টেপ 8: ফায়ারবেস প্রমাণীকরণ আমদানি করুন

আমদানি 'প্যাকেজ: ফায়ারবেস_আউথ / ফায়ারবেস_আউথ.ডার্ট';

স্টেপ 9: ইমেল এবং পাসওয়ার্ড দিয়ে ফায়ারবেসে লগিং সক্রিয় করুন ate

স্টেপ 10: ফায়ারবেসে সাইন ইন করুন

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

ফায়ারবেস উত্থাপিত ত্রুটিতে প্রকৃত বার্তাটি কীভাবে সংরক্ষণ করা হয় তার মধ্যে পার্থক্য রয়েছে। আইওএস-এ, বার্তাটি ই-ডেটেলগুলিতে রয়েছে, অ্যান্ড্রয়েডের জন্য এটি ই-মেসেজে রয়েছে। আপনি _isIos = Theme.of (প্রসঙ্গ) .প্ল্যাটফর্ম == টার্গেটপ্লেটফর্ম.আইওএস ব্যবহার করে প্ল্যাটফর্মটি সহজেই পরীক্ষা করতে পারেন। এটি প্রতিটি বিল্ড উইজেট পদ্ধতিতে হওয়া উচিত কারণ এর প্রসঙ্গে প্রয়োজন।

_)ateAndSubmit () async {setState (() {_errorMessage = ""; _ আইসলোডিং = সত্য;}); if (_માન્યateAndSave ()) ring স্ট্রিং ইউজারআইডি = ""; চেষ্টা করুন {if (_forMode == ফর্মমোড IN লোগিন) {ব্যবহারকারীআইডি = উইজেট.আউথ.সাইন ইন এর জন্য অপেক্ষা করুন (_ ইমেইল, _ পাসওয়ার্ড); মুদ্রণ ('নিবন্ধিত: $ ইউজারআইডি'); } অন্য {ইউজারআইডি = উইজেট.আউথ.সাইনআপের জন্য অপেক্ষা করুন (_ ইমেইল, _ পাসওয়ার্ড); মুদ্রণ ('নিবন্ধিত ব্যবহারকারী: $ ইউজারআইডি'); } যদি (ইউজারআইডি। দৈর্ঘ্য> 0 && ইউজারআইডি! = নাল) {উইজেট.অনসাইনড ইন (); }} ক্যাচ (ই) {মুদ্রণ ('ত্রুটি: $ ই'); সেটস্টেট (() {_isLoading = false; if (_isIos) {_errorMessage = e.details;} অন্যথায় _errorMessage = e.message;}); }}}

স্টেপ 11: স্যুইচ করার সময় ফর্ম ক্ষেত্রটি মুছুন

ব্যবহারকারীরা প্রতিবার লগইন এবং লগইন ফর্মগুলির মধ্যে স্যুইচ করে ফর্ম ক্ষেত্রটি পুনরায় সেট করতে আমাদের _ পরিবর্তন ফর্মটোসাইনআপ এবং _চেঞ্জফর্মটোলোগিনে নিম্নলিখিত লাইনটি যুক্ত করতে হবে।

formKey.currentState.reset ();

স্টেপ 12: ব্যবহারকারীর লগইন করার চেষ্টা করুন

আসুন একটি ইমেল ঠিকানা এবং একটি পাসওয়ার্ড প্রবেশ করে একটি ব্যবহারকারীর সাইন ইন করার চেষ্টা করুন।

আপনি যদি নিম্নলিখিতটি জুড়ে আসেন তবে আপনার ইমেলটির শেষে একটি অতিরিক্ত স্থান থাকবে
ইচ্ছুক / নাড়াচাড়া (14294): ত্রুটি প্ল্যাটফর্ম এক্সসেপশন (ব্যতিক্রম: ইমেল ঠিকানাটি ভুলভাবে ফর্ম্যাট করা হয়েছে,, নাল)
আপনি যদি নিম্নলিখিতটি জুড়ে আসেন তবে আপনার পাসওয়ার্ডটি পরিবর্তন করুন যাতে এটি কমপক্ষে 6 টি অক্ষর দীর্ঘ হয়।
আই / বিড়বিড় (14294): ত্রুটি প্ল্যাটফর্ম এক্সসেপশন (ব্যতিক্রম: নির্দিষ্ট পাসওয়ার্ডটি অবৈধ [[পাসওয়ার্ড কমপক্ষে 6 অক্ষরের দীর্ঘ হওয়া উচিত], নাল)

সফল সমাপ্তির পরে, আপনার টার্মিনালে নীচের লাইনটি দেখতে হবে। এলোমেলো স্ট্রিংটি ব্যবহারকারী আইডি।

আই / বিড়বিড় (14294): জেএসডাব্লুপিএসসিএফএক্সপিজেডএইচইইউইইউই 4 ফ্যাক্সসিএসএমউইউপি 2 নিবন্ধিত

আমরা লগ ইন করে থাকা একই ব্যবহারকারীর মধ্যে যদি লগ ইন করার চেষ্টা করি তবে আমাদের এমন কিছু পাওয়া উচিত:

আই / বিড়বিড় (14294): জেএসডাব্লুপিএসসিএফএক্সপিজেডএইচইইউইউইও 4এক্সসিএসএমউইউপি 2-এ সাইন ইন

স্টেপ 13: অ্যাথ ক্লাস প্রয়োগ করুন

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

আমদানি 'ডার্ট: অ্যাসিঙ্ক'; আমদানি 'প্যাকেজ: ফায়ারবেস_আউথ / ফায়ারবেস_আউথ.ডার্ট'; বিমূর্ত ক্লাস বেসঅথ {ভবিষ্যত সাইন ইন (স্ট্রিং ইমেল, স্ট্রিং পাসওয়ার্ড); ভবিষ্যত সাইনআপ (স্ট্রিং ই-মেইল, স্ট্রিং পাসওয়ার্ড); ভবিষ্যত getCurrentUser (); ভবিষ্যত সাইন আউট (); } ক্লাস অউথ বেসঅথ প্রয়োগ করে {চূড়ান্ত ফায়ারবেসঅথ _ফায়ারবেসআথ = ফায়ারবেসঅথ ইন্ডাস্ট্যান্স; ভবিষ্যত সাইন ইন (স্ট্রিং ই-মেইল, স্ট্রিং পাসওয়ার্ড) async {ফায়ারবেস ব্যবহারকারী = _firebaseAuth.signInWithEmailAndPassword (ইমেইল: ইমেইল, পাসওয়ার্ড: পাসওয়ার্ড) এর জন্য অপেক্ষা করুন; রিটার্ন ইউজার.ইউইড; } ভবিষ্যত সাইনআপ (স্ট্রিং ই-মেইল, স্ট্রিং পাসওয়ার্ড) async {ফায়ারবেস ব্যবহারকারী = _firebaseAuth.createUserWithEmailAndPassword (ইমেইল: ইমেইল, পাসওয়ার্ড: পাসওয়ার্ড) এর জন্য অপেক্ষা করুন; রিটার্ন ইউজার.ইউইড; } ভবিষ্যত getCurrentUser () async {ফায়ারবেস ব্যবহারকারী = _firebaseAuth.currentUser () এর জন্য অপেক্ষা করুন; রিটার্ন ইউজার.ইউইড; } ভবিষ্যত সাইনআউট () async {_ _FebaseAuth.signOut (); }}

লগইন_পেজ.ডার্টে In

লগইনসাইনপেজ শ্রেণীর স্টেটফুল উইজেট প্রসারিত {
লগইনসাইনপেজ (। This.auth});
চূড়ান্ত বেসঅথ অথ;
@অগ্রাহ্য করা
রাষ্ট্র createState () => নতুন _ লগিনপেজ স্টেট ();
}

মেইন.ডার্টে

হোম: নতুন লগইনসাইনআপ পৃষ্ঠা (লেখক: নতুন আথ ())

লগইন_পৃষ্ঠায় ফিরে আসুন.আরআপনি আমাদের সাইনইইনউইথথইমেলএন্ডপ্যাসওয়ার্ডটি বিনিময় করতে পারেন

স্ট্রিং ইউজারআইডি = উইজেট.আউথ.সাইন ইন এর জন্য অপেক্ষা করুন (_ ইমেইল, _ পাসওয়ার্ড);
স্ট্রিং ইউজারআইডি = উইজেট.আউথ.সাইনআপের জন্য অপেক্ষা করুন (_ ইমেইল, _ পাসওয়ার্ড);

স্টেপ 14: ভয়েডক্যালব্যাক সহ রুট এবং হোম

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

আমাদের রুট_পেজ.ডার্ট নামে একটি ফাইল তৈরি করতে হবে। এটি হোম প্রতিস্থাপন করে: আমাদের মেইন.ডার্টে লগইনসাইনআপ পৃষ্ঠা (লেখক: নতুন অউথ ())।

হোম: নতুন রুটপেজ (লেখক: নতুন আথ ())

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

মূল_পৃষ্ঠায় দুটি পদ্ধতি রয়েছে, _অনলগডইন এবং _অনসিইনড আউট। ব্যবহারকারীদের আইডিতে _অনলগডইন এবং সেটসেট এথ স্ট্যাটাসটি ইতিমধ্যে লগ ইন করাতে চেষ্টা করা হয়েছে ID সংরক্ষিত ব্যবহারকারীর আইডি _অনসাইনডআউটে মুছে ফেলা হয় এবং ব্যবহারকারীকে সেটসেট লেখক স্ট্যাটাস লগ ইন করা হয় না।

লগইন_পৃষ্ঠায় আমরা মূল পাতায় 2 টি প্যারামিটার পাস করি, একটি হ'ল আথ শ্রেণি, যা আমরা আরও সহজেই প্রয়োগ করি (আমরা এটি মেইন.ডার্টে ইনস্ট্যান্ট করি) এবং _অনলোগডইন পদ্ধতিটি। লগইন_সাইনআপ_পেজায় আমরা 2 টি ভেরিয়েবল তৈরি করি যা বেসআউথ টাইপের এবং ভয়েডক্যালব্যাক টাইপের অনসাইনড ইন হয়। আমরা লগইন_সাইনআপ_পৃষ্ঠায় পাস হওয়া 2 টি প্যারামিটারগুলি নিম্নরূপের সাথে আমাদের স্থানীয় ভেরিয়েবলগুলিতে স্থানান্তর করতে পারি।

লগইনসাইনপেজ ({this.auth, this.onSignIn}); চূড়ান্ত বেসঅথ অথ; চূড়ান্ত ভয়েডক্যালব্যাক on সাইনডইন;

ভয়েডক্যালব্যাকের সাহায্যে লগইন_সাইনআপ_পৃষ্ঠাটি রুট_পেজে পদ্ধতিটিকে কল করতে পারে যা ব্যবহারকারী লগইন করার সময় _সাইনডইন হয়। _অনসাইনডইন যখন ডাকা হয় তখন এটি অথস্ট্যাটাসকে LOGGED_IN এ সেট করে এবং অ্যাপ্লিকেশনটিকে পুনরায় আঁকতে সেটস্টেট সেট করে। অ্যাপ্লিকেশনটি পুনরায় চিত্রিত করা হলে, স্ট্রিমেট অথস্ট্যাটাসটি পরীক্ষা করে এবং এটি LOGGED_IN হওয়ায় এটি _সাইনআউট থেকে পাস করা প্রমাণীকরণ এবং ভয়েডক্যালব্যাক সহ হোমপৃষ্ঠাটি দেখায়।

রুট_পেজ.ডার্ট

@ ওভাররাইড উইজেট তৈরি (বিল্ডকন্টেক্সট প্রসঙ্গে) {সুইচ (অউথস্ট্যাটাস) {কেস অউথস্ট্যাটাস.নোT_DETERMINED: রিটার্ন _ বিল্ডওয়াইটিংস্ক্রিন (); বিরতি; কেস AuthStatus.NOT_LOGGED_IN: নতুন লগইনসাইনআপ পেজ (লেখক: উইজেট.আউথ, অন সাইনডইন: _অনলজডইন,) ফিরিয়ে দিন; বিরতি; কেস AuthStatus.LOGGED_IN: যদি (_userId.length> 0 && _userId! = নাল) new নতুন হোমপেজ (ইউজারআইডি: _userId, লেখক: উইজেট.আউথ, on সাইনডআউট: _সাইনটআউট,) ফিরে আসুন; } অন্যথায় _ বিল্ডওয়েটিংস্ক্রিন () ফিরিয়ে দিন; বিরতি; স্ট্যান্ডার্ড: রিটার্ন _ বিল্ডওয়েটিংস্ক্রিন (); }}

অ্যাপের উপরের ডানদিকে কোণে ডিবাগ ফিতাটি লক্ষ্য করুন Notice আপনি মেইন.ডার্টে ম্যাটারিয়াল অ্যাপ্লিকেশন উইজেটে নিম্নলিখিত লাইনটি যুক্ত করে সহজেই এটিকে সরাতে পারবেন

ডেমো লগইন স্ক্রিন
ডিবাগশোচেকডমোডব্যানার: মিথ্যা,
ডিবাগ ব্যানার সরানো হয়েছে

আপনি নীচের গিথুব লিঙ্কে সম্পূর্ণ উত্স কোডটি পেতে পারেন

আপনি যদি এই নিবন্ধটি দরকারী মনে করেন দয়া করে একটি include অন্তর্ভুক্ত করুন

তথ্যসূত্র:

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