কীভাবে কোনও ঝাঁকুনির এসডিকে ব্যবহার করে একটি ক্রিপ্টোকারেন্সি মূল্য তালিকার অ্যাপ্লিকেশন তৈরি করবেন

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

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

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

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

এছাড়াও, কিছু অবজেক্ট ভিত্তিক প্রোগ্রামিং অভিজ্ঞতা (ওওপি) প্রয়োজন। আরাম করুন! আপনার কয়েক বছরের অভিজ্ঞতার প্রয়োজন নেই - আপনি যদি ক্লাস এবং অবজেক্টগুলি জানেন তবে আপনার ভাল হওয়া উচিত।

শুরু করা যাক

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

পৃষ্ঠাটি খুললে, ফ্লটার অ্যাপ্লিকেশনটি নির্বাচন করুন এবং পরবর্তী বোতামটি ক্লিক করুন।

পরবর্তী পৃষ্ঠায় আপনি প্রকল্পটি কনফিগার করতে পারেন। আপনি নীচের চিত্রের মতো একটি কনফিগারেশন ব্যবহার করতে পারেন। আপনি নিশ্চিত যে ফ্লুটারটি ডাউনলোড করেছেন সেখানে ফ্লার্ট এসডিকে পথ নির্দেশ করে sure

শেষ পৃষ্ঠায় আপনি আপনার কোম্পানির ডোমেন নামটি কনফিগার করতে পারেন এবং এটিকে যে কোনও ডোমেন নামতে সেট করতে পারেন। তারপরে Finish বাটনে ক্লিক করুন।

আপনি "সমাপ্তি" বোতামটি ক্লিক করার পরে প্রকল্প তৈরি শুরু করা উচিত। এটি সাধারণত কয়েক মিনিট সময় নেয়।

এটি শেষ হয়ে গেলে, আপনার প্রকল্পটি দেখতে এমন হওয়া উচিত।

লাইব ফোল্ডারে main.dart নামের একটি ফাইল তৈরি করা হয়েছিল। এটিতে একটি ডেমো অ্যাপ্লিকেশনটির কোড রয়েছে। যেহেতু আমরা স্ক্র্যাচ থেকে আমাদের অ্যাপ তৈরি করতে চলেছি, মূল.ডার্ট ফাইলটি খুলুন এবং এতে থাকা সমস্ত কোড মুছুন / মুছুন।

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

ফ্লার্ট অ্যাপগুলি ডার্ট প্রোগ্রামিং ভাষায় লেখা হয় are প্রধান.ডার্ট ফাইলটি একটি ডার্ট উত্স ফাইল (এক্সটেনশন .ডার্ট)। ডার্টস কনভেনশন হ'ল ছোট হাতের অক্ষর এবং আন্ডারস্কোর সহ উত্স ফাইলগুলির নামকরণ।

আসুন ডার্টস কোড লেখা শুরু করি। আমরা প্রোগ্রামিং traditionতিহ্য দিয়ে শুরু করি: "হ্যালো ওয়ার্ল্ড!"

এর জন্য আমাদের একটি তথাকথিত মূল ফাংশন তৈরি করতে হবে। মূল ফাংশনটি এমন একটি শীর্ষ স্তরের ফাংশন যা প্রতিটি ঝাঁকুনির অ্যাপ্লিকেশনটি থাকে এবং এটি আপনার অ্যাপ্লিকেশনটিতে প্রবেশের পয়েন্ট হিসাবে কাজ করে। এটিকে কোনও বাড়ির প্রবেশদ্বার হিসাবে ভাবেন।

আপনি যখন কোনও অ্যাপ্লিকেশন কোনও ডিভাইসে চালান, তখন মূল ফাংশন দিয়ে সম্পাদন শুরু হয়। আসুন একটি সাধারণ প্রধান ফাংশন তৈরি করি, আপনার মেইন.ডার্ট ফাইলটিতে নিম্নলিখিত কোডটি প্রবেশ করান।

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

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

কোডটি চালাতে, অ্যান্ড্রয়েড স্টুডিও বা ইন্টেলিজির শীর্ষে সবুজ রান (প্লে) বোতামটি ক্লিক করুন। নিশ্চিত করুন যে কোনও আসল ডিভাইস সংযুক্ত আছে বা একটি এমুলেটর চলছে।

অ্যাপটি সফলভাবে শুরু হওয়ার পরে, "হ্যালো ওয়ার্ল্ড!"

তবে, আপনি যদি নিজের ডিভাইস বা এমুলেটর পরীক্ষা করেন তবে আপনি হতাশাবোধজনক কিছু খুঁজে পাবেন।

একটি ফাঁকা পর্দা

ওয়েল, এটি প্রত্যাশিত ছিল যেহেতু আমরা বর্তমানে কেবল কনসোলে মুদ্রণ করছি। অ্যাপ্লিকেশন UI তে কিছুই যুক্ত করা হয়নি, তাই এটি খালি।

অ্যাপ্লিকেশন UI- তে কিছু উপাদান যুক্ত করে এটি ঠিক করুন। আমাদের অ্যাপ্লিকেশনটি উপাদান নকশা ব্যবহার করে। তাই এটিকে আরও সহজ করতে প্রধান.ডার্ট ফাইলটিতে একটি প্যাকেজ যুক্ত করুন।

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

উপাদান.ডার্ট প্যাকেজটিতে রান অ্যাপ নামে একটি ফাংশন রয়েছে। রানঅ্যাপ একটি উইজেট নেয় এবং এটি স্ক্রিনে সংযুক্ত করে। একটি উইজেট কি?

উইজেট

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

ঝাঁকুনিতে ইতিমধ্যে পাঠ্য এবং চিত্রের মতো বেশ কয়েকটি শক্তিশালী উইজেট অন্তর্ভুক্ত রয়েছে। সবেমাত্র আমদানীকৃত উপাদান.ডার্ট প্যাকেজটিতে বেশ কয়েকটি উপাদান নকশার উইজেট রয়েছে যা আমরা শীঘ্রই ব্যবহার করব।

এখন "হ্যালো ওয়ার্ল্ড!" এ রান অ্যাপ ব্যবহার করুন! ডিভাইসের স্ক্রিনের মাঝখানে প্রদর্শিত হবে। নিম্নলিখিত কোডের সাথে মূল ফাংশনের সামগ্রীটি প্রতিস্থাপন করুন।

আমাকে উপরের কোডে কয়েকটি নতুন বিষয় ব্যাখ্যা করতে দিন

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

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

শান্ত! আমরা ডিভাইসের স্ক্রিনে একটি কুরুচিপূর্ণ লেখাটি প্রদর্শন করতে সক্ষম হয়েছি।

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

এখন কয়েক ধাপ এগিয়ে নেওয়া যাক। আমরা কয়েনমার্কেটক্যাপ এপিআই থেকে ক্রিপ্টোকারেন্সি দামগুলি পাই। এপিআই একটি JSON অ্যারে প্রদান করে। এখানে API এর একটি নমুনা প্রতিক্রিয়া:

আমরা CoinMarketCap API এ একটি অনুরোধ করব এবং অ্যাপটি থেকে JSON ডিকোড করব। আমাদের মেইন.ডার্ট ফাইলটিতে কিছু নতুন প্যাকেজ যুক্ত করতে হবে।

এখানে নতুন প্যাকেজগুলির একটি সংক্ষিপ্তসার রয়েছে:

  1. ডার্ট: অ্যাসিঙ্ক: ভবিষ্যতের ক্লাসটি অফার করে যা আমি নীচে আলোচনা করব।
  2. ডার্ট: রূপান্তর: JSON স্ট্রিং প্রতিক্রিয়া ডিকোড করতে ব্যবহৃত JSON ভেরিয়েবল সরবরাহ করে।
  3. প্যাকেজ: HTTP / http.dart: HTTP GET অনুরোধ করা হয় যা দিয়ে ফাংশন উপলব্ধ করা হয়।

আসুন মেইন.ডার্ট ফাইলটিতে একটি নতুন ফাংশন যুক্ত করুন যা কয়েনমার্কেটক্যাপ এপিআইতে অনুরোধ প্রেরণ করে।

নতুন কোডের মাধ্যমে চলুন

→ ভবিষ্যত : আমরা মূলত বলি যে, বিমানবন্দর () ফাংশনটি ভবিষ্যতে কোনও সময় কোনও তালিকা ফিরিয়ে দেবে। তারপরে একটি এইচটিটিপি অনুরোধটি কয়েনমার্কেটক্যাপ এপিআইতে প্রেরণ করা হয় এবং মুদ্রার একটি তালিকা ফেরত দেওয়া হয়।

গেট এয়ারপোর্ট () ফাংশনটি অ্যাসিনক্রোনাস। আপনার যদি জাভাস্ক্রিপ্টের অভিজ্ঞতা থাকে তবে আপনি ভবিষ্যতকে প্রতিশ্রুতি হিসাবে ভাবতে পারেন। ডার্টগুলিতে ফিউচার বুঝতে আপনাকে সহায়তা করার জন্য আমি নীচের চিত্রগুলি তৈরি করেছি।

বব অ্যাসিঙ্ক্রোনাস ফাংশনকে জিজ্ঞাসা জিজ্ঞাসা করুন কেটফোর্ডবালুন (), যা একটি ভবিষ্যত আয়বব ভবিষ্যত রাখতে পারে <Luftballons>ভবিষ্যত কখন শেষ হবে তা বব জানতে পারে

Yn অবিচ্ছিন্ন এবং অপেক্ষা:

"এক্সপ্রেশনগুলির জন্য অপেক্ষা করুন" দিয়ে আপনি অ্যাসিঙ্ক্রোনাস কোডটি প্রায় এমনভাবে লিখতে পারেন যেন এটি সিঙ্ক্রোনাস। Http.get (url) ফাংশনটি অ্যাসিনক্রোনাস এবং ভবিষ্যতের একটি দেয় ফোন করার সাথে সাথে ফিরে আসুন। আমরা উত্তরের জন্য অপেক্ষা করতে চাই যাতে আমরা JSON স্ট্রিংটি ডিকোড করতে পারি তবে আমরা কুৎসিত কলব্যাকগুলিও ব্যবহার করতে চাই না।

অভিব্যক্তিটির প্রতীক্ষা http.get (url) এর মূল্যায়ন করে এবং ফলাফল নির্ধারিত হওয়া অবধি বর্তমান সম্পাদিত ফাংশন (এয়ারপোর্ট () পান স্থগিত করে - যা ভবিষ্যতে শেষ না হওয়া পর্যন্ত।

অপেক্ষা করতে, কোডটি অবশ্যই অ্যাসিঙ্ক্রোনাস চিহ্নিত ফাংশনে থাকতে হবে। একটি অ্যাসিনক্রোনাস ফাংশন এমন একটি ফাংশন যার মূল অংশটি একটি অ্যাসিনক্রোনাস সংশোধক দিয়ে চিহ্নিত করা হয়। আপনি যদি অ্যাসিঙ্ক্রোনাস ফাংশনটি কল করেন তবে একটি ভবিষ্যত অবিলম্বে ফিরে আসে। ফাংশনটির মূল অংশটি পরে করা হবে।

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

→ http.get (url): CoinMarketCap API এ একটি HTTP GET অনুরোধ করে। এই ফাংশনটি অ্যাসিনক্রোনাস এবং তত্ক্ষণাত ভবিষ্যতের প্রত্যাবর্তন করে।

  1. JSON.decode (প্রতিক্রিয়া.বডি): জেএসএন স্ট্রিং প্রতিক্রিয়া ডিকোড করে।

আসুন আমরা এখনই তৈরি করা এয়ারপোর্ট () ফাংশনটি পরীক্ষা করি। এটি করার জন্য, আমরা এটি আমাদের মূল ফাংশনে কল করব এবং কনসোলে ফিরে আসা মান আউটপুট করব।

আপনি যখন উপরের কোডটি চালাচ্ছেন, তখন API প্রতিক্রিয়াটি কনসোলে মুদ্রণ করা উচিত।

ঠিক আছে, বাস্তব বিশ্বে খারাপ জিনিসগুলি ঘটতে পারে। উদাহরণস্বরূপ, আপনি ইন্টারনেটের সাথে সংযুক্ত নাও থাকতে পারেন, তাই CoinMarketCap API এ অনুরোধটি ব্যর্থ হয়। এই টিউটোরিয়ালে আমরা ধরে নিই যে আমরা ওয়াকান্দায় আছি।

একটি প্রোডাকশন অ্যাপে আপনাকে নেটওয়ার্ক ত্রুটিগুলি পরিচালনা করতে হবে। আপনি এইচটিটিপি কলটি একটি চেষ্টা করে ... ব্লক ধরুন byোকানোর মাধ্যমে এটি করুন।

ব্যবহারকারীর ইন্টারফেসের কাঠামো

এখন যে আমাদের মুদ্রার একটি তালিকা রয়েছে, আসুন প্রথমে সেই তালিকাটি প্রদর্শনের জন্য ইউজার ইন্টারফেস তৈরি করি।

ঝাঁকুনি অ্যাপ্লিকেশন লেখার সময় আপনি সাধারণত নতুন উইজেট ক্লাস তৈরি করেন। উইজেটের মূল কাজটি হ'ল একটি বিল্ড ফাংশন বাস্তবায়ন করা যা অন্যান্য নিম্ন স্তরের উইজেটের সাথে সম্পর্কিত উইজেটকে বর্ণনা করে।

ক্রিপ্টোলিস্ট উইজেট নামে একটি নতুন উইজেট তৈরি করি। নীচের কোডটি মূল.ডার্ট ফাইলটিতে আটকান।

উপরের নতুন কোডটি দিয়ে চলুন:

  1. স্টেটলেস উইজেট: সাধারণত আপনার উইজেট কোনও স্ট্যাটাস পরিচালনা করে কিনা তার উপর নির্ভর করে আপনি স্টেটলেস উইজেট বা স্টেটফুল উইজেটের সাবক্লাসযুক্ত উইজেট তৈরি করেন। আমরা স্টেটলেস উইজেট ব্যবহার করি কারণ আমাদের ইতিমধ্যে আমাদের ডেটা রয়েছে এবং এটি এই টিউটোরিয়ালে আপডেট করব না।
  2. চূড়ান্ত তালিকা _ রঙ: স্টেটলেস উইজেটে ভেরিয়েবলগুলি চূড়ান্ত হওয়া উচিত (উদাহরণস্বরূপ তারা স্থির থাকে বা পরিবর্তন হয় না)। এখানে আমরা একটি সর্বশেষ ভেরিয়েবল ঘোষণা করি যার মধ্যে ম্যাটারিয়াল ভাষাগুলির একটি তালিকা রয়েছে। ভেরিয়েবল নামের আগে আন্ডারস্কোর (_) এটিকে ব্যক্তিগত করে তোলে (অন্যান্য শ্রেণিতে অ্যাক্সেসযোগ্য নয়)।
  3. ক্রিপ্টোলিস্ট উইজেট (এটি._কুরেন্সি): এটি আমাদের উইজেটের জন্য নির্মাতা। এটি মুদ্রার তালিকা নির্ধারণ করে যা আমরা নির্ধারককে _ মুদ্রা ভেরিয়েবলের কাছে প্রেরণ করি।
  4. বিল্ড ফাংশন: বিল্ড পদ্ধতিটি একটি শিশু উইজেট (পাঠ্য) দেয় যা এটি দেখতে কেমন তা বর্ণনা করে।

উপরের বিল্ড ফাংশনে, পাঠ্য উইজেটের পরিবর্তে "স্ক্যাফোড" নামে একটি নতুন উইজেট স্থাপন করুন। স্ক্যাফোল্ড উইজেট উপাদান নকশার প্রাথমিক ভিজ্যুয়াল বিন্যাস কাঠামো প্রয়োগ করে। উপরের বিল্ড ফাংশনটি নীচের সাথে প্রতিস্থাপন করুন।

স্ক্যাফোড ক্লাস ড্রয়ারগুলি প্রদর্শন করতে, একটি অ্যাকশন বোতামটি, একটি নীচের দণ্ডে, একটি স্ন্যাক বার ইত্যাদির জন্য API গুলি সরবরাহ করে আমরা পরে একটি ভাসমান অ্যাকশন বোতাম যুক্ত করব add

আপনার একটি সতর্কতা পাওয়া উচিত যে _ বিল্ডবডি () ক্রিপ্টোলিস্ট উইজেট শ্রেণীর জন্য সংজ্ঞায়িত হয়নি। ক্রিপ্টোলিস্ট উইজেট শ্রেণীর মধ্যে _ বিল্ডবডি () ফাংশনটি বজায় রাখা যাক।

সিনট্যাক্সটি এখানে জানা উচিত। আমরা দুটি নতুন উইজেট ব্যবহার করছি:

  1. ধারক উইজেট: একটি ধারক উইজেট কেবল একটি ধারক :) (অন্যান্য উইজেটের জন্য)।
  2. কলাম উইজেট: একটি কলাম উইজেট উল্লম্ব দিক থেকে শিশু উইজেটগুলির একটি তালিকা তৈরি করে। এটিতে বাচ্চাদের নামক একটি প্যারামিটার রয়েছে যা উইজেটের তালিকা নিয়ে থাকে।

আসুন আমরা দুটি বিল্ড তৈরি করব যা আমরা _ বিল্ডবডি () ফাংশনটিতে ডেকেছি। প্রথমটি _getAppTitleWidget ()।

এই ফাংশনটি এমন একটি শৈলীর সাথে একটি সাধারণ পাঠ্য উইজেট দেয় যা 24.0.0 এর ফন্টের আকারের সাথে এটি গা bold় এবং সাদা করে তোলে।

আমরা যখন অ্যাপটি চালাচ্ছি তখন পাঠ্যটি এর মতো দেখাবে।

আমরা অ্যাপটি এখনও চালাতে পারি না কারণ আমরা _getListViewWidget () নামে আর কোনও ফাংশন তৈরি করি নি। আসুন দ্রুত নীচের কোডটি ব্যবহার করে এটি তৈরি করুন।

_গেটলিস্টভিউ উইজেট () নমনীয় উইজেটে অন্তর্ভুক্ত একটি তালিকাভিউ উইজেট প্রদান করে। তালিকাটি সহজ করার জন্য আমরা তালিকাভিউ.বিল্ডার ব্যবহার করি। আমরা একটি আইটেমাউন্ট পাস করি, যা বিল্ডারকে জানায় যে কত মুদ্রা প্রদর্শিত হবে।

আইটেম বিল্ডার পুনরুদ্ধার প্রতিটি আইটেমের জন্য কল করা হয় এবং আপনাকে একটি নতুন উইজেট ফিরিয়ে দিতে হবে। উপরের কোডে, আমরা _getListItemWidget () নামে একটি ফাংশন বলি যা একটি উইজেট দেয়।

আমরা _getListItemWidget () ফাংশনটি তৈরি করার আগে আমরা দ্রুত তালিকাভিউ আইটেম উইজেটের জন্য পৃথক আইটেম তৈরি করি। আমরা তালিকাভিউতে প্রতিটি উপাদানকে দেখতে চাই:

সুতরাং আমাদের তিনটি প্রধান উইজেট রয়েছে:

  1. মুদ্রার নামের প্রথম অক্ষর সহ একটি বৃত্তাকার প্রতীক উইজেট
  2. মুদ্রার নাম সহ একটি পাঠ্য উইজেট
  3. দাম এবং শতাংশের সাথে 1 ঘন্টার মধ্যে একটি পাঠ্য উইজেট।

উইজেট তৈরি করা যাক। সরলতার জন্য, আমি তাদের প্রত্যেকের জন্য একটি ফাংশন তৈরি করেছি। _GetLeadingWidget () নামে প্রথম ফাংশনটি পাঠ্যের সাহায্যে গোল প্রতীকটি প্রদান করে।

উইজেটটি দেখতে এমন দেখাচ্ছে:

দ্বিতীয় ফাংশন, _getTitleWidget মুদ্রার নামের জন্য পাঠ্য উইজেট প্রদান করে।

_GetSubtitleWidget () নামক তৃতীয় ফাংশনটি বর্তমান মুদ্রার হারের জন্য পাঠ্য উইজেটটি এবং 1 ঘন্টার মধ্যে শতাংশের পরিবর্তন ফিরিয়ে দেয়।

এই দুটি উইজেটগুলির মতো দেখতে হবে:

একটি তালিকার টেক্সট উইজেটে সমস্ত তিনটি উইজেট অন্তর্ভুক্ত করা যাক। লিস্টটাইল উইজেটটি মেটেরিয়াল ডিজাইন তালিকার ডকুমেন্টেশনের উপর ভিত্তি করে তৈরি করা হয়েছে। এটি এই স্টাইলে তিনটি উইজেট প্রদর্শন করে।

আমরা _getListTile নামে একটি নতুন ফাংশন তৈরি করতে যাচ্ছি যা একটি তালিকার টাইল উইজেট দেয়।

অবশেষে, আসুন _getListItemWidget () তৈরি করুন। একটি ধারক উইজেটটি ফিরে আসবে যার উচ্চতর দূরত্ব 5.0 এবং একটি অধীনস্ত মানচিত্রের উইজেট রয়েছে। মানচিত্রের উইজেটের জন্য, লিস্টটাইলটি ছোটবেলায় _getListTile দ্বারা ফিরে আসে।

উইজেটটি তখন এর মতো দেখায়।

আমরা আমাদের ক্রিপ্টোলিস্ট উইজেট সফলভাবে শেষ করেছি। তবে পাঠ্য উইজেটের পরিবর্তে সদ্য নির্মিত উইজেটটি প্রদর্শন করতে আমাদের মূল ফাংশনটি আপডেট করতে হবে।

এটাই। আপনি আবার স্টার্ট বোতাম টিপতে পারেন। যদি সবকিছু ঠিকঠাক কাজ করে এবং আপনি ইন্টারনেটের সাথে সংযুক্ত থাকেন তবে আপনার এমন পর্দা দেখতে হবে যা দেখতে এই জাতীয়।

সত্যিই দুর্দান্ত, তাই না?

আপনি যে অ্যাপ্লিকেশনটি দেখুন সেটি উপরের স্ক্রিনশট থেকে কিছুটা পৃথক:

  1. নীচে ডানদিকে কোনও ভাসমান অ্যাকশন বোতাম নেই।
  2. 1 ঘন্টার মধ্যে শতাংশ পরিবর্তনের পাঠ্যের রঙটি কালো।

আমি তাদের টিউটোরিয়ালে অন্তর্ভুক্ত না করার সিদ্ধান্ত নিয়েছি। আমি সেখানে কীভাবে এসেছি তা দেখতে আপনি গিথুব সংগ্রহস্থল প্রকল্পটি দেখতে পারেন।

সমাপ্ত অ্যাপটি এখানে ডাউনলোড করা যায়।

পড়ার জন্য আপনাকে ধন্যবাদ এবং ফ্লুর সাথে মজা করুন। আপনার কোনও সমস্যা, পরামর্শ ইত্যাদি থাকলে নিচে বিনা দ্বিধায় মন্তব্য করুন leave

আপনি যদি এই গল্পটি পছন্দ করেন তবে বোতামটি ক্লিক করুন এবং এটিকে ভাগ করুন যাতে অন্যরা এটি আরও সহজে খুঁজে পেতে পারে।