فهرست منبع

[flutter]: config create new app button ui

appflowy 3 سال پیش
والد
کامیت
6d3ee38bec

+ 12 - 13
app_flowy/lib/workspace/presentation/widgets/menu/widget/app/create_button.dart

@@ -2,6 +2,7 @@ import 'package:app_flowy/workspace/presentation/home/home_sizes.dart';
 import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:styled_widget/styled_widget.dart';
@@ -23,21 +24,19 @@ class NewAppButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // final theme = context.watch<AppTheme>();
+
+    final child = FlowyTextButton(
+      'New App',
+      fontSize: 12,
+      enableHover: false,
+      onPressed: () async => await _showCreateAppDialog(context),
+      heading: svgWithSize("home/new_app", const Size(16, 16)),
+      padding: EdgeInsets.symmetric(horizontal: Insets.l, vertical: 20),
+    );
+
     return SizedBox(
       height: HomeSizes.menuAddButtonHeight,
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.start,
-        children: [
-          svgWithSize("home/new_app", const Size(16, 16)),
-          TextButton(
-            onPressed: () async => await _showCreateAppDialog(context),
-            child: const FlowyText(
-              'New App',
-              fontSize: 12,
-            ),
-          )
-        ],
-      ).padding(horizontal: Insets.l),
+      child: child,
     ).topBorder(color: Colors.grey.shade300);
   }
 

+ 1 - 0
app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header.dart

@@ -51,6 +51,7 @@ class MenuAppHeader extends StatelessWidget {
           HSpace(MenuAppSizes.expandedIconPadding),
           Expanded(
               child: GestureDetector(
+            behavior: HitTestBehavior.opaque,
             onTapDown: (_) {
               ExpandableController.of(context, rebuildOnChange: false, required: true)?.toggle();
             },

+ 39 - 19
app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart

@@ -57,33 +57,53 @@ class FlowyTextButton extends StatelessWidget {
   final double fontSize;
   final VoidCallback? onPressed;
   final EdgeInsets padding;
-  const FlowyTextButton(this.text,
-      {Key? key,
-      this.onPressed,
-      this.fontSize = 16,
-      this.padding = const EdgeInsets.symmetric(horizontal: 8, vertical: 6)})
-      : super(key: key);
+  final bool enableHover;
+  final Widget? heading;
+  const FlowyTextButton(
+    this.text, {
+    Key? key,
+    this.onPressed,
+    this.fontSize = 16,
+    this.enableHover = true,
+    this.padding = const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+    this.heading,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-    return InkWell(
-      onTap: onPressed,
-      child: FlowyHover(
-        config: HoverDisplayConfig(borderRadius: BorderRadius.circular(6), hoverColor: theme.bg3),
-        builder: (context, onHover) => _render(),
-      ),
-    );
-  }
 
-  Widget _render() {
-    return Padding(
+    List<Widget> children = [];
+    if (heading != null) {
+      children.add(heading!);
+      children.add(const HSpace(6));
+    }
+    children.add(FlowyText(text, fontSize: fontSize));
+
+    Widget child = Padding(
       padding: padding,
-      child: Align(
-        alignment: Alignment.centerLeft,
-        child: FlowyText(text, fontSize: fontSize),
+      child: Expanded(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: children,
+        ),
       ),
     );
+
+    if (enableHover) {
+      return InkWell(
+        onTap: onPressed,
+        child: FlowyHover(
+          config: HoverDisplayConfig(borderRadius: BorderRadius.circular(6), hoverColor: theme.bg3),
+          builder: (context, onHover) => child,
+        ),
+      );
+    } else {
+      return InkWell(
+        onTap: onPressed,
+        child: child,
+      );
+    }
   }
 }
 // return TextButton(