blackmann / story_view

Story view for apps with stories.
BSD 3-Clause "New" or "Revised" License
422 stars 349 forks source link

Button not clickable in custom StoryItem #203

Open CodeCuration opened 2 months ago

CodeCuration commented 2 months ago

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 commented 2 months ago

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.