১. ভূমিকা
| মেটেরিয়াল কম্পোনেন্ট (MDC) ডেভেলপারদের মেটেরিয়াল ডিজাইন প্রয়োগ করতে সাহায্য করে। Google-এর ইঞ্জিনিয়ার ও UX ডিজাইনারদের একটি টিম এটি তৈরি করেছে। MDC-তে অনেক সুন্দর ও কার্যকরী UI কম্পোনেন্ট আছে এবং এটি Android, iOS, ওয়েব ও Flutter-এর জন্য উপলভ্য। flutter.material.io/develop |
আপনি এখন Material Flutter ব্যবহার করে আপনার অ্যাপের স্বতন্ত্র স্টাইল আগের চেয়ে আরও বেশি কাস্টমাইজ করতে পারবেন। মেটেরিয়াল ডিজাইন সম্প্রতি আরও উন্নত হওয়ায়, ডিজাইনার ও ডেভেলপাররা তাদের প্রোডাক্টের ব্র্যান্ডকে আরও বেশি নমনীয়তার সাথে প্রকাশ করতে পারেন।
MDC-101 এবং MDC-102 কোডল্যাবে, আপনি পোশাক ও ঘরের জিনিসপত্র বিক্রি করে এমন একটি ই-কমার্স অ্যাপ Shrine-এর প্রাথমিক বিষয়গুলি তৈরি করতে Material Flutter ব্যবহার করেছেন। এই অ্যাপে একটি ইউজার ফ্লো আছে যা লগ-ইন স্ক্রিন দিয়ে শুরু হয়, তারপর ব্যবহারকারীকে এমন একটি হোম স্ক্রিনে নিয়ে যায় যেখানে প্রোডাক্ট দেখানো হয়।
আপনি কী তৈরি করবেন
এই কোডল্যাবে, আপনি এগুলি ব্যবহার করে Shrine অ্যাপ কাস্টমাইজ করবেন:
- রঙ
- টাইপোগ্রাফি
- উচ্চতা
- আকার
- লেআউট
Android | iOS |
|
|
|
|
এই কোডল্যাবে Material Flutter কম্পোনেন্ট ও সাবসিস্টেম
- থিম
- টাইপোগ্রাফি
- উচ্চতা
- ছবির তালিকা
Flutter ডেভেলপমেন্টের ক্ষেত্রে আপনার অভিজ্ঞতার লেভেলকে আপনি কত রেটিং দেবেন?
২. আপনার Flutter ডেভেলপমেন্ট এনভায়রনমেন্ট সেট-আপ করা
এই ল্যাব সম্পূর্ণ করতে আপনার দুটি সফ্টওয়্যার প্রয়োজন— Flutter SDK এবং একটি এডিটর।
আপনি এইসব ডিভাইসের যেকোনও একটি ব্যবহার করে কোডল্যাব চালাতে পারবেন:
- আপনার কম্পিউটারের সাথে কানেক্ট করা এবং ডেভেলপার মোডে সেট করা একটি ফিজিক্যাল Android বা iOS ডিভাইস।
- iOS সিমুলেটর (Xcode টুল ইনস্টল করতে হবে)।
- Android এমুলেটর (Android Studio-তে সেট-আপ করতে হবে)।
- ব্রাউজার (ডিবাগিংয়ের জন্য Chrome প্রয়োজন)।
- Windows, Linux বা macOS ডেস্কটপ অ্যাপ্লিকেশন হিসেবে। আপনি যে প্ল্যাটফর্মে ডেপ্লয় করতে চান, আপনাকে অবশ্যই সেই প্ল্যাটফর্মে ডেভেলপ করতে হবে। তাই, আপনি যদি Windows ডেস্কটপ অ্যাপ ডেভেলপ করতে চান, তাহলে উপযুক্ত বিল্ড চেইন অ্যাক্সেস করার জন্য আপনাকে অবশ্যই Windows-এ ডেভেলপ করতে হবে। অপারেটিং সিস্টেম-নির্দিষ্ট প্রয়োজনীয়তা আছে যা 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
প্রোজেক্ট খুলুন এবং অ্যাপটি রান করুন
- আপনার পছন্দের এডিটরে প্রোজেক্টটি খুলুন।
- আপনার বেছে নেওয়া এডিটরের জন্য শুরু করা যাক: টেস্ট ড্রাইভ বিকল্পে গিয়ে "অ্যাপ চালান" সংক্রান্ত নির্দেশাবলী অনুসরণ করুন।
হয়ে গেছে! আপনার ডিভাইসে আগের কোডল্যাব থেকে Shrine লগ-ইন পৃষ্ঠা দেখতে পাওয়া উচিত।
Android | iOS |
|
|
প্রোডাক্ট পৃষ্ঠা দেখতে "পরবর্তী" বিকল্পে ক্লিক করুন।
Android | iOS |
|
|
৪. রঙ পরিবর্তন করা
Shrine ব্র্যান্ডের প্রতিনিধিত্ব করে এমন একটি কালার স্কিম তৈরি করা হয়েছে এবং ডিজাইনার চান যে আপনি Shrine অ্যাপ জুড়ে সেই কালার স্কিম প্রয়োগ করুন
শুরু করতে, আসুন আমাদের প্রোজেক্টে সেই রঙগুলি ইমপোর্ট করি।
তৈরি করুন colors.dart
lib-এ colors.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;
কাস্টম কালার প্যালেট
এই কালার থিমটি কাস্টম কালার (নিচের ছবিতে দেখানো হয়েছে) সহ একজন ডিজাইনার তৈরি করেছেন। এতে Shrine ব্র্যান্ড থেকে বেছে নেওয়া রঙ রয়েছে এবং তা মেটেরিয়াল থিম এডিটরে প্রয়োগ করা হয়েছে, যা আরও সম্পূর্ণ প্যালেট তৈরি করতে সেগুলিকে আরও প্রসারিত করেছে। (এই রঙগুলি ২০১৪ মেটেরিয়াল রঙের প্যালেট থেকে নেওয়া হয়নি।)
Material Theme Editor এগুলিকে সংখ্যা দিয়ে লেবেল করা শেডে সাজিয়েছে, এর মধ্যে প্রতিটি রঙের ৫০, ১০০, ২০০, .... থেকে ৯০০ পর্যন্ত লেবেল রয়েছে। Shrine-এ শুধুমাত্র পিঙ্ক সোয়াচ থেকে ৫০, ১০০ ও ৩০০ শেড এবং ব্রাউন সোয়াচ থেকে ৯০০ শেড ব্যবহার করা হয়।
উইজেটের প্রতিটি রঙিন প্যারামিটার এইসব স্কিমের কোনও একটি রঙের সাথে ম্যাপ করা হয়। যেমন, কোনও টেক্সট ফিল্ড সক্রিয়ভাবে ইনপুট গ্রহণ করার সময় তার সাজসজ্জার রঙ থিমের প্রাথমিক রঙ হওয়া উচিত। সেই রঙটি অ্যাক্সেসযোগ্য না হলে (ব্যাকগ্রাউন্ডের বিপরীতে দেখতে সহজ), পরিবর্তে অন্য রঙ ব্যবহার করুন।
যেসব রঙ ব্যবহার করতে চাই সেগুলি এখন আমাদের কাছে আছে, আমরা সেগুলি UI-তে প্রয়োগ করতে পারি। আমরা ThemeData উইজেটের ভ্যালু সেট করার মাধ্যমে এটি করব যা আমাদের উইজেট হায়ারার্কির সবচেয়ে উপরে থাকা MaterialApp ইনস্ট্যান্সে প্রয়োগ করা হয়।
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)
);
}
এখন, ShrineApp-এর build() ফাংশনের (MaterialApp উইজেটে) শেষে theme: সেট করুন, এটিই আমাদের নতুন থিম হবে:
// TODO: Customize the theme (103)
theme: _kShrineTheme, // New code
আপনার প্রোজেক্ট সেভ করুন। আপনার লগ-ইন স্ক্রিন এখন এইরকম দেখতে হবে:
Android | iOS |
|
|
৫. টাইপোগ্রাফি ও লেবেলের স্টাইল পরিবর্তন করা
রঙের পরিবর্তনের পাশাপাশি, ডিজাইনার আমাদের ব্যবহার করার জন্য নির্দিষ্ট টাইপোগ্রাফিও দিয়েছেন। Flutter-এর ThemeData-তে ৩টি টেক্সট থিম অন্তর্ভুক্ত থাকে। প্রতিটি টেক্সট থিম হল টেক্সট স্টাইলের সংগ্রহ, যেমন "শিরোনাম" ও "টাইটেল"। আমরা অ্যাপের জন্য কয়েকটি স্টাইল ব্যবহার করব এবং কিছু ভ্যালু পরিবর্তন করব।
টেক্সট থিম কাস্টমাইজ করুন
প্রোজেক্টে ফন্ট ইমপোর্ট করতে, সেগুলি 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
এখন আপনি Rubik ফন্ট অ্যাক্সেস ও ব্যবহার করতে পারবেন।
pubspec ফাইল সংক্রান্ত সমস্যার সমাধান করা
আপনি যদি উপরের ঘোষণাটি কাট ও পেস্ট করেন, তাহলে pub get চালানোর সময় সমস্যা হতে পারে। আপনি কোনও সমস্যার সম্মুখীন হলে, প্রথমে লিডিং হোয়াইটস্পেস সরিয়ে দিন এবং ২-স্পেস ইন্ডেন্টেশন ব্যবহার করে স্পেস দিয়ে তা পরিবর্তন করুন। (দুটি স্পেস আগে
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,
);
}
এটি একটি TextTheme নেয় এবং শিরোনাম, শীর্ষক ও ক্যাপশন কেমন দেখাবে তা পরিবর্তন করে।
এইভাবে fontFamily প্রয়োগ করলে, copyWith()-এ (হেডলাইন, শীর্ষক, ক্যাপশন) উল্লেখ করা টাইপোগ্রাফি স্কেল ভ্যালুতেই শুধু পরিবর্তন প্রয়োগ করা হয়।
কিছু ফন্টের জন্য, আমরা ১০০ করে বৃদ্ধি করে কাস্টম fontWeight সেট করছি: w500 (৫০০ ওজন) হল মিডিয়াম এবং w400 হল রেগুলার।
নতুন টেক্সটথিম ব্যবহার করুন
সমস্যার পরে _buildShrineTheme-এ নিম্নলিখিত থিম যোগ করুন:
// TODO: Add the text themes (103)
textTheme: _buildShrineTextTheme(base.textTheme),
textSelectionTheme: const TextSelectionThemeData(
selectionColor: kShrinePink100,
),
আপনার প্রোজেক্ট সেভ করুন। এইবার, আমরা ফন্ট পরিবর্তন করেছি বলে অ্যাপটি রিস্টার্ট করুন (যা হট রিস্টার্ট নামে পরিচিত)।
Android | iOS |
|
|
লগ-ইন ও হোম স্ক্রিনে টেক্সট আলাদা আলাদা দেখাচ্ছে—কিছু টেক্সটে Rubik ফন্ট ব্যবহার করা হয়েছে এবং অন্যান্য টেক্সট কালো বা সাদার পরিবর্তে বাদামী রঙে রেন্ডার করা হয়েছে। আইকনগুলিও বাদামী রঙে রেন্ডার হয়।
টেক্সট ছোট করুন
লেবেলগুলি খুব বড়
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,
আপনার প্রোজেক্ট সেভ করুন।
Android | iOS |
|
|
এটা অনেক ভালো লাগছে।
টেক্সট ফিল্ডে থিম যোগ করা
এছাড়াও, আপনি 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,
),
হট রিস্টার্ট। ইউজারনেম ফিল্ড অ্যাক্টিভ থাকলে (যখন আপনি এতে টাইপ করছেন) আপনার লগ-ইন স্ক্রিনটি এরকম দেখতে হবে:
Android | iOS |
|
|
টেক্সট ফিল্ডে টাইপ করুন—বর্ডার ও ফ্লোটিং লেবেল প্রাথমিক রঙে রেন্ডার হয়। কিন্তু আমরা এটি খুব সহজে দেখতে পাই না। যাদের পিক্সেল আলাদা করতে সমস্যা হয়, তাদের জন্য এটি অ্যাক্সেসিবল নয়, কারণ এতে যথেষ্ট কালার কনট্রাস্ট নেই। (আরও তথ্যের জন্য, মেটেরিয়াল নির্দেশিকা রঙ ও অ্যাক্সেসিবিলিটি নিবন্ধ দেখুন।)
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,
),
),
আপনার প্রোজেক্ট সেভ করুন।
Android | iOS |
|
|
৬. উচ্চতা অ্যাডজাস্ট করা
আপনি যেহেতু Shrine-এর সাথে ম্যাচ করে এমন নির্দিষ্ট রঙ ও টাইপোগ্রাফি দিয়ে পৃষ্ঠাটি স্টাইল করেছেন, তাই আসুন এলিভেশন অ্যাডজাস্ট করি।
'পরবর্তী' বোতামের উচ্চতা পরিবর্তন করুন
ElevatedButton-এর ডিফল্ট এলিভেশন হল ২। আরও বেশি করে তোলা যাক।
login.dart-এ, পরবর্তী ElevatedButton-এ একটি style: ভ্যালু যোগ করুন:
ElevatedButton(
child: const Text('NEXT'),
onPressed: () {
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
foregroundColor: kShrineBrown900,
backgroundColor: kShrinePink100,
elevation: 8.0,
),
),
আপনার প্রোজেক্ট সেভ করুন।
Android | iOS |
|
|
কার্ডের উচ্চতা অ্যাডজাস্ট করুন
এই মুহূর্তে, সাইটের নেভিগেশনের পাশে সাদা সারফেসে কার্ডগুলি রাখা আছে।
home.dart-এ, কার্ডে elevation: ভ্যালু যোগ করুন:
// TODO: Adjust card heights (103)
elevation: 0.0,
প্রোজেক্ট সেভ করুন।
Android | iOS |
|
|
কার্ডের নিচে থাকা ছায়া তুমি সরিয়ে দিয়েছ।
৭. আকৃতি যোগ করা
Shrine-এর একটি দুর্দান্ত জ্যামিতিক স্টাইল রয়েছে, যা অষ্টভুজাকার বা আয়তাকার আকৃতির উপাদানগুলিকে সংজ্ঞায়িত করে। হোম স্ক্রিনে কার্ডে এবং লগ-ইন স্ক্রিনে টেক্সট ফিল্ড ও বোতামে সেই শেপ স্টাইলিং প্রয়োগ করা যাক।
লগ-ইন স্ক্রিনে টেক্সট ফিল্ডের আকার পরিবর্তন করা
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-এ, বাতিল করুন বোতামে একটি বেভেল করা আয়তাকার বর্ডার যোগ করুন:
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)),
),
),
),
TextButton-এর কোনও দৃশ্যমান আকার নেই, তাহলে বর্ডার শেপ যোগ করার কী প্রয়োজন? তাই, স্পর্শ করা হলে রিপেল অ্যানিমেশন একই শেপে সীমাবদ্ধ থাকে।
এখন 'পরবর্তী' বোতামে একই শেপ যোগ করুন:
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-ও ব্যবহার করতে পারি। এটি লার্নারদের জন্য একটি চ্যালেঞ্জ হিসেবেই রেখে দেওয়া হয়েছে!
হট রিস্টার্ট।
Android | iOS |
|
|
৮. লেআউট পরিবর্তন করা
এরপরে, বিভিন্ন অ্যাস্পেক্ট রেশিও ও সাইজে কার্ড দেখানোর জন্য লেআউট পরিবর্তন করা যাক, যাতে প্রতিটি কার্ড অন্যটির থেকে আলাদা দেখায়।
GridView-এর পরিবর্তে AsymmetricView ব্যবহার করুন
আমরা অ্যাসিমেট্রিক্যাল লেআউটের জন্য ফাইলগুলি আগেই লিখেছি।
home.dart-এ, নিম্নলিখিত ইমপোর্ট যোগ করুন:
import 'supplemental/asymmetric_view.dart';
_buildGridCards মুছে দিন এবং body পরিবর্তন করুন:
body: AsymmetricView(
products: ProductsRepository.loadProducts(Category.all),
),
প্রোজেক্ট সেভ করুন।
Android | iOS |
|
|
এখন প্রোডাক্টগুলি অনুভূমিকভাবে বোনা-অনুপ্রাণিত প্যাটার্নে স্ক্রল করে।
৯. অন্য থিম ব্যবহার করে দেখুন (ঐচ্ছিক)
আপনার ব্র্যান্ডকে প্রকাশ করার একটি শক্তিশালী উপায় হল রঙ এবং রঙে সামান্য পরিবর্তন ব্যবহারকারীর অভিজ্ঞতার উপর বড় প্রভাব ফেলতে পারে। এটি পরীক্ষা করে দেখতে, ব্র্যান্ডের কালার স্কিম সামান্য আলাদা হলে Shrine কেমন দেখতে লাগবে তা দেখা যাক।
রঙ পরিবর্তন করা
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,
),
),
);
}
হট রিস্টার্ট। নতুন থিমটি এখন দেখা যাবে।
Android | iOS |
|
|
Android | iOS |
|
|
ফলাফলটি খুব আলাদা! এই ধাপের আগে app.dart's _buildShrineTheme যা ছিল, তা ফিরিয়ে আনা যাক। অথবা 104-এর স্টার্টার কোড ডাউনলোড করুন।
১০. অভিনন্দন!
এতক্ষণে, আপনি এমন একটি অ্যাপ তৈরি করেছেন যা আপনার ডিজাইনারের ডিজাইন স্পেসিফিকেশনের সাথে সামঞ্জস্যপূর্ণ।
পরবর্তী ধাপ
আপনি এখন নিম্নলিখিত Material Flutter ব্যবহার করেছেন: থিম, টাইপোগ্রাফি, এলিভেশন ও শেপ। আপনি Material Flutter লাইব্রেরিতে আরও কম্পোনেন্ট ও সাবসিস্টেম এক্সপ্লোর করতে পারবেন।
আমরা কীভাবে অনুভূমিকভাবে স্ক্রল করা যায় এমন অপ্রতিসম লেআউট গ্রিড তৈরি করেছি তা জানতে supplemental ডিরেক্টরির ফাইলগুলি দেখুন।
আপনার পরিকল্পিত অ্যাপ ডিজাইনে যদি এমন এলিমেন্ট থাকে যার কম্পোনেন্ট লাইব্রেরিতে নেই, তাহলে কী হবে? MDC-104: Material Advanced Components-এ আমরা দেখাই যে কীভাবে মেটিরিয়াল ফ্লাটার লাইব্রেরি ব্যবহার করে কাস্টম কম্পোনেন্ট তৈরি করে কাঙ্খিত লুক পাওয়া যায়।