redesign drawer

Author: Leptopoda

lib/src/screens/category/category_screen.dart

@@ -13,6 +13,7 @@ import 'package:nextcloud_cookbook_flutter/src/screens/recipe_import_screen.dart
 import 'package:nextcloud_cookbook_flutter/src/screens/recipes_list_screen.dart';
 import 'package:nextcloud_cookbook_flutter/src/screens/timer_screen.dart';
 import 'package:nextcloud_cookbook_flutter/src/widget/category_card.dart';
+import 'package:nextcloud_cookbook_flutter/src/widget/drawer_item.dart';
 import 'package:nextcloud_cookbook_flutter/src/widget/user_image.dart';
 import 'package:search_page/search_page.dart';
 
@@ -222,7 +223,6 @@ class MainDrawer extends StatelessWidget {
   Widget build(BuildContext context) {
     return Drawer(
       child: ListView(
-        // Important: Remove any padding from the ListView.
         padding: EdgeInsets.zero,
         children: <Widget>[
           DrawerHeader(
@@ -231,12 +231,9 @@ class MainDrawer extends StatelessWidget {
             ),
             child: const UserImage(),
           ),
-          ListTile(
-            trailing: Icon(
-              Icons.alarm_add_outlined,
-              semanticLabel: translate('timer.title'),
-            ),
-            title: Text(translate('timer.title')),
+          DrawerItem(
+            icon: Icons.alarm_add_outlined,
+            title: translate('timer.title'),
             onTap: () {
               Navigator.pop(context);
               Navigator.push(
@@ -247,12 +244,9 @@ class MainDrawer extends StatelessWidget {
               );
             },
           ),
-          ListTile(
-            trailing: Icon(
-              Icons.cloud_download_outlined,
-              semanticLabel: translate('categories.drawer.import'),
-            ),
-            title: Text(translate('categories.drawer.import')),
+          DrawerItem(
+            icon: Icons.cloud_download_outlined,
+            title: translate('categories.drawer.import'),
             onTap: () {
               Navigator.pop(context);
               Navigator.push(
@@ -263,12 +257,9 @@ class MainDrawer extends StatelessWidget {
               );
             },
           ),
-          ListTile(
-            trailing: Icon(
-              Icons.settings_outlined,
-              semanticLabel: translate('categories.drawer.settings'),
-            ),
-            title: Text(translate('categories.drawer.settings')),
+          DrawerItem(
+            icon: Icons.settings_outlined,
+            title: translate('categories.drawer.settings'),
             onTap: () async {
               await Navigator.push(
                 context,
@@ -278,12 +269,9 @@ class MainDrawer extends StatelessWidget {
               );
             },
           ),
-          ListTile(
-            trailing: Icon(
-              Icons.exit_to_app_outlined,
-              semanticLabel: translate('app_bar.logout'),
-            ),
-            title: Text(translate('app_bar.logout')),
+          DrawerItem(
+            icon: Icons.exit_to_app_outlined,
+            title: translate('app_bar.logout'),
             onTap: () {
               BlocProvider.of<AuthenticationBloc>(context)
                   .add(const LoggedOut());

lib/src/widget/drawer_item.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+class DrawerItem extends StatelessWidget {
+  const DrawerItem({
+    required this.title,
+    this.icon,
+    this.onTap,
+    super.key,
+  });
+
+  final String title;
+  final IconData? icon;
+  final GestureTapCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final leading = icon != null
+        ? Icon(
+            icon,
+            semanticLabel: title,
+          )
+        : null;
+
+    return SizedBox(
+      height: 56,
+      child: ListTile(
+        style: ListTileStyle.drawer,
+        shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(
+            Radius.circular(28),
+          ),
+        ),
+        splashColor: Theme.of(context).colorScheme.secondaryContainer,
+        leading: leading,
+        title: Text(title),
+        onTap: onTap,
+      ),
+    );
+  }
+}