ایجاد قالب دینامیک فلاتر با Provider — به زبان ساده

همه ما علاقه‌مند هستیم که بتوانیم قالب اپلیکیشن‌هایمان را شخصی‌سازی کنیم. این موضوع در مورد قالب تاریک یا همان dark theme اهمیت دوچندان دارد. قالب تاریک امروزه به یکی از بخش‌های ضروری هر اپلیکیشن موبایل تبدیل شده است. همه اپلیکیشن‌های پرکاربرد از قالب تاریک پشتیبانی می‌کنند برخی از آن‌ها حتی به صورت پیش‌فرض قالب تاریک دارند. در این راهنما با مراحل طراحی یک قالب دینامیک فلاتر که چنین قابلیتی را نیز در خود دارد آشنا خواهیم شد.

قالب‌های تاریک موجب کاهش انتشار نور از صفحه دستگاه می‌شوند و در عین حال کمینه نسبت‌های کنتراست رنگ مورد نیاز کاربر را نیز رعایت می‌کنند. این قالب‌ها موجب بهبود ارگونومی بصری از طریق کاهش فشار روی چشم می‌شوند و میزان روشنایی صفحه را بسته به شرایط نوری موجود کاهش داده و استفاده از صفحه گوشی را در محیط‌های تاریک بهبود می‌بخشند. علاوه بر همه این‌ها موجب کاهش مصرف باتری نیز می‌شوند. دستگاه‌های دارای صفحه OLED امکان خاموش کردن پیکسل‌های سیاه را در هر زمانی از روز دارند.

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی در فرادرس

کلیک کنید

در این مقاله تلاش می‌کنیم با بهره گرفتن از پکیج provider (+) یک قالب تاریک برای اپلیکیشن فلاتر خود طراحی کنیم. به این منظور ابتدا پلاگین provider به فایل pubspec.yaml اضافه کنیم:

1dependencies:   
2  provider: ^3.1.0

به این ترتیب دو قالب ایجاد خواهد شد. یکی قالب روشن و دیگری قالب تاریک است این کار به صورت دستی قابل انجام است، اما ما از panache (+) برای ایجاد قالب استفاده می‌کنیم.

1import 'package:flutter/material.dart';
2
3final darkTheme = ThemeData(
4  primarySwatch: Colors.grey,
5  primaryColor: Colors.black,
6  brightness: Brightness.dark,
7  backgroundColor: const Color(0xFF212121),
8  accentColor: Colors.white,
9  accentIconTheme: IconThemeData(color: Colors.black),
10  dividerColor: Colors.black12,
11);
12
13final lightTheme = ThemeData(
14  primarySwatch: Colors.grey,
15  primaryColor: Colors.white,
16  brightness: Brightness.light,
17  backgroundColor: const Color(0xFFE5E5E5),
18  accentColor: Colors.black,
19  accentIconTheme: IconThemeData(color: Colors.white),
20  dividerColor: Colors.white54,
21);

زمانی که قالب آماده شد، می‌توانیم یک کلاس notifier برای قالب بسازیم تا زمانی که قالب تغییر می‌یابد، به ما اطلاع دهد:

1import 'package:flutter/material.dart';
2
3class ThemeNotifier with ChangeNotifier {
4  ThemeData _themeData;
5
6  ThemeNotifier(this._themeData);
7
8  getTheme() => _themeData;
9
10  setTheme(ThemeData themeData) async {
11    _themeData = themeData;
12    notifyListeners();
13  }
14}

سپس اپلیکیشن را درون ChangeNotifierProvider قرار می‌دهیم. در ادامه می‌توانیم با استفاده از ThemeNotifier قالب را به دست آوریم.

1void main() => runApp(
2      ChangeNotifierProvider<ThemeNotifier>(
3        builder: (_) => ThemeNotifier(darkTheme),
4        child: MyApp(),
5      ),
6    );
7
8class MyApp extends StatelessWidget {
9  @override
10  Widget build(BuildContext context) {
11    final themeNotifier = Provider.of<ThemeNotifier>(context);
12    return MaterialApp(
13      title: 'Chitr',
14      theme: themeNotifier.getTheme(),
15      home: HomePage(),
16    );
17  }
18}

اینک زمان تغییر دستی قالب فرا رسیده است. به این منظور از DayNightSwitch بهره می‌گیریم که عملکردی مشابه ویجت سوئیچ نرمال در فلاتر دارد. درون callback به نام onChanged مربوط به DayNightSwitch اقدام به فراخوانی متد theonThemeChanged می‌کنیم که از themeNotifier برای تعیین قالب و اطلاع‌رسانی به کل اپلیکیشن استفاده می‌کند.

1void main() => runApp(
2      ChangeNotifierProvider<ThemeNotifier>(
3        builder: (_) => ThemeNotifier(darkTheme),
4        child: MyApp(),
5      ),
6    );
7
8class MyApp extends StatelessWidget {
9  @override
10  Widget build(BuildContext context) {
11    final themeNotifier = Provider.of<ThemeNotifier>(context);
12    return MaterialApp(
13      title: 'Chitr',
14      theme: themeNotifier.getTheme(),
15      home: HomePage(),
16    );
17  }
18}

همه کارهای مورد نیاز همین است. به این ترتیب با نوشتن چند خط کد موفق شدیم امکان تغییر دینامیک قالب را به اپلیکیشن فلاتر خود اضافه کنیم. تصویر زیر کارکرد عملی آن را نشان می‌دهد:

اما این قالب هنوز ذخیره نشده است و زمانی که اپلیکیشن ری‌استارت شود، دوباره به وضعیت پیش‌فرض باز می‌گردد. بنابراین می‌توانیم از SharedPreferences برای ذخیره‌سازی قالب جاری کمک بگیریم. قالب کنونی را درون متد theonThemeChanged ذخیره می‌کنیم.

1void onThemeChanged(bool value, ThemeNotifier themeNotifier) async {
2  (value)
3      ? themeNotifier.setTheme(darkTheme)
4      : themeNotifier.setTheme(lightTheme);
5  var prefs = await SharedPreferences.getInstance();
6  prefs.setBool('darkMode', value);
7}

به این منظور از مقدار SharedPreferences درون متد اصلی استفاده می‌کنیم:

1SharedPreferences.getInstance().then((prefs) {
2  var darkModeOn = prefs.getBool('darkMode') ?? true;
3  runApp(
4    ChangeNotifierProvider<ThemeNotifier>(
5      builder: (_) => ThemeNotifier(darkModeOn ? darkTheme : lightTheme),
6      child: MyApp(),
7    ),
8  );
9});

به این ترتیب به پایان مقاله می‌رسیم. برای مشاهده سورس کد کامل این پروژه به این ریپوی گیت‌هاب (+) مراجعه کنید.

اگر این مطالب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌نویسی اندروید
• مجموعه آموزش‌های برنامه‌نویسی
• گوگل فلاتر (Flutter) از صفر تا صد
• فلاتر برای وب - راهنمای مقدماتی
• مفاهیم مقدماتی فلاتر (Flutter) - به زبان ساده

==