nank1ro / flutter-shadcn-ui

shadcn-ui ported in Flutter. Awesome UI components for Flutter, fully customizable.
https://mariuti.com/shadcn-ui
MIT License
657 stars 42 forks source link

`onTap` doesn't trigger on ` ShadInput` #71

Closed Anas35 closed 4 weeks ago

Anas35 commented 1 month ago

Steps to reproduce

  1. Run the attached code snippet.
  2. Tap on the input field

On a closer look, Implementation for onTap is missing.

Expected results

Actual results

Platform

Android

Code sample

Code sample ```dart ShadInput( onTap: () { print("object"); }, ), ```

Flutter Doctor output

Doctor output ```console Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.22.1, on Microsoft Windows [Version 10.0.19045.4412], locale en-IN) [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [√] Chrome - develop for the web [√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.4.3) [√] Android Studio (version 2022.3) [√] VS Code (version 1.86.0) [√] Connected device (4 available) ```
nank1ro commented 1 month ago

I think this is a parameter invented by Supermaven 😅 Would remove it in the next release, feel free to open a PR if you want

Anas35 commented 1 month ago

Should it be implement instead of removing it? I don't know If this is actually supported in shadncn. It could be useful in some case like showing calendar.

nank1ro commented 1 month ago

Why would you show a calendar from an input? Can you provide some examples? It's not a button, but a text input

nank1ro commented 1 month ago

You can use prefix and suffix to add a ShadButton(icon: ...) and from there you can show things like a calendar on tap

Example: https://mariuti.com/shadcn-ui/components/input/#with-prefix-and-suffix

Anas35 commented 1 month ago

ah, yeah! I use text input as button for date picker, etc., as it makes easy to copy the same input design without having to specify anything :)

Another reason I thought of is, since Flutter text field also provides support for onTap, there might be request in future to add it in this library?

Anyway, I think there around other workaround as well to achieve this, we can remove it.

On Sun, 26 May, 2024, 12:14 am Alexandru Mariuti, @.***> wrote:

You can use prefix and suffix to add a ShadButton(icon: ...) and from there you can show things like a calendar on tap

— Reply to this email directly, view it on GitHub https://github.com/nank1ro/flutter-shadcn-ui/issues/71#issuecomment-2131388923, or unsubscribe https://github.com/notifications/unsubscribe-auth/APWMZ6VC6CPCE7PKKXCTXMDZEDL2VAVCNFSM6AAAAABIJCLO26VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZRGM4DQOJSGM . You are receiving this because you authored the thread.Message ID: @.***>

nank1ro commented 1 month ago

I just saw that onTap is present on the material TextField. Never used it. Happy to implement it if it's useful. Do you have a video or something to see it in action? I still can't understand how it works. If I tap on mobile on a TextField, the keyboard should show so I can enter text. But if onTap I show a dialog, then I cannot enter the text on the input. Maybe I'm missing something

Anas35 commented 1 month ago

In my case, the TextField will be read-only. Here the code snippet - you can run it on DartPad.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: SelectDate(),
        ),
      ),
    );
  }
}

class SelectDate extends StatefulWidget {
  const SelectDate({super.key});

  @override
  State<SelectDate> createState() => _SelectDateState();
}

class _SelectDateState extends State<SelectDate> {

  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(
        controller: _controller,
        decoration: InputDecoration(
          labelText: 'Select Date & Time',
          border: OutlineInputBorder()
        ),
        readOnly: true,
        onTap: () async {
          final date = await showDatePicker(
            context: context,
            initialDate: DateTime.now(),
            firstDate: DateTime.now().subtract(const Duration(days: 365)),
            lastDate: DateTime.now().add(const Duration(days: 365)),
          );
          if (!context.mounted || date == null) return;

          final time = await showTimePicker(
            context: context,
            initialTime: TimeOfDay.now(),
          );

          if (time != null) {
            setState(() {
              // TODO: Format using Intl
              _controller.text = date.add(Duration(hours: time.hour, minutes: time.minute)).toString();
            });
          }
        },
      ),
    );
  }
}
nank1ro commented 1 month ago

Can you try the branch fix/input-on-tap with this in your pubspec.yaml:

shadcn_ui:
  git:
    url: https://github.com/nank1ro/flutter-shadcn-ui.git
    ref: fix/input-on-tap

and let me know if it solves your issue please? Thanks