Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button not clickable in custom StoryItem #203

Open
CodeCuration opened this issue Sep 4, 2024 · 1 comment
Open

Button not clickable in custom StoryItem #203

CodeCuration opened this issue Sep 4, 2024 · 1 comment

Comments

@CodeCuration
Copy link

I've created a custom story with an ElevatedButton at the bottom. When i click the button my click is not recognized and instead it just moves to the next story.

StoryItem buildTextStatus(StatusModel status, bool shown) {
    return StoryItem(
      Container(
        width: double.infinity,
        height: double.infinity,
        color: status.backgroundColor,
        child: SafeArea(
          child: Stack(
            children: [
              Align(
                alignment: Alignment.center,
                child: Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(20),
                  child: AutoSizeText(
                    status.caption!,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 40,
                    ),
                    minFontSize: 18,
                    maxFontSize: 30,
                    maxLines: 6,
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              if (status.link != null)
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 20),
                    child: ElevatedButton.icon(
                      style: ButtonStyle(
                        backgroundColor:
                            WidgetStateProperty.all(Colors.white),
                        foregroundColor:
                            WidgetStateProperty.all(status.backgroundColor),
                        elevation: WidgetStateProperty.all(1),
                      ),
                      onPressed: () {
                        print("Opening link: ${status.link}");
                      },
                      icon: Icon(
                        Icons.open_in_browser,
                        color: status.backgroundColor,
                        size: 20,
                      ),
                      label: Text(
                        "OPEN LINK",
                        style: TextStyle(
                          color: status.backgroundColor,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
      shown: shown,
      duration: status.duration,
    );
  }
@CodeCuration CodeCuration changed the title Button not clickable in custom story build Button not clickable in custom StoryItem Sep 4, 2024
@CodeCuration
Copy link
Author

The hack for this to work is:
Wrap Button or your custom widget with GestureDetector and set behavior to HitTestBehavior.deferToChild. Then listen taps with onTapDown.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant