improved design and moved sort button

flutter/lib/common/widgets/peer_tab_page.dart

@@ -17,6 +17,7 @@ import 'package:get/get.dart';
 import 'package:get/get_rx/src/rx_workers/utils/debouncer.dart';
 import 'package:provider/provider.dart';
 import 'package:visibility_detector/visibility_detector.dart';
+import 'package:dropdown_button2/dropdown_button2.dart';
 
 import '../../common.dart';
 import '../../models/platform_model.dart';
@@ -112,19 +113,14 @@ class _PeerTabPageState extends State<PeerTabPage>
                     offstage: !isDesktop,
                     child: _createPeerViewTypeSwitch(context)
                         .marginOnly(left: 13)),
-              ],
-            ),
-          ),
-        ),
-        Row(
-          children: [
-            Expanded(child: SizedBox()),
                 Offstage(
                   offstage: _hideSort,
-              child: PeerSortDropdown(),
+                  child: PeerSortDropdown().marginOnly(left: 8),
                 ),
               ],
             ),
+          ),
+        ),
         _createPeersView(),
       ],
     );
@@ -244,7 +240,7 @@ class _PeerTabPageState extends State<PeerTabPage>
 
   Widget _createPeerViewTypeSwitch(BuildContext context) {
     final textColor = Theme.of(context).textTheme.titleLarge?.color;
-    final activeDeco = BoxDecoration(
+    final deco = BoxDecoration(
       color: Theme.of(context).colorScheme.background,
       borderRadius: BorderRadius.circular(5),
     );
@@ -253,7 +249,7 @@ class _PeerTabPageState extends State<PeerTabPage>
     return Obx(
       () => Container(
         padding: EdgeInsets.all(4.0),
-        decoration: activeDeco,
+        decoration: deco,
         child: InkWell(
             onTap: () async {
               final type = types.elementAt(
@@ -439,39 +435,74 @@ class PeerSortDropdown extends StatefulWidget {
 }
 
 class _PeerSortDropdownState extends State<PeerSortDropdown> {
-  final List<String> sort_names = ['id', 'username', "status"];
+  final List<String> sort_names = ['Remote ID', 'Username', "Status"];
   String _sortType = peerSort.value;
 
   @override
   Widget build(BuildContext context) {
-    return DropdownButton<String>(
+    final deco = BoxDecoration(
-      value: _sortType.isEmpty ? 'id' : _sortType,
+      color: Theme.of(context).colorScheme.background,
-      elevation: 16,
+      borderRadius: BorderRadius.circular(5),
-      underline: SizedBox(),
+    );
-      onChanged: (v) {
+    return Container(
+      padding: EdgeInsets.all(4.0),
+      decoration: deco,
+      child: DropdownButtonHideUnderline(
+        child: DropdownButton2<String>(
+            value: sort_names.contains(_sortType) ? _sortType : sort_names[0],
+            onChanged: (v) async {
               if (v != null) {
-          setState(() {
+                setState(() => _sortType = v);
-            _sortType = v;
+                await bind.setLocalFlutterConfig(
-            bind.setLocalFlutterConfig(
                   k: "peer-sorting",
                   v: _sortType,
                 );
-          });
                 peerSort.value = _sortType;
               }
             },
-      dropdownColor: Theme.of(context).cardColor,
+            customButton: Icon(
-      items: sort_names
+              Icons.sort,
+              size: 18,
+            ),
+            dropdownStyleData: DropdownStyleData(
+              decoration: BoxDecoration(
+                color: Theme.of(context).cardColor,
+                borderRadius: BorderRadius.circular(10),
+              ),
+              width: 160,
+            ),
+            items: [
+              DropdownMenuItem<String>(
+                alignment: Alignment.center,
+                child: Text(
+                  translate("Sort by"),
+                  style: TextStyle(fontWeight: FontWeight.bold),
+                ),
+                enabled: false,
+              ),
+              ...sort_names
                   .map<DropdownMenuItem<String>>(
                     (String value) => DropdownMenuItem<String>(
                       value: value,
-              child: Text(
+                      child: Row(
-                value,
+                        children: [
+                          Icon(
+                            value == _sortType
+                                ? Icons.radio_button_checked_rounded
+                                : Icons.radio_button_off_rounded,
+                            size: 18,
+                          ).paddingOnly(right: 12),
+                          Text(
+                            translate(value),
                             overflow: TextOverflow.ellipsis,
                           ),
+                        ],
+                      ),
                     ),
                   )
                   .toList(),
+            ]),
+      ),
     );
   }
 }

flutter/pubspec.lock

@@ -386,6 +386,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.0.2"
+  dropdown_button2:
+    dependency: "direct main"
+    description:
+      name: dropdown_button2
+      sha256: "4458d81bfd24207f3d58f66f78097064e02f810f94cf1bc80bf20fe7685ebc80"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.0"
   event_bus:
     dependency: transitive
     description:

flutter/pubspec.yaml

@@ -94,6 +94,7 @@ dependencies:
   flutter_keyboard_visibility: ^5.4.0
   texture_rgba_renderer: ^0.0.12
   percent_indicator: ^4.2.2
+  dropdown_button2: ^2.0.0
 
 dev_dependencies:
   icons_launcher: ^2.0.4