feat: add name text field.

app/lib/pages/gesture_editor.dart

@@ -10,6 +10,7 @@ import 'package:dde_gesture_manager/utils/helper.dart';
 import 'package:dde_gesture_manager/utils/keyboard_mapper.dart';
 import 'package:dde_gesture_manager/widgets/dde_button.dart';
 import 'package:dde_gesture_manager/widgets/dde_data_table.dart';
+import 'package:dde_gesture_manager/widgets/dde_text_field.dart';
 import 'package:dde_gesture_manager/widgets/table_cell_shortcut_listener.dart';
 import 'package:dde_gesture_manager/widgets/table_cell_text_field.dart';
 import 'package:flutter/cupertino.dart';
@@ -235,7 +236,6 @@ class GestureEditor extends StatelessWidget {
                   );
                 }),
                 Container(
-                  height: 300,
                   decoration: BoxDecoration(
                     borderRadius: BorderRadius.circular(defaultBorderRadius),
                     border: Border.all(
@@ -243,6 +243,30 @@ class GestureEditor extends StatelessWidget {
                       color: context.t.dividerColor,
                     ),
                   ),
+                  child: Padding(
+                    padding: const EdgeInsets.all(10.0),
+                    child: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Row(
+                          children: [
+                            Padding(
+                              padding: const EdgeInsets.all(8.0),
+                              child: Text('name:'),
+                            ),
+                            Expanded(
+                              child: DTextField(
+                                onComplete: (val) {
+                                  schemeProvider.setProps(name: val);
+                                  /// todo: change name to local list.
+                                },
+                              ),
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
                 ),
               ],
             ),
@@ -301,7 +325,7 @@ List<DDataCell> _buildRowCellsEditing(BuildContext context) {
       .where((node) => !node.fullFiled)
       .map((e) => e.type);
   if (!availableGestures.any((type) => type == gesture.gesture)) {
-    availableGestures = [...availableGestures, gesture.gesture!]..sort();
+    availableGestures = [...availableGestures, gesture.gesture!]..sort((a, b) => a.index - b.index);
   }
 
   var availableDirection = schemeTree.nodes

app/lib/widgets/dde_text_field.dart

@@ -0,0 +1,77 @@
+import 'package:dde_gesture_manager/constants/constants.dart';
+import 'package:dde_gesture_manager/models/settings.provider.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:dde_gesture_manager/extensions.dart';
+
+class DTextField extends StatefulWidget {
+  final String? initText;
+  final String? hint;
+  final Function(String value) onComplete;
+
+  const DTextField({
+    Key? key,
+    this.initText,
+    this.hint,
+    required this.onComplete,
+  }) : super(key: key);
+
+  @override
+  _DTextFieldState createState() => _DTextFieldState();
+}
+
+class _DTextFieldState extends State<DTextField> {
+  final FocusNode _focusNode = FocusNode();
+  final TextEditingController _controller = TextEditingController();
+
+  @override
+  void initState() {
+    _focusNode.addListener(_handleFocusChange);
+    _controller.text = widget.initText ?? '';
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _focusNode.removeListener(_handleFocusChange);
+    super.dispose();
+  }
+
+  _handleFocusChange() {
+    if (!_focusNode.hasFocus) {
+      widget.onComplete(_controller.text);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Focus(
+      child: Builder(builder: (context) {
+        return Container(
+          height: kMinInteractiveDimension * .86,
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(defaultBorderRadius),
+            color: Colors.grey.withOpacity(.3),
+            border: Border.all(
+                width: 2,
+                color: Focus.of(context).hasFocus
+                    ? context.watch<SettingsProvider>().activeColor ?? Color(0xff565656)
+                    : Color(0xff565656)),
+          ),
+          child: Align(
+            alignment: Alignment.centerLeft,
+            child: Padding(
+              padding: const EdgeInsets.only(left: 15),
+              child: TextField(
+                focusNode: _focusNode,
+                cursorColor: context.watch<SettingsProvider>().activeColor,
+                decoration: InputDecoration.collapsed(hintText: widget.hint),
+                controller: _controller,
+              ),
+            ),
+          ),
+        );
+      }),
+    );
+  }
+}