wip: DropdownButton and TextField on DataTable.

app/lib/pages/gesture_editor.dart

@@ -8,6 +8,7 @@ import 'package:dde_gesture_manager/models/settings.provider.dart';
 import 'package:dde_gesture_manager/utils/helper.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/table_cell_text_field.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
@@ -204,11 +205,10 @@ List<DDataRow> _buildDataRows(List<GestureProp>? gestures, BuildContext context)
     }).toList();
 
 List<DDataCell> _buildRowCellsEditing(BuildContext context, GestureProp gesture) => [
-      Container(
+      DButton.dropdown(
-        decoration: BoxDecoration(
+        enabled: true,
-          color: Colors.lightBlue,
-        ),
         child: DropdownButton<int>(
+          icon: Icon(Icons.keyboard_arrow_down_rounded),
           items: [3, 4, 5]
               .map(
                 (e) => DropdownMenuItem<int>(
@@ -218,15 +218,101 @@ List<DDataCell> _buildRowCellsEditing(BuildContext context, GestureProp gesture)
               )
               .toList(),
           value: context.watch<GesturePropProvider>().fingers,
-          onChanged: (value) => context.read<GesturePropProvider>().setProps(fingers: value, editMode: true),
+          onChanged: (value) => context.read<GesturePropProvider>().setProps(
+                fingers: value,
+                editMode: true,
+              ),
           isExpanded: true,
         ),
       ),
-      Center(child: Text('2')),
+      DButton.dropdown(
-      Center(child: Text('3')),
+        enabled: true,
-      Center(child: Text('4')),
+        width: 60.0,
-      TextField(controller: TextEditingController(text: gesture.command)),
+        child: DropdownButton<Gesture>(
-      TextField(controller: TextEditingController(text: gesture.remark)),
+          icon: Icon(Icons.keyboard_arrow_down_rounded),
+          items: Gesture.values
+              .map(
+                (e) => DropdownMenuItem<Gesture>(
+                  child: Text(
+                    '${LocaleKeys.gesture_editor_gestures}.${H.getGestureName(e)}',
+                    textScaleFactor: .8,
+                  ).tr(),
+                  value: e,
+                ),
+              )
+              .toList(),
+          value: context.watch<GesturePropProvider>().gesture,
+          onChanged: (value) => context.read<GesturePropProvider>().setProps(
+                gesture: value,
+                editMode: true,
+              ),
+          isExpanded: true,
+        ),
+      ),
+      DButton.dropdown(
+        enabled: true,
+        width: 100.0,
+        child: DropdownButton<GestureDirection>(
+          icon: Icon(Icons.keyboard_arrow_down_rounded),
+          items: GestureDirection.values
+              .map(
+                (e) => DropdownMenuItem<GestureDirection>(
+                  child: Text(
+                    '${LocaleKeys.gesture_editor_directions}.${H.getGestureDirectionName(e)}',
+                    textScaleFactor: .8,
+                  ).tr(),
+                  value: e,
+                ),
+              )
+              .toList(),
+          value: context.watch<GesturePropProvider>().direction,
+          onChanged: (value) => context.read<GesturePropProvider>().setProps(
+                direction: value,
+                editMode: true,
+              ),
+          isExpanded: true,
+        ),
+      ),
+      DButton.dropdown(
+        enabled: true,
+        width: 100.0,
+        child: DropdownButton<GestureType>(
+          icon: Icon(Icons.keyboard_arrow_down_rounded),
+          items: GestureType.values
+              .map(
+                (e) => DropdownMenuItem<GestureType>(
+                  child: Text(
+                    '${LocaleKeys.gesture_editor_types}.${H.getGestureTypeName(e)}',
+                    textScaleFactor: .8,
+                  ).tr(),
+                  value: e,
+                ),
+              )
+              .toList(),
+          value: context.watch<GesturePropProvider>().type,
+          onChanged: (value) => context.read<GesturePropProvider>().setProps(
+                type: value,
+                editMode: true,
+              ),
+          isExpanded: true,
+        ),
+      ),
+      TableCellTextField(
+        initText: gesture.command,
+        hint: 'pls input cmd',
+        onComplete: (value) => context.read<GesturePropProvider>().setProps(
+              command: value,
+              editMode: true,
+            ),
+      ),
+      TableCellTextField(
+        initText: gesture.remark,
+        hint: 'pls input cmd',
+        onComplete: (value) => context.read<GesturePropProvider>().setProps(
+              remark: value,
+              editMode: true,
+            ),
+      ),
     ].map((e) => DDataCell(e)).toList();
 
 List<DDataCell> _buildRowCellsNormal(BuildContext context, bool selected, GestureProp gesture) => [

app/lib/widgets/dde_button.dart

@@ -1,5 +1,6 @@
 import 'package:dde_gesture_manager/constants/constants.dart';
 import 'package:dde_gesture_manager/extensions.dart';
+import 'package:dde_gesture_manager/models/settings.provider.dart';
 import 'package:flutter/material.dart';
 import 'package:glass_kit/glass_kit.dart';
 
@@ -8,6 +9,8 @@ class DButton extends StatefulWidget {
   final double height;
   final Widget child;
   final GestureTapCallback? onTap;
+  final EdgeInsets? padding;
+  final Color? activeBorderColor;
 
   const DButton({
     Key? key,
@@ -15,6 +18,8 @@ class DButton extends StatefulWidget {
     this.height = defaultButtonHeight,
     required this.child,
     this.onTap,
+    this.padding,
+    this.activeBorderColor,
   }) : super(key: key);
 
   factory DButton.add({
@@ -85,6 +90,22 @@ class DButton extends StatefulWidget {
             message: LocaleKeys.operation_duplicate.tr(),
           ));
 
+  factory DButton.dropdown({
+    Key? key,
+    width = 60.0,
+    height = kMinInteractiveDimension * .86,
+    padding: const EdgeInsets.only(left: 15),
+    required enabled,
+    required DropdownButton child,
+  }) =>
+      DButton(
+        key: key,
+        width: width,
+        height: height,
+        padding: padding,
+        child: child,
+      );
+
   @override
   State<DButton> createState() => _DButtonState();
 }
@@ -95,8 +116,9 @@ class _DButtonState extends State<DButton> {
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
-      onTap: widget.onTap,
+      onTap: widget.child is DropdownButton ? (widget.child as DropdownButton).onTap : widget.onTap,
       child: GlassContainer(
+        padding: widget.padding,
         width: widget.width,
         height: widget.height,
         gradient: LinearGradient(
@@ -104,8 +126,9 @@ class _DButtonState extends State<DButton> {
           begin: Alignment.topCenter,
           end: Alignment.bottomCenter,
         ),
-        borderColor: Color(0xff565656),
+        borderColor:
-        borderWidth: 1,
+            _hovering ? widget.activeBorderColor ?? context.watch<SettingsProvider>().activeColor : Color(0xff565656),
+        borderWidth: 2,
         borderRadius: BorderRadius.circular(defaultBorderRadius),
         child: MouseRegion(
           onEnter: (event) => setState(() {

app/lib/widgets/table_cell_text_field.dart

@@ -0,0 +1,73 @@
+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';
+
+class TableCellTextField extends StatefulWidget {
+  final String? initText;
+  final String? hint;
+  final Function(String value) onComplete;
+
+  const TableCellTextField({
+    Key? key,
+    this.initText,
+    this.hint,
+    required this.onComplete,
+  }) : super(key: key);
+
+  @override
+  _TableCellTextFieldState createState() => _TableCellTextFieldState();
+}
+
+class _TableCellTextFieldState extends State<TableCellTextField> {
+  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 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: EdgeInsets.only(left: 15),
+          child: TextField(
+            focusNode: _focusNode,
+            cursorColor: context.watch<SettingsProvider>().activeColor,
+            decoration: InputDecoration.collapsed(hintText: widget.hint),
+            controller: _controller,
+          ),
+        ),
+      ),
+    );
+  }
+}