1. ভূমিকা
| ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সাহায্য করে। গুগলের ইঞ্জিনিয়ার এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান রয়েছে এবং এটি অ্যান্ড্রয়েড, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ। |
এখন আপনি আপনার অ্যাপের স্বতন্ত্র স্টাইলকে আগের চেয়ে আরও বেশি কাস্টমাইজ করতে ম্যাটেরিয়াল ফ্লাটার ব্যবহার করতে পারেন। ম্যাটেরিয়াল ডিজাইনের সাম্প্রতিক সম্প্রসারণ ডিজাইনার এবং ডেভেলপারদের তাদের পণ্যের ব্র্যান্ড প্রকাশ করার জন্য আরও নমনীয়তা প্রদান করে।
কোডল্যাব MDC-101 এবং MDC-102-তে, আপনি Material Flutter ব্যবহার করে Shrine নামক একটি অ্যাপের মূল বিষয়গুলি তৈরি করেছেন, এটি একটি ই-কমার্স অ্যাপ যা পোশাক এবং গৃহস্থালীর জিনিসপত্র বিক্রি করে। এই অ্যাপটিতে একটি ব্যবহারকারী প্রবাহ রয়েছে যা একটি লগইন স্ক্রিন দিয়ে শুরু হয়, তারপর ব্যবহারকারীকে একটি হোম স্ক্রিনে নিয়ে যায় যেখানে পণ্যগুলি প্রদর্শিত হয়।
তুমি কী তৈরি করবে
এই কোডল্যাবে, আপনি নিম্নলিখিতগুলি ব্যবহার করে শ্রাইন অ্যাপটি কাস্টমাইজ করতে পারবেন:
- রঙ
- টাইপোগ্রাফি
- উচ্চতা
- আকৃতি
- লেআউট
অ্যান্ড্রয়েড | আইওএস |
|
|
|
|
এই কোডল্যাবে ম্যাটেরিয়াল ফ্লাটার উপাদান এবং সাবসিস্টেম
- থিম
- টাইপোগ্রাফি
- উচ্চতা
- ছবির তালিকা
ফ্লাটার ডেভেলপমেন্টের সাথে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
2. আপনার ফ্লাটার ডেভেলপমেন্ট পরিবেশ সেট আপ করুন
এই ল্যাবটি সম্পূর্ণ করার জন্য আপনার দুটি সফটওয়্যারের প্রয়োজন - ফ্লটার SDK এবং একটি এডিটর ।
আপনি এই ডিভাইসগুলির যেকোনো একটি ব্যবহার করে কোডল্যাব চালাতে পারেন:
- আপনার কম্পিউটারের সাথে সংযুক্ত একটি বাস্তব Android বা iOS ডিভাইস এবং ডেভেলপার মোডে সেট করা আছে।
- iOS সিমুলেটর (Xcode টুল ইনস্টল করার প্রয়োজন)।
- অ্যান্ড্রয়েড এমুলেটর (অ্যান্ড্রয়েড স্টুডিওতে সেটআপ প্রয়োজন)।
- একটি ব্রাউজার (ডিবাগিংয়ের জন্য Chrome প্রয়োজন)।
- উইন্ডোজ , লিনাক্স , অথবা ম্যাকওএস ডেস্কটপ অ্যাপ্লিকেশন হিসেবে। আপনি যে প্ল্যাটফর্মে স্থাপন করার পরিকল্পনা করছেন সেখানেই আপনাকে ডেভেলপ করতে হবে। সুতরাং, যদি আপনি একটি উইন্ডোজ ডেস্কটপ অ্যাপ ডেভেলপ করতে চান, তাহলে উপযুক্ত বিল্ড চেইন অ্যাক্সেস করার জন্য আপনাকে উইন্ডোজেই ডেভেলপ করতে হবে। অপারেটিং সিস্টেম-নির্দিষ্ট প্রয়োজনীয়তা রয়েছে যা docs.flutter.dev/desktop এ বিস্তারিতভাবে বর্ণনা করা হয়েছে।
৩. কোডল্যাব স্টার্টার অ্যাপটি ডাউনলোড করুন
MDC-102 থেকে চালিয়ে যাচ্ছেন?
যদি আপনি MDC-102 সম্পন্ন করে থাকেন, তাহলে আপনার কোডটি এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। ধাপে যান: রঙ পরিবর্তন করুন ।
একেবারে শুরু থেকে?
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-flutter-codelabs-103-starter_and_102-complete/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 103-starter_and_102-complete
প্রকল্পটি খুলুন এবং অ্যাপটি চালান।
- আপনার পছন্দের এডিটরে প্রকল্পটি খুলুন।
- আপনার পছন্দের সম্পাদকের জন্য শুরু করুন: টেস্ট ড্রাইভে "অ্যাপটি চালান" নির্দেশাবলী অনুসরণ করুন।
সফল! আপনার ডিভাইসে পূর্ববর্তী কোডল্যাবগুলির শ্রাইন লগইন পৃষ্ঠাটি দেখতে পাবেন।
অ্যান্ড্রয়েড | আইওএস |
|
|
পণ্য পৃষ্ঠাটি দেখতে "পরবর্তী" এ ক্লিক করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
৪. রঙ পরিবর্তন করুন
শ্রাইন ব্র্যান্ডের প্রতিনিধিত্বকারী একটি রঙের স্কিম তৈরি করা হয়েছে, এবং ডিজাইনার চান যে আপনি শ্রাইন অ্যাপ জুড়ে সেই রঙের স্কিমটি বাস্তবায়ন করুন।
শুরু করার জন্য, আসুন আমাদের প্রকল্পে সেই রঙগুলি আমদানি করি।
colors.dart তৈরি করুন
lib এ colors.dart নামে একটি নতুন dart ফাইল তৈরি করুন। material.dart আমদানি করুন এবং const Color মান যোগ করুন:
import 'package:flutter/material.dart';
const kShrinePink50 = Color(0xFFFEEAE6);
const kShrinePink100 = Color(0xFFFEDBD0);
const kShrinePink300 = Color(0xFFFBB8AC);
const kShrinePink400 = Color(0xFFEAA4A4);
const kShrineBrown900 = Color(0xFF442B2D);
const kShrineErrorRed = Color(0xFFC5032B);
const kShrineSurfaceWhite = Color(0xFFFFFBFA);
const kShrineBackgroundWhite = Colors.white;
কাস্টম রঙের প্যালেট
এই রঙের থিমটি একজন ডিজাইনার কাস্টম রঙের সাহায্যে তৈরি করেছেন (নীচের ছবিতে দেখানো হয়েছে)। এতে এমন রঙ রয়েছে যা শ্রাইনের ব্র্যান্ড থেকে নির্বাচিত হয়েছে এবং ম্যাটেরিয়াল থিম এডিটরে প্রয়োগ করা হয়েছে, যা তাদের একটি পূর্ণাঙ্গ প্যালেট তৈরি করার জন্য প্রসারিত করেছে। (এই রঙগুলি ২০১৪ সালের ম্যাটেরিয়াল রঙ প্যালেট থেকে নয়।)
ম্যাটেরিয়াল থিম এডিটর এগুলিকে সংখ্যাসূচকভাবে লেবেলযুক্ত শেডগুলিতে সংগঠিত করেছে, যার মধ্যে ৫০, ১০০, ২০০, .... থেকে ৯০০ পর্যন্ত প্রতিটি রঙের লেবেল রয়েছে। শ্রাইন শুধুমাত্র গোলাপী সোয়াচ থেকে ৫০, ১০০ এবং ৩০০ এবং বাদামী সোয়াচ থেকে ৯০০ শেড ব্যবহার করে।
একটি উইজেটের প্রতিটি রঙিন প্যারামিটার এই স্কিমগুলির একটি রঙের সাথে ম্যাপ করা হয়। উদাহরণস্বরূপ, যখন কোনও টেক্সট ফিল্ড সক্রিয়ভাবে ইনপুট গ্রহণ করে তখন এর সাজসজ্জার রঙটি থিমের প্রাথমিক রঙ হওয়া উচিত। যদি সেই রঙটি অ্যাক্সেসযোগ্য না হয় (এর পটভূমিতে সহজেই দেখা যায়), তবে পরিবর্তে অন্য রঙ ব্যবহার করুন।
এখন যেহেতু আমাদের কাছে যে রঙগুলি ব্যবহার করতে চাই, আমরা সেগুলি UI তে প্রয়োগ করতে পারি। আমরা আমাদের উইজেট হায়ারার্কির শীর্ষে থাকা MaterialApp ইনস্ট্যান্সে প্রয়োগ করা একটি ThemeData উইজেটের মান সেট করে এটি করব।
ThemeData.light() কাস্টমাইজ করুন
Flutter-এ কিছু বিল্ট-ইন থিম রয়েছে। হালকা থিম তাদের মধ্যে একটি। শুরু থেকে একটি ThemeData উইজেট তৈরি করার পরিবর্তে, আমরা হালকা থিমটি অনুলিপি করব এবং আমাদের অ্যাপের জন্য কাস্টমাইজ করার জন্য মানগুলি পরিবর্তন করব।
app.dart. এ colors.dart আমদানি করা যাক।
import 'colors.dart';
তারপর ShrineApp ক্লাসের বাইরে app.dart-এ নিম্নলিখিতটি যোগ করুন:
// TODO: Build a Shrine Theme (103)
final ThemeData _kShrineTheme = _buildShrineTheme();
ThemeData _buildShrineTheme() {
final ThemeData base = ThemeData.light(useMaterial3: true);
return base.copyWith(
colorScheme: base.colorScheme.copyWith(
primary: kShrinePink100,
onPrimary: kShrineBrown900,
secondary: kShrineBrown900,
error: kShrineErrorRed,
),
// TODO: Add the text themes (103)
// TODO: Decorate the inputs (103)
);
}
এখন, theme: ShrineApp এর build() ফাংশনের শেষে (MaterialApp উইজেটে) আমাদের নতুন থিম হিসেবে:
// TODO: Customize the theme (103)
theme: _kShrineTheme, // New code
আপনার প্রকল্পটি সংরক্ষণ করুন। আপনার লগইন স্ক্রিনটি এখন এইরকম দেখাবে:
অ্যান্ড্রয়েড | আইওএস |
|
|
৫. টাইপোগ্রাফি এবং লেবেল স্টাইল পরিবর্তন করুন
রঙ পরিবর্তনের পাশাপাশি, ডিজাইনার আমাদের ব্যবহারের জন্য নির্দিষ্ট টাইপোগ্রাফিও দিয়েছেন। Flutter's ThemeData-তে 3টি টেক্সট থিম রয়েছে। প্রতিটি টেক্সট থিম হল "headline" এবং "title" এর মতো টেক্সট স্টাইলের একটি সংগ্রহ। আমরা আমাদের অ্যাপের জন্য কয়েকটি স্টাইল ব্যবহার করব এবং কিছু মান পরিবর্তন করব।
টেক্সট থিম কাস্টমাইজ করুন
প্রকল্পে ফন্ট আমদানি করতে, সেগুলিকে pubspec.yaml ফাইলে যোগ করতে হবে।
pubspec.yaml-এ, flutter: ট্যাগের পরপরই নিম্নলিখিতটি যোগ করুন:
# TODO: Insert Fonts (103)
fonts:
- family: Rubik
fonts:
- asset: fonts/Rubik-Regular.ttf
- asset: fonts/Rubik-Medium.ttf
weight: 500
এখন আপনি রুবিক ফন্টটি অ্যাক্সেস করতে এবং ব্যবহার করতে পারবেন।
pubspec ফাইলের সমস্যা সমাধান করা হচ্ছে
উপরের ঘোষণাটি কেটে পেস্ট করলে pub get চালানোর সময় ত্রুটি দেখা দিতে পারে। যদি আপনি ত্রুটি পান, তাহলে প্রথমে সামনের সাদা স্থানটি সরিয়ে 2-স্পেস ইন্ডেন্টেশন ব্যবহার করে স্পেস দিয়ে প্রতিস্থাপন করুন। (এর আগে দুটি স্পেস)
fonts:
, আগে চারটি স্পেস
family: Rubik
, ইত্যাদি।)
যদি আপনি দেখেন যে এখানে ম্যাপিং মান অনুমোদিত নয় , তাহলে সমস্যাযুক্ত লাইনের ইন্ডেন্টেশন এবং তার উপরে থাকা লাইনগুলির ইন্ডেন্টেশন পরীক্ষা করুন।
login.dart এ, Column() ভিতরে নিম্নলিখিতটি পরিবর্তন করুন:
Column(
children: <Widget>[
Image.asset('assets/diamond.png'),
const SizedBox(height: 16.0),
Text(
'SHRINE',
style: Theme.of(context).textTheme.headlineSmall,
),
],
)
app.dart এ, _buildShrineTheme() এর পরে নিম্নলিখিতটি যোগ করুন:
// TODO: Build a Shrine Text Theme (103)
TextTheme _buildShrineTextTheme(TextTheme base) {
return base
.copyWith(
headlineSmall: base.headlineSmall!.copyWith(
fontWeight: FontWeight.w500,
),
titleLarge: base.titleLarge!.copyWith(
fontSize: 18.0,
),
bodySmall: base.bodySmall!.copyWith(
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
bodyLarge: base.bodyLarge!.copyWith(
fontWeight: FontWeight.w500,
fontSize: 16.0,
),
)
.apply(
fontFamily: 'Rubik',
displayColor: kShrineBrown900,
bodyColor: kShrineBrown900,
);
}
এটি একটি টেক্সট থিম নেয় এবং শিরোনাম, শিরোনাম এবং ক্যাপশনের চেহারা পরিবর্তন করে।
এইভাবে fontFamily প্রয়োগ করলে পরিবর্তনগুলি শুধুমাত্র copyWith() (শিরোনাম, শিরোনাম, ক্যাপশন) এ নির্দিষ্ট টাইপোগ্রাফি স্কেল মানগুলিতে প্রযোজ্য হয়।
কিছু ফন্টের জন্য, আমরা ১০০ এর বৃদ্ধিতে একটি কাস্টম ফন্টওয়েট সেট করছি: w500 (৫০০ ওজন) মাঝারি এবং w400 নিয়মিত।
নতুন লেখাটি ব্যবহার করুন t heme s
ত্রুটির পরে _buildShrineTheme এ নিম্নলিখিত থিমগুলি যোগ করুন:
// TODO: Add the text themes (103)
textTheme: _buildShrineTextTheme(base.textTheme),
textSelectionTheme: const TextSelectionThemeData(
selectionColor: kShrinePink100,
),
আপনার প্রজেক্টটি সংরক্ষণ করুন। এবার, অ্যাপটি (যা হট রিস্টার্ট নামে পরিচিত) পুনরায় চালু করুন, কারণ আমরা ফন্টগুলি পরিবর্তন করেছি।
অ্যান্ড্রয়েড | আইওএস |
|
|
লগইন এবং হোম স্ক্রিনের টেক্সট ভিন্ন দেখায়—কিছু টেক্সট রুবিক ফন্ট ব্যবহার করে, এবং অন্যান্য টেক্সট কালো বা সাদা রঙের পরিবর্তে বাদামী রঙে রেন্ডার করা হয়। আইকনগুলিও বাদামী রঙে রেন্ডার করা হয়।
লেখাটি ছোট করুন
লেবেলগুলো অনেক বড়।
home.dart এ, সবচেয়ে ভেতরের কলামের children: পরিবর্তন করুন:
// TODO: Change innermost Column (103)
children: <Widget>[
// TODO: Handle overflowing labels (103)
Text(
product.name,
style: theme.textTheme.button,
softWrap: false,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
const SizedBox(height: 4.0),
Text(
formatter.format(product.price),
style: theme.textTheme.bodySmall,
),
// End new code
],
টেক্সটটি মাঝখানে রাখুন এবং ফেলে দিন
আমরা লেবেলগুলিকে কেন্দ্রীভূত করতে চাই এবং প্রতিটি ছবির নীচের অংশের পরিবর্তে প্রতিটি কার্ডের নীচে লেখাটি সারিবদ্ধ করতে চাই।
লেবেলগুলিকে প্রধান অক্ষের শেষ (নীচে) সরান এবং সেগুলিকে কেন্দ্রীভূত করুন::
// TODO: Align labels to the bottom and center (103)
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
আপনার প্রকল্পটি সংরক্ষণ করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
এটা অনেক ভালো দেখাচ্ছে।
টেক্সট ফিল্ডের থিম
আপনি InputDecorationTheme ব্যবহার করে টেক্সট ফিল্ডে সাজসজ্জার থিমও নির্ধারণ করতে পারেন।
app.dart এ, _buildShrineTheme() পদ্ধতিতে, একটি inputDecorationTheme: মান উল্লেখ করুন:
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: OutlineInputBorder(),
),
এই মুহূর্তে, টেক্সট ফিল্ডগুলিতে একটি filled ডেকোরেশন আছে। আসুন এটি সরিয়ে ফেলি। filled সরিয়ে inputDecorationTheme নির্দিষ্ট করলে টেক্সট ফিল্ডগুলিকে আউটলাইন স্টাইল দেওয়া হবে।
login.dart এ, filled: true মানগুলি সরিয়ে ফেলুন:
// Remove filled: true values (103)
TextField(
controller: _usernameController,
decoration: const InputDecoration(
// Removed filled: true
labelText: 'Username',
),
),
const SizedBox(height: 12.0),
TextField(
controller: _passwordController,
decoration: const InputDecoration(
// Removed filled: true
labelText: 'Password',
),
obscureText: true,
),
হট রিস্টার্ট। যখন ইউজারনেম ফিল্ড সক্রিয় থাকে (যখন আপনি এটি টাইপ করছেন) তখন আপনার লগইন স্ক্রিনটি এইরকম দেখাবে:
অ্যান্ড্রয়েড | আইওএস |
|
|
একটি টেক্সট ফিল্ডে টাইপ করুন—বর্ডার এবং ভাসমান লেবেলগুলি প্রাথমিক রঙে রেন্ডার হয়। কিন্তু আমরা এটি খুব সহজে দেখতে পাই না। যাদের পিক্সেলের পার্থক্য করতে সমস্যা হয় এবং পর্যাপ্ত রঙের বৈপরীত্য নেই তাদের জন্য এটি অ্যাক্সেসযোগ্য নয়। (আরও তথ্যের জন্য, মেটেরিয়াল গাইডলাইনস রঙ এবং অ্যাক্সেসিবিলিটি নিবন্ধটি দেখুন।)
app.dart এ, inputDecorationTheme: এর অধীনে একটি focusedBorder: উল্লেখ করুন: :
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrineBrown900,
),
),
),
এরপর, inputDecorationTheme: এর অধীনে একটি floatingLabelStyle: উল্লেখ করুন:
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrineBrown900,
),
),
floatingLabelStyle: TextStyle(
color: kShrineBrown900,
),
),
অবশেষে, বর্ধিত বৈসাদৃশ্যের জন্য বাতিল বোতামটি প্রাথমিকের পরিবর্তে গৌণ রঙ ব্যবহার করতে দিন।
TextButton(
child: const Text('CANCEL'),
onPressed: () {
_usernameController.clear();
_passwordController.clear();
},
style: TextButton.styleFrom(
primary: Theme.of(context).colorScheme.secondary,
),
),
আপনার প্রকল্পটি সংরক্ষণ করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
৬. উচ্চতা সামঞ্জস্য করুন
এখন যেহেতু আপনি পৃষ্ঠাটি নির্দিষ্ট রঙ এবং টাইপোগ্রাফি দিয়ে স্টাইল করেছেন যা শ্রাইনের সাথে মেলে, আসুন উচ্চতা সামঞ্জস্য করি।
NEXT বোতামের উচ্চতা পরিবর্তন করুন
একটি ElevatedButton এর জন্য ডিফল্ট উচ্চতা হল 2। আসুন এটি আরও উঁচু করি।
login.dart এ, NEXT ElevatedButton এ একটি style: মান যোগ করুন:
ElevatedButton(
child: const Text('NEXT'),
onPressed: () {
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
foregroundColor: kShrineBrown900,
backgroundColor: kShrinePink100,
elevation: 8.0,
),
),
আপনার প্রকল্পটি সংরক্ষণ করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
কার্ডের উচ্চতা সামঞ্জস্য করুন
এই মুহূর্তে, কার্ডগুলি সাইটের নেভিগেশনের পাশে একটি সাদা পৃষ্ঠে পড়ে আছে।
home.dart এ, কার্ডগুলিতে একটি elevation: মান যোগ করুন:
// TODO: Adjust card heights (103)
elevation: 0.0,
প্রকল্পটি সংরক্ষণ করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
তুমি কার্ডের নীচের ছায়া সরিয়ে ফেলেছ।
৭. আকৃতি যোগ করুন
শ্রাইনের একটি দুর্দান্ত জ্যামিতিক শৈলী রয়েছে, যা অষ্টভুজাকার বা আয়তক্ষেত্রাকার আকৃতির উপাদানগুলিকে সংজ্ঞায়িত করে। আসুন হোম স্ক্রিনে কার্ডগুলিতে এবং লগইন স্ক্রিনে টেক্সট ফিল্ড এবং বোতামগুলিতে সেই আকৃতির স্টাইলিংটি বাস্তবায়ন করি।
লগইন স্ক্রিনে টেক্সট ফিল্ডের আকার পরিবর্তন করুন
app.dart এ, নিম্নলিখিত ফাইলটি আমদানি করুন:
import 'supplemental/cut_corners_border.dart';
এখনও app.dart এ আছে, একটি কাটা কোণার সীমানা ব্যবহার করতে টেক্সট ফিল্ড ডেকোরেশন থিমটি পরিবর্তন করুন:
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: CutCornersBorder(),
focusedBorder: CutCornersBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrineBrown900,
),
),
floatingLabelStyle: TextStyle(
color: kShrineBrown900,
),
),
লগইন স্ক্রিনে বোতামের আকার পরিবর্তন করুন
login.dart এ, CANCEL বোতামে একটি বেভেলড আয়তক্ষেত্রাকার সীমানা যোগ করুন:
TextButton(
child: const Text('CANCEL'),
onPressed: () {
_usernameController.clear();
_passwordController.clear();
},
style: TextButton.styleFrom(
foregroundColor: kShrineBrown900,
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
),
),
),
টেক্সটবাটনের কোন দৃশ্যমান আকৃতি নেই, তাহলে কেন একটি বর্ডার আকৃতি যোগ করবেন? তাই স্পর্শ করলে রিপল অ্যানিমেশন একই আকৃতিতে আবদ্ধ থাকে।
এবার NEXT বোতামে একই আকৃতি যোগ করুন:
ElevatedButton(
child: const Text('NEXT'),
onPressed: () {
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
foregroundColor: kShrineBrown900,
backgroundColor: kShrinePink100,
elevation: 8.0,
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
),
),
),
সকল বোতামের আকৃতি পরিবর্তন করার জন্য, আমরা app.dart এ elevatedButtonTheme অথবা textButtonTheme ব্যবহার করতে পারি। এটি শিক্ষার্থীর জন্য একটি চ্যালেঞ্জ হিসেবে রেখে দেওয়া হয়েছে!
হট রিস্টার্ট।
অ্যান্ড্রয়েড | আইওএস |
|
|
৮. লেআউট পরিবর্তন করুন
এরপর, আসুন লেআউট পরিবর্তন করে বিভিন্ন আকৃতির অনুপাত এবং আকারে কার্ডগুলি দেখাই, যাতে প্রতিটি কার্ড অন্যদের থেকে অনন্য দেখায়।
গ্রিডভিউকে অ্যাসিমেট্রিকভিউ দিয়ে প্রতিস্থাপন করুন
আমরা ইতিমধ্যেই একটি অসমমিত লেআউটের জন্য ফাইলগুলি লিখে ফেলেছি।
home.dart এ, নিম্নলিখিত আমদানি যোগ করুন:
import 'supplemental/asymmetric_view.dart';
_buildGridCards মুছে ফেলুন এবং body প্রতিস্থাপন করুন:
body: AsymmetricView(
products: ProductsRepository.loadProducts(Category.all),
),
প্রকল্পটি সংরক্ষণ করুন।
অ্যান্ড্রয়েড | আইওএস |
|
|
এখন পণ্যগুলি একটি বোনা-অনুপ্রাণিত প্যাটার্নে অনুভূমিকভাবে স্ক্রোল করা হয়।
৯. অন্য থিম চেষ্টা করুন (ঐচ্ছিক)
রঙ আপনার ব্র্যান্ড প্রকাশের একটি শক্তিশালী উপায়, এবং রঙের সামান্য পরিবর্তন আপনার ব্যবহারকারীর অভিজ্ঞতার উপর একটি বড় প্রভাব ফেলতে পারে। এটি পরীক্ষা করার জন্য, আসুন দেখি ব্র্যান্ডের রঙের স্কিমটি যদি কিছুটা ভিন্ন হত তবে শ্রাইন কেমন দেখাত।
রঙ পরিবর্তন করুন
colors.dart এ, নিম্নলিখিত রঙটি যোগ করুন:
const kShrinePurple = Color(0xFF5D1049);
app.dart এ, _buildShrineTheme() ফাংশনটি নিম্নলিখিতটিতে পরিবর্তন করুন:
ThemeData _buildShrineTheme() {
final ThemeData base = ThemeData.light();
return base.copyWith(
colorScheme: base.colorScheme.copyWith(
primary: kShrinePurple,
secondary: kShrinePurple,
error: kShrineErrorRed,
),
scaffoldBackgroundColor: kShrineSurfaceWhite,
textSelectionTheme: const TextSelectionThemeData(
selectionColor: kShrinePurple,
),
appBarTheme: const AppBarTheme(
foregroundColor: kShrineBrown900,
backgroundColor: kShrinePink100,
),
inputDecorationTheme: const InputDecorationTheme(
border: CutCornersBorder(),
focusedBorder: CutCornersBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrinePurple,
),
),
floatingLabelStyle: TextStyle(
color: kShrinePurple,
),
),
);
}
হট রিস্টার্ট। নতুন থিমটি এখন প্রদর্শিত হবে।
অ্যান্ড্রয়েড | আইওএস |
|
|
অ্যান্ড্রয়েড | আইওএস |
|
|
ফলাফলটা একেবারেই আলাদা! আসুন app.dart's _buildShrineTheme এই ধাপের আগে যেমন ছিল তেমন অবস্থায় ফিরিয়ে আনি। অথবা 104 এর স্টার্টার কোড ডাউনলোড করি।
১০. অভিনন্দন!
এতক্ষণে, আপনি এমন একটি অ্যাপ তৈরি করেছেন যা আপনার ডিজাইনারের ডিজাইনের স্পেসিফিকেশনের সাথে সাদৃশ্যপূর্ণ।
পরবর্তী পদক্ষেপ
আপনি এখন নিম্নলিখিত Material Flutter ব্যবহার করেছেন: থিম, টাইপোগ্রাফি, উচ্চতা এবং আকৃতি। আপনি Material Flutter লাইব্রেরিতে আরও উপাদান এবং সাবসিস্টেম অন্বেষণ করতে পারেন।
আমরা কীভাবে অনুভূমিকভাবে স্ক্রলিং, অসমমিতিক লেআউট গ্রিড তৈরি করেছি তা জানতে supplemental ডিরেক্টরির ফাইলগুলি খতিয়ে দেখুন।
আপনার পরিকল্পিত অ্যাপ ডিজাইনে যদি এমন উপাদান থাকে যা লাইব্রেরিতে উপাদানহীন থাকে? MDC-104: Material Advanced Components- এ আমরা দেখাবো কিভাবে Material Flutter লাইব্রেরি ব্যবহার করে কাস্টম উপাদান তৈরি করে একটি পছন্দসই চেহারা অর্জন করতে হয়।