App Bar, App Drawer, Theme Switcher

todo-devs · Sep 5, 2021 · 50329c2 · 50329c2
1 parent bf79ef9
commit 50329c2
Show file tree

Hide file tree

Showing 15 changed files with 194 additions and 22 deletions.
diff --git a/file_structure.txt b/file_structure.txt
@@ -67,7 +67,12 @@ lib/
 │   │   ├── light.dart
 │   │   └── theme.dart
 │   └── widgets
+│       ├── app_bar_title.dart
+│       ├── app_drawer.dart
+│       ├── app_drawer_tile.dart
+│       ├── app_tab_bar.dart
 │       ├── loading.dart
+│       ├── theme_icon_button.dart
 │       └── widgets.dart
 ├── gen
 │   └── assets.gen.dart
@@ -82,7 +87,6 @@ lib/
 │   │   ├── home_view.dart
 │   │   └── view.dart
 │   └── widgets
-│       ├── app_tab_bar.dart
 │       └── widgets.dart
 ├── l10n
 │   ├── arb
@@ -116,4 +120,4 @@ lib/
         ├── ussd_item_widget.dart
         └── widgets.dart
 
-35 directories, 81 files
+35 directories, 85 files
diff --git a/lib/app/theme/app_bar_theme.dart b/lib/app/theme/app_bar_theme.dart
@@ -4,4 +4,5 @@ const appBarTheme = AppBarTheme(
   elevation: 0,
   backgroundColor: Colors.transparent,
   centerTitle: true,
+  backwardsCompatibility: false,
 );
diff --git a/lib/app/theme/dark.dart b/lib/app/theme/dark.dart
@@ -2,7 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:todo/app/theme/app_bar_theme.dart';
 
 final darkTheme = ThemeData(
-  appBarTheme: appBarTheme,
+  appBarTheme: appBarTheme.copyWith(
+    foregroundColor: Colors.white,
+  ),
   brightness: Brightness.dark,
   accentColor: Colors.blue,
   fontFamily: 'Montserrat',

diff --git a/lib/app/theme/light.dart b/lib/app/theme/light.dart
@@ -2,7 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:todo/app/theme/app_bar_theme.dart';
 
 final lightTheme = ThemeData(
-  appBarTheme: appBarTheme,
+  appBarTheme: appBarTheme.copyWith(
+    foregroundColor: Colors.blue,
+  ),
   brightness: Brightness.light,
   accentColor: Colors.blue,
   fontFamily: 'Montserrat',

diff --git a/lib/app/widgets/app_bar_title.dart b/lib/app/widgets/app_bar_title.dart
@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+class AppBarTitle extends StatelessWidget {
+  const AppBarTitle(
+    this.title, {
+    Key? key,
+  }) : super(key: key);
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      title,
+      style: const TextStyle(
+        fontWeight: FontWeight.bold,
+      ),
+    );
+  }
+}
diff --git a/lib/app/widgets/app_drawer.dart b/lib/app/widgets/app_drawer.dart
@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:todo/app/app.dart';
+import 'package:todo/gen/assets.gen.dart';
+import 'package:todo/l10n/l10n.dart';
+
+class AppDrawer extends StatelessWidget {
+  const AppDrawer({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+
+    return SafeArea(
+      child: Drawer(
+        child: Stack(
+          children: [
+            ListView(
+              children: [
+                DrawerHeader(
+                  child: Center(
+                    child: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Container(
+                          margin: const EdgeInsets.all(10),
+                          child: Assets.images.logo.image(
+                            width: 75,
+                            height: 75,
+                          ),
+                        ),
+                        Text(
+                          l10n.appName,
+                          style: TextStyle(
+                            fontWeight: FontWeight.bold,
+                            fontSize: 20,
+                            color:
+                                Theme.of(context).brightness == Brightness.dark
+                                    ? Colors.white
+                                    : Colors.blue,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+                AppDrawerTile(
+                  title: 'Cuentas',
+                  icon: Icons.account_circle_outlined,
+                  onTap: () {},
+                ),
+                AppDrawerTile(
+                  title: 'Ajustes',
+                  icon: Icons.settings_outlined,
+                  onTap: () {},
+                ),
+              ],
+            ),
+            const Align(
+              alignment: Alignment.topRight,
+              child: ThemeIconButton(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/app/widgets/app_drawer_tile.dart b/lib/app/widgets/app_drawer_tile.dart
@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+class AppDrawerTile extends StatelessWidget {
+  const AppDrawerTile({
+    Key? key,
+    required this.title,
+    required this.icon,
+    required this.onTap,
+  }) : super(key: key);
+
+  final String title;
+  final IconData icon;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(
+        left: 10,
+        right: 10,
+      ),
+      child: ListTile(
+        leading: Icon(
+          icon,
+          size: 32,
+        ),
+        title: Text(
+          title,
+          style: const TextStyle(
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+        onTap: onTap,
+      ),
+    );
+  }
+}
diff --git a/lib/home/widgets/app_tab_bar.dart → lib/app/widgets/app_tab_bar.dart b/lib/home/widgets/app_tab_bar.dart → lib/app/widgets/app_tab_bar.dart
diff --git a/lib/app/widgets/theme_icon_button.dart b/lib/app/widgets/theme_icon_button.dart
@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:todo/app/app.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class ThemeIconButton extends StatelessWidget {
+  const ThemeIconButton({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final bloc = context.read<ThemeBloc>();
+
+    return BlocBuilder<ThemeBloc, ThemeState>(
+      builder: (context, state) {
+        return IconButton(
+          icon: const Icon(Icons.wb_sunny),
+          onPressed: () {
+            if (state.themeMode == ThemeMode.dark) {
+              bloc.add(const ThemeEvent.setLight());
+            } else {
+              bloc.add(const ThemeEvent.setDark());
+            }
+          },
+        );
+      },
+    );
+  }
+}
diff --git a/lib/app/widgets/widgets.dart b/lib/app/widgets/widgets.dart
@@ -1 +1,5 @@
+export 'app_drawer.dart';
+export 'app_drawer_tile.dart';
+export 'app_tab_bar.dart';
 export 'loading.dart';
+export 'theme_icon_button.dart';
diff --git a/lib/home/view/home_view.dart b/lib/home/view/home_view.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:todo/app/app.dart';
-import 'package:todo/home/home.dart';
+import 'package:todo/app/widgets/app_bar_title.dart';
 import 'package:todo/l10n/l10n.dart';
 import 'package:todo/ussd_codes/ussd_codes.dart';
 
@@ -16,8 +16,10 @@ class HomeView extends StatelessWidget {
       length: 3,
       child: Scaffold(
         appBar: AppBar(
-          title: Text(l10n.appName),
+          title: AppBarTitle(l10n.appName),
         ),
+        drawer: const AppDrawer(),
+        drawerEdgeDragWidth: 40,
         body: Column(
           children: [
             const AppTabBar(),

diff --git a/lib/home/widgets/widgets.dart b/lib/home/widgets/widgets.dart
@@ -1 +1 @@
-export 'app_tab_bar.dart';
+
diff --git a/lib/ussd_codes/view/ussd_category_view.dart b/lib/ussd_codes/view/ussd_category_view.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:todo/app/app.dart';
+import 'package:todo/app/widgets/app_bar_title.dart';
 import 'package:todo/ussd_codes/ussd_codes.dart';
 
 class UssdCategoryView extends StatelessWidget {
@@ -14,9 +15,7 @@ class UssdCategoryView extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: Text(
-          category.name,
-        ),
+        title: AppBarTitle(category.name),
       ),
       body: ListView(
         children: [

diff --git a/lib/ussd_codes/view/ussd_code_form_view.dart b/lib/ussd_codes/view/ussd_code_form_view.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:todo/app/app.dart';
+import 'package:todo/app/widgets/app_bar_title.dart';
 import 'package:todo/ussd_codes/ussd_codes.dart';
 
 class UssdCodeFormView extends StatelessWidget {
@@ -14,9 +15,7 @@ class UssdCodeFormView extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: Text(
-          code.name,
-        ),
+        title: AppBarTitle(code.name),
       ),
       body: Center(
         child: Column(

diff --git a/lines_of_code.txt b/lines_of_code.txt
@@ -8,27 +8,32 @@
     8 lib/ussd_codes/bloc/ussd_code/ussd_code_state.dart
     1 lib/ussd_codes/bloc/bloc.dart
    23 lib/ussd_codes/view/ussd_code_view.dart
-   49 lib/ussd_codes/view/ussd_category_view.dart
+   48 lib/ussd_codes/view/ussd_category_view.dart
     3 lib/ussd_codes/view/view.dart
-   55 lib/ussd_codes/view/ussd_code_form_view.dart
+   54 lib/ussd_codes/view/ussd_code_form_view.dart
    68 lib/ussd_codes/router/ussd_category_page.dart
    24 lib/ussd_codes/router/ussd_codes_location.dart
     3 lib/ussd_codes/router/router.dart
    28 lib/ussd_codes/router/ussd_code_form_page.dart
    24 lib/main_staging.dart
    24 lib/main_production.dart
-    1 lib/app/widgets/widgets.dart
+   20 lib/app/widgets/app_bar_title.dart
+    5 lib/app/widgets/widgets.dart
+   68 lib/app/widgets/app_drawer.dart
+   29 lib/app/widgets/theme_icon_button.dart
    12 lib/app/widgets/loading.dart
+   37 lib/app/widgets/app_drawer_tile.dart
+   47 lib/app/widgets/app_tab_bar.dart
    44 lib/app/app_router.dart
     1 lib/app/bloc/bloc.dart
    53 lib/app/bloc/theme/theme_bloc.dart
   368 lib/app/bloc/theme/theme_bloc.freezed.dart
     7 lib/app/bloc/theme/theme_event.dart
    12 lib/app/bloc/theme/theme_state.dart
     2 lib/app/theme/theme.dart
-    9 lib/app/theme/light.dart
-    9 lib/app/theme/dark.dart
-    7 lib/app/theme/app_bar_theme.dart
+   11 lib/app/theme/light.dart
+   11 lib/app/theme/dark.dart
+    8 lib/app/theme/app_bar_theme.dart
    33 lib/app/app_environment.dart
    17 lib/app/app_bloc_observer.dart
    53 lib/app/app.dart
@@ -70,11 +75,10 @@
    15 lib/l10n/l10n.dart
    15 lib/generated_plugin_registrant.dart
     1 lib/home/widgets/widgets.dart
-   47 lib/home/widgets/app_tab_bar.dart
     3 lib/home/home.dart
-   47 lib/home/view/home_view.dart
+   49 lib/home/view/home_view.dart
     1 lib/home/view/view.dart
     2 lib/home/router/router.dart
    15 lib/home/router/home_location.dart
    28 lib/home/router/home_page.dart
- 3141 total
+ 3304 total