recent_dm_conversations: Make rows white, like in Figma

I missed this in #249 and made the rows transparent, oops. So they
were taking on the scaffold background color, 0xfffafafa a.k.a.
ThemeData.canvasColor.

(If we were using Material 3, the scaffold background color would be
0xfffefbff a.k.a. ThemeData.colorScheme.background. Neither color is
correct for what the Figma actually specifies for the surface
underneath this screen's scrollable content. That's 0xfff6f6f6, and
we'll start using it soon.)

The ink effect on touch was being enabled by the scaffold's
underlying Material. To preserve the ink effect, use a Material here
instead of e.g. a ColoredBox.

See the design in Figma:
  https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=341%3A12378&mode=dev

Author: chrisbobbe

lib/widgets/recent_dm_conversations.dart

@@ -107,34 +107,36 @@ class RecentDmConversationsItem extends StatelessWidget {
             child: Icon(ZulipIcons.group_dm, color: Colors.black.withOpacity(0.5))));
     }
 
-    return InkWell(
-      onTap: () {
-        Navigator.push(context,
-          MessageListPage.buildRoute(context: context, narrow: narrow));
-      },
-      child: ConstrainedBox(constraints: const BoxConstraints(minHeight: 48),
-        child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
-          Padding(padding: const EdgeInsetsDirectional.fromSTEB(12, 8, 0, 8),
-            child: AvatarShape(size: 32, borderRadius: 3, child: avatar)),
-          const SizedBox(width: 8),
-          Expanded(child: Padding(
-            padding: const EdgeInsets.symmetric(vertical: 4),
-            child: Text(
-              style: const TextStyle(
-                fontFamily: 'Source Sans 3',
-                fontSize: 17,
-                height: (20 / 17),
-                color: Color(0xFF222222),
-              ).merge(weightVariableTextStyle(context)),
-              maxLines: 2,
-              overflow: TextOverflow.ellipsis,
-              title))),
-          const SizedBox(width: 12),
-          unreadCount > 0
-            ? Padding(padding: const EdgeInsetsDirectional.only(end: 16),
+    return Material(
+      color: Colors.white,
+      child: InkWell(
+        onTap: () {
+          Navigator.push(context,
+            MessageListPage.buildRoute(context: context, narrow: narrow));
+        },
+        child: ConstrainedBox(constraints: const BoxConstraints(minHeight: 48),
+          child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
+            Padding(padding: const EdgeInsetsDirectional.fromSTEB(12, 8, 0, 8),
+              child: AvatarShape(size: 32, borderRadius: 3, child: avatar)),
+            const SizedBox(width: 8),
+            Expanded(child: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 4),
+              child: Text(
+                style: const TextStyle(
+                  fontFamily: 'Source Sans 3',
+                  fontSize: 17,
+                  height: (20 / 17),
+                  color: Color(0xFF222222),
+                ).merge(weightVariableTextStyle(context)),
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+                title))),
+            const SizedBox(width: 12),
+            unreadCount > 0
+              ? Padding(padding: const EdgeInsetsDirectional.only(end: 16),
                 child: UnreadCountBadge(baseStreamColor: null,
                   count: unreadCount))
             : const SizedBox(),
-        ])));
+          ]))));
   }
 }