update file page UI

lib/apps/file/list.dart

@@ -12,19 +12,14 @@ class FilesList extends StatefulWidget {
 }
 
 const List FILE_DIRECTORY = [
-    ["Recent", Icons.label_rounded],
-    ["Starred", Icons.star_rounded],
-    ["Home", Icons.home_rounded],
-    ["Documents", Icons.my_library_books_rounded],
-    ["Pictures", Icons.collections_rounded],
-    ["Music", Icons.my_library_music_rounded],
-    ["Videos", Icons.video_collection_rounded],
-    ["Trash", Icons.auto_delete_rounded],
+    ["Starred", Icons.star],
+    ["Documents", Icons.description],
+    ["Pictures", Icons.photo],
+    ["Media", Icons.music_video],
+    ["Trash", Icons.auto_delete],
   ];
 
 class _FilesListState extends State<FilesList> {
-  int chooseIndex = 0;
-
   @override
   void initState() {
     super.initState();
@@ -35,37 +30,35 @@ class _FilesListState extends State<FilesList> {
     //
   }
 
-  changeItem(int index, bool isDesktop) {
+  changeItem(String name, bool isDesktop) {
     setState(() {
-        chooseIndex = index;
+        // chooseIndex = index;
         // loadFolder(isDesktop, index);
     });
   }
 
-  Widget item(int index, ColorScheme color, bool isDesktop) {
-    return GestureDetector(
-      behavior: HitTestBehavior.opaque,
-      onTap: () => changeItem(index, isDesktop),
-      child: SizedBox(
-        height: 55.0,
-        child: Row(
-          children: [
-            Container(
-              width: 45.0,
-              height: 45.0,
-              margin: const EdgeInsets.only(left: 20.0, right: 15.0),
-              child: Icon(FILE_DIRECTORY[index][1], size: 24.0, color: color.primary),
+  Widget item(String name, IconData icon, ColorScheme color, bool isDesktop) {
+    return Container(
+      width: 140,
+      height: 50,
       decoration: BoxDecoration(
         color: color.surface,
-                borderRadius: BorderRadius.circular(15.0)
-              ),
-            ),
-            chooseIndex == index
-            ? Text(FILE_DIRECTORY[index][0], style: TextStyle(fontSize: 16.0, color: color.primary))
-            : Text(FILE_DIRECTORY[index][0], style: TextStyle(fontSize: 16.0))
-          ],
+        borderRadius: BorderRadius.circular(15.0),
       ),
+      child: InkWell(
+        onTap: () => changeItem(name, isDesktop),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(left: 16.0, right: 8.0),
+              child: Icon(icon, color: color.primary),
             ),
+            Expanded(
+              child: Text(name, style: TextStyle(fontSize: 14.0))
+            )
+          ]
+      )),
     );
   }
 
@@ -75,6 +68,10 @@ class _FilesListState extends State<FilesList> {
     final lang = AppLocalizations.of(context);
     final isDesktop = isDisplayDesktop(context);
 
+    final List<Widget> widgets = FILE_DIRECTORY.map(
+      (i) => item(i[0], i[1], color, isDesktop)
+    ).toList();
+
     return Scaffold(
       appBar: AppBar(
         title: Text(lang.files + ' (${lang.wip})'),
@@ -84,30 +81,61 @@ class _FilesListState extends State<FilesList> {
         ),
       ),
       body: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 10.0),
-        child: ListView.builder(
-          itemCount: FILE_DIRECTORY.length,
-          itemBuilder: (BuildContext ctx, int index) => item(index, color, isDesktop),
+        padding: const EdgeInsets.all(10.0),
+        child: ListView(
+          children: [
+            const SizedBox(height: 10.0),
+            Wrap(
+              spacing: 8.0,
+              runSpacing: 8.0,
+              alignment: WrapAlignment.start,
+              children: widgets
+            ),
+            const SizedBox(height: 36.0),
+            Text('Recents', style: Theme.of(context).textTheme.title),
+            const SizedBox(height: 16.0),
+            Wrap(
+              spacing: 4.0,
+              runSpacing: 8.0,
+              alignment: WrapAlignment.start,
+              children: <Widget> [
+                FileItem(name: 'myworks.dir'),
+                FileItem(name: 'ESSE-infos-public.dir'),
+                FileItem(name: 'personal.dir'),
+                FileItem(name: 'others.dir'),
+                FileItem(name: 'logo.jpg'),
+                FileItem(name: 'cat.png'),
+                FileItem(name: 'what-is-esse_en.doc'),
+                FileItem(name: '20210101-customers.xls'),
+                FileItem(name: 'product.pdf'),
+                FileItem(name: 'deck.ppt'),
+                FileItem(name: 'coder.md'),
+                FileItem(name: 'how-to-live-in-happy.mp4'),
+                FileItem(name: 'something_important'),
+                FileItem(name: 'car.json'),
+              ],
+            ),
+          ]
         )
       ),
     );
   }
 }
 
-class FilePage extends StatelessWidget {
-  final String title;
-  const FilePage({Key key, this.title}) : super(key: key);
+class FileItem extends StatelessWidget {
+  final String name;
+  const FileItem({Key key, this.name}) : super(key: key);
 
   String remove_dir(String name) {
     if (name.endsWith('.dir')) {
       final i = name.lastIndexOf('.');
       return name.substring(0, i);
     }
-
     return name;
   }
 
-  Widget item(String name) {
+  @override
+  Widget build(BuildContext context) {
     final trueName = remove_dir(name);
     return Container(
       width: 80.0,
@@ -118,17 +146,22 @@ class FilePage extends StatelessWidget {
           Container(
             height: 60.0,
             width: 60.0,
-            padding: const EdgeInsets.only(bottom: 10.0),
             child: fileIcon(name, 48.0),
           ),
           Tooltip(
             message: trueName,
-            child: Text(trueName, style: TextStyle(fontSize: 16.0), maxLines: 1, overflow: TextOverflow.ellipsis),
+            child: Text(trueName,
+              style: TextStyle(fontSize: 14.0), maxLines: 1, overflow: TextOverflow.ellipsis),
           )
         ]
       )
     );
   }
+}
+
+class FilePage extends StatelessWidget {
+  final String title;
+  const FilePage({Key key, this.title}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -137,8 +170,7 @@ class FilePage extends StatelessWidget {
     final lang = AppLocalizations.of(context);
 
     return Scaffold(
-      body: SafeArea(
-        child: Padding(
+      body: Padding(
         padding: const EdgeInsets.all(10.0),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.start,
@@ -223,27 +255,26 @@ class FilePage extends StatelessWidget {
                 runSpacing: 16.0,
                 alignment: WrapAlignment.start,
                 children: <Widget> [
-                    item('myworks.dir'),
-                    item('ESSE-infos-public.dir'),
-                    item('personal.dir'),
-                    item('others.dir'),
-                    item('logo.jpg'),
-                    item('cat.png'),
-                    item('what-is-esse_en.doc'),
-                    item('20210101-customers.xls'),
-                    item('product.pdf'),
-                    item('deck.ppt'),
-                    item('coder.md'),
-                    item('how-to-live-in-happy.mp4'),
-                    item('something_important'),
-                    item('car.json'),
+                  FileItem(name: 'myworks.dir'),
+                  FileItem(name: 'ESSE-infos-public.dir'),
+                  FileItem(name: 'personal.dir'),
+                  FileItem(name: 'others.dir'),
+                  FileItem(name: 'logo.jpg'),
+                  FileItem(name: 'cat.png'),
+                  FileItem(name: 'what-is-esse_en.doc'),
+                  FileItem(name: '20210101-customers.xls'),
+                  FileItem(name: 'product.pdf'),
+                  FileItem(name: 'deck.ppt'),
+                  FileItem(name: 'coder.md'),
+                  FileItem(name: 'how-to-live-in-happy.mp4'),
+                  FileItem(name: 'something_important'),
+                  FileItem(name: 'car.json'),
                 ],
               )
             )
           ]
         )
       )
-      )
     );
   }
 }