persitent theming, animated icons, config screen

lib/main.dart

@@ -1,38 +1,49 @@
 import 'package:device_preview/device_preview.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:fst_app_flutter/models/theme_model.dart';
+import 'package:fst_app_flutter/models/preferences/theme_model.dart';
 import 'package:fst_app_flutter/routing/generate_routes.dart';
-
 import 'package:fst_app_flutter/utils/app_theme.dart';
 import 'package:provider/provider.dart';
 
-void main() {
- runApp(DevicePreview(child: FSTApp()));
+void main() async {
+ WidgetsFlutterBinding.ensureInitialized();
+ ThemeModel themeModel = ThemeModel();
+ await themeModel.init();
+ runApp(DevicePreview(
+ child: FSTApp(
+ themeModel: themeModel,
+ )));
 }
 
 class FSTApp extends StatelessWidget {
+ final ThemeModel themeModel;
+
+ FSTApp({Key key, this.themeModel}) : super(key: key);
  // This widget is the root of the application.
  @override
  Widget build(BuildContext context) {
-
  return ChangeNotifierProvider(
- create: (context) => ThemeModel(),
- child: Consumer<ThemeModel>(
- builder:(context, themeModel, child) {
- SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
- statusBarColor: AppTheme.getTheme(themeModel.selectedTheme,MediaQuery.platformBrightnessOf(context)).primaryColor,
- ));
- return MaterialApp(
- debugShowCheckedModeBanner: false,
- theme: AppTheme.getTheme(ThemeMode.light, MediaQuery.platformBrightnessOf(context)),
- darkTheme: AppTheme.getTheme(ThemeMode.dark, MediaQuery.platformBrightnessOf(context)),
- themeMode: themeModel.selectedTheme, 
- title: 'FST App',
- builder: DevicePreview.appBuilder,
- onGenerateRoute: Router.generateRoute,
- );
- },
- ));
+ create: (context) => themeModel,
+ builder: (context, child) => Consumer<ThemeModel>(
+ builder: (context, themeModel, child) {
+ SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
+ statusBarColor: AppTheme.getTheme(themeModel.selectedTheme,
+ MediaQuery.platformBrightnessOf(context))
+ .primaryColor,
+ ));
+ return MaterialApp(
+ debugShowCheckedModeBanner: false,
+ theme: AppTheme.getTheme(ThemeMode.light,
+ MediaQuery.platformBrightnessOf(context)),
+ darkTheme: AppTheme.getTheme(
+ ThemeMode.dark, MediaQuery.platformBrightnessOf(context)),
+ themeMode: themeModel.selectedTheme,
+ title: 'FST App',
+ builder: DevicePreview.appBuilder,
+ onGenerateRoute: Router.generateRoute,
+ );
+ },
+ ));
  }
 }

lib/models/preferences/theme_model.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:fst_app_flutter/models/preferences/theme_preference.dart';
+
+class ThemeModel with ChangeNotifier {
+ static ThemePreference _themePreference = ThemePreference();
+ //set to system theme by default
+ ThemeMode _currentTheme;
+
+ init() async {
+ _currentTheme = await _themePreference.mode;
+ }
+
+ ThemeMode get selectedTheme => _currentTheme;
+
+ switchThemeTo(ThemeMode themeMode) {
+ _currentTheme = themeMode;
+ _themePreference.setThemeMode(themeMode);
+ notifyListeners();
+ }
+}

lib/preferences/theme_preference.dart → lib/models/preferences/theme_preference.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shared_preferences/shared_preferences.dart';
+import 'dart:async';
 
 class ThemePreference {
  var lightThemeStatus = ThemeMode.light.toString();
@@ -12,7 +13,7 @@ class ThemePreference {
  }
 
  setThemeMode(ThemeMode option) async {
- _initializeFromDisk();
+ await _initializeFromDisk();
  if (option == ThemeMode.dark) {
  prefs.setBool(darkThemeStatus, true);
  prefs.setBool(lightThemeStatus, false);
@@ -27,9 +28,9 @@ class ThemePreference {
  prefs.setBool(systemThemeStatus, true);
  }
  }
- 
- ThemeMode get mode {
- _initializeFromDisk();
+
+ Future<ThemeMode> get mode async {
+ await _initializeFromDisk();
  if (prefs.getBool(darkThemeStatus) ?? false) {
  return ThemeMode.dark;
  } else if (prefs.getBool(lightThemeStatus) ?? false) {

lib/routing/generate_routes.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:fst_app_flutter/routing/slide_up_route.dart';
+import 'package:fst_app_flutter/screens/app_preferences_screen/app_preferences_view.dart';
 import 'package:fst_app_flutter/screens/contact_screen/contact_detail_page.dart';
 import 'package:fst_app_flutter/screens/contact_screen/contact_view.dart';
 import 'package:fst_app_flutter/screens/homescreen/home_view.dart';
@@ -14,9 +15,10 @@ class Router {
  return MaterialPageRoute(builder: (context) => ContactView());
  case contactDetailRoute:
  return SlideUpPageRoute(page: ContactDetailPage(settings.arguments));
+ case appPreferencesRoute:
+ return MaterialPageRoute(builder: (context) => AppPreferencesView());
  default:
- return MaterialPageRoute(
- builder: (context) => HomeView());
+ return MaterialPageRoute(builder: (context) => HomeView());
  }
  }
 }

lib/routing/routes.dart

@@ -8,3 +8,6 @@ const contactRoute = '/contact';
 
 /// [ContactDetailPage] route
 const contactDetailRoute = '/contactDetail';
+
+/// [AppPreferencesView] route
+const appPreferencesRoute = '/appConfig';

lib/routing/slide_up_route.dart

@@ -5,13 +5,14 @@ class SlideUpPageRoute extends PageRouteBuilder {
 
  SlideUpPageRoute({@required this.page})
  : super(
- transitionDuration: Duration(milliseconds: 400),
+  transitionDuration: Duration(milliseconds: 400),
  pageBuilder: (context, animation1, animation2) => page,
  transitionsBuilder: (context, animation1, animation2, child) =>
  SlideTransition(
- position: Tween<Offset>(
- begin: const Offset(0, 1), end: Offset.zero)
- .animate(CurvedAnimation(parent: animation1, curve: Curves.easeOut)),
+ position:
+ Tween<Offset>(begin: const Offset(0, 1), end: Offset.zero)
+ .animate(CurvedAnimation(
+ parent: animation1, curve: Curves.easeOut)),
  child: child,
  ));
 }

lib/routing/stateful_popup_route.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+class StatefulPopupRoute extends PopupRoute {
+ Widget page;
+
+ StatefulPopupRoute({RouteSettings settings, this.page})
+ : super(
+ settings: settings,
+ );
+
+ @override
+ Color get barrierColor => Colors.black54;
+
+ @override
+ bool get barrierDismissible => true;
+
+ @override
+ String get barrierLabel => 'Stateful popup barrier';
+
+ @override
+ Widget buildPage(BuildContext context, Animation<double> animation,
+ Animation<double> secondaryAnimation) {
+ return page;
+ }
+
+ @override
+ Duration get transitionDuration => Duration(milliseconds: 300);
+}

lib/screens/app_preferences_screen/app_preferences_view.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:fst_app_flutter/screens/app_preferences_screen/app_preferences_view_mobile.dart';
+import 'package:fst_app_flutter/screens/app_preferences_screen/app_preferences_view_tablet.dart';
+import 'package:fst_app_flutter/widgets/orientation_layout.dart';
+import 'package:fst_app_flutter/widgets/screen_type_layout.dart';
+
+class AppPreferencesView extends StatelessWidget {
+ const AppPreferencesView({Key key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return ScreenTypeLayout(
+ mobile: OrientationLayout(
+ portrait: (context) => AppPreferencesViewMobilePortrait(),
+ landscape: (context) => AppPreferencesViewMobileLandscape(),
+ ),
+ tablet: OrientationLayout(
+ portrait: (context) => AppPreferencesViewTabletPortrait(),
+ landscape: (context) => AppPreferencesViewTabletLandscape(),
+ ),
+ );
+ }
+}

lib/screens/app_preferences_screen/app_preferences_view_mobile.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:fst_app_flutter/models/preferences/theme_model.dart';
+import 'package:fst_app_flutter/routing/stateful_popup_route.dart';
+import 'package:fst_app_flutter/widgets/preferences/theme_chooser_dialog.dart';
+import 'package:provider/provider.dart';
+
+class AppPreferencesViewMobileLandscape extends StatelessWidget {
+ const AppPreferencesViewMobileLandscape({Key key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return Container();
+ }
+}
+
+class AppPreferencesViewMobilePortrait extends StatelessWidget {
+ const AppPreferencesViewMobilePortrait({Key key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: Text('Settings'),
+ centerTitle: false,
+ ),
+ body: Consumer<ThemeModel>(builder: (context, themeModel, child) {
+ return ListView(children: [
+ ListTile(
+ leading: Icon(Icons.brush),
+ title: Text('Theme'),
+ subtitle:
+ Text(themeModel.selectedTheme.toString().substring(10)),
+ onTap: () => Navigator.push(
+ context,
+ StatefulPopupRoute(
+ page: ThemeChooserDialog(),
+ settings: RouteSettings(arguments: themeModel)),
+ )),
+ Divider(),
+ ]);
+ }));
+ }
+}

lib/screens/app_preferences_screen/app_preferences_view_tablet.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+class AppPreferencesViewTabletLandscape extends StatelessWidget {
+ const AppPreferencesViewTabletLandscape({Key key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ );
+ }
+}
+
+class AppPreferencesViewTabletPortrait extends StatelessWidget {
+ const AppPreferencesViewTabletPortrait({Key key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ );
+ }
+}

lib/screens/contact_screen/contact_detail_page.dart

@@ -1,8 +1,8 @@
 import 'dart:math';
 import 'package:flutter/material.dart';
-import 'package:fst_app_flutter/widgets/contact_card.dart';
 import 'package:fst_app_flutter/utils/open_url.dart';
-import 'package:fst_app_flutter/widgets/contact_detail_image.dart';
+import 'package:fst_app_flutter/widgets/contact_widgets/contact_card.dart';
+import 'package:fst_app_flutter/widgets/contact_widgets/contact_detail_image.dart';
 
 /// A page that shows all the details for the selected contact.
 /// It allows the user to open websites, call the contact and send an email to
@@ -38,7 +38,7 @@ class ContactDetailPage extends StatelessWidget {
  mq.size.width / 2, (mq.size.height / 2.5) / 2),
  scale:
  (mq.devicePixelRatio / mq.size.aspectRatio) * 1.5,
- color: Colors.blue[800])),
+ color: Theme.of(context).primaryColorDark)),
  title: Padding(
  padding: EdgeInsets.only(right: mq.size.width / 4),
  child: Text(