Cara Mudah Membuat Dynamic Theme Provider Pada Flutter
Memastikan possible untuk mengubah thema aplikasi kita sesuai keinginan pengguna dengan memanfaatkan ChangeNotifierProvider
pada provider flutter.
1. Install
pubspec.yaml
dependencies:
provider: ^4.0.1
day_night_switch: ^0.0.2+1
kemudian jalankan
flutter pub get
2. Membuat Dynamic Theme Provider
Contoh
susunan directory
❏ lib
❏ page
❏ settings_page.dart
❏ util
❏ theme_notifier.dart
❏ values
❏ theme.dart
❏ main.dart
lib/main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:my_app/values/theme.dart';
import 'package:my_app/util/theme_notifier.dart';
import 'package:my_app/page/settings_page.dart';
void main() => runApp(
ChangeNotifierProvider<ThemeNotifier>(
create: (_) => ThemeNotifier(darkTheme),
child: MyApp(),
),
);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final themeNotifier = Provider.of<ThemeNotifier>(context);
return MaterialApp(
title: 'Chitr',
theme: themeNotifier.getTheme(),
home: SettingsPage(),
);
}
}
lib/values/theme.dart
import 'package:flutter/material.dart';
final darkTheme = ThemeData(
primarySwatch: Colors.grey,
primaryColor: Colors.black,
brightness: Brightness.dark,
backgroundColor: const Color(0xFF212121),
accentColor: Colors.white,
accentIconTheme: IconThemeData(color: Colors.black),
dividerColor: Colors.black12,
);
final lightTheme = ThemeData(
primarySwatch: Colors.grey,
primaryColor: Colors.white,
brightness: Brightness.light,
backgroundColor: const Color(0xFFE5E5E5),
accentColor: Colors.black,
accentIconTheme: IconThemeData(color: Colors.white),
dividerColor: Colors.white54,
);
lib/util/theme_notifier.dart
import 'package:flutter/material.dart';
class ThemeNotifier with ChangeNotifier {
ThemeNotifier(this._themeData);
ThemeData _themeData;
getTheme() => _themeData;
setTheme(ThemeData themeData) async {
_themeData = themeData;
notifyListeners();
}
}
lib/page/settings_page.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:day_night_switch/day_night_switch.dart';
import 'package:my_app/values/theme.dart';
import 'package:my_app/util/theme_notifier.dart';
class SettingsPage extends StatefulWidget {
@override
_SettingsPageState createState() => _SettingsPageState();
}
class _SettingsPageState extends State<SettingsPage> {
var _darkTheme = true;
@override
Widget build(BuildContext context) {
final themeNotifier = Provider.of<ThemeNotifier>(context);
_darkTheme = (themeNotifier.getTheme() == darkTheme);
return Scaffold(
appBar: AppBar(
title: Text('Settings'),
),
body: ListView(
children: <Widget>[
ListTile(
title: Text('Dark Theme'),
contentPadding: const EdgeInsets.only(left: 16.0),
trailing: Transform.scale(
scale: 0.4,
child: DayNightSwitch(
value: _darkTheme,
onChanged: (val) {
setState(() => _darkTheme = val );
onThemeChanged(val, themeNotifier);
},
),
),
),
],
),
);
}
void onThemeChanged(bool value, ThemeNotifier themeNotifier) async {
(value) ? themeNotifier.setTheme(darkTheme) : themeNotifier.setTheme(lightTheme);
}
}
Sekian untuk kali ini semoga bermanfaat :D untuk lebih lanjut bisa kunjungi link tersebut.