fluttercommunity / flutter_sticky_headers

Flutter Sticky Headers - Lets you place "sticky headers" into any scrollable content in your Flutter app. No special wrappers or magic required. Maintainer: @slightfoot
https://pub.dev/packages/sticky_headers
MIT License
1.1k stars 129 forks source link

Sticky Header Not Stick on Top #41

Closed devalp-pro closed 2 years ago

devalp-pro commented 4 years ago

Sticky Header Not Stick on Top

Images

Screenshot_1603361527

Screenshot_1603361536

Step To Reproduce

  1. ListView Builder with Sticky Header
  2. At the end of content put form
  3. Scroll down to form and tap/focus on any input box keyboard will show.
  4. After the keyboard opens just close using the android navigation return key.
  5. Sticky header will show in the middle of the screen.

My Sample Code

ListView.builder(
                  itemCount: 1,
                  controller: _scrollController,
                  physics: BouncingScrollPhysics(),
                  itemBuilder: (context, index) {
                    return StickyHeader(
                      overlapHeaders: true,
                      header: Material(
                        color: AppColors.White,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.zero,
                        ),
                        child: Padding(
                          padding: EdgeInsets.all(10),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.start,
                            mainAxisSize: MainAxisSize.max,
                            children: [
                              InkWell(
                                child: Padding(
                                  padding: EdgeInsets.all(10),
                                  child: Icon(
                                    Icons.comment,
                                    color: AppColors.Red,
                                  ),
                                ),
                                splashColor: AppColors.Red.withOpacity(0.5),
                                onTap: () {
                                  setState(() {
                                    _shareYourThoughts = true;
                                  });
                                  var scrollPosition = _scrollController.position;
                                  if (scrollPosition.viewportDimension < scrollPosition.maxScrollExtent) {
                                    _scrollController.animateTo(
                                      scrollPosition.maxScrollExtent,
                                      duration: new Duration(milliseconds: 200),
                                      curve: Curves.easeOut,
                                    );
                                  }
                                },
                              ),
                              InkWell(
                                child: Padding(
                                  padding: EdgeInsets.all(10),
                                  child: Icon(
                                    Icons.email,
                                    color: AppColors.Red,
                                  ),
                                ),
                                splashColor: AppColors.Red.withOpacity(0.2),
                                onTap: () {},
                              ),
                              InkWell(
                                child: Padding(
                                  padding: EdgeInsets.all(10),
                                  child: Icon(
                                    Icons.file_download,
                                    color: AppColors.Red,
                                  ),
                                ),
                                splashColor: AppColors.Red.withOpacity(0.2),
                                onTap: () async {
                                  var status = await Permission.storage.status;
                                  if (status.isGranted) {
                                    var listDirectories = await _requestExternalStorageDirectory();
                                    if (listDirectories != null) {
                                      _applicationDocumentDirectory = listDirectories[0];
                                    }
                                    if (_applicationDocumentDirectory != null) {
                                      Directory appDownload = Directory(_applicationDocumentDirectory.path);
                                      taskId = await FlutterDownloader.enqueue(
                                        url: postDownloadUrl,
                                        savedDir: appDownload.path,
                                        showNotification: true, // show download progress in status bar (for Android)
                                        openFileFromNotification: true, // click on notification to open downloaded file (for Android)
                                      );
                                    }
                                  }
                                },
                              )
                            ],
                          ),
                        ),
                      ),
                      content: Padding(
                        padding: EdgeInsets.all(20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.start,
                          mainAxisSize: MainAxisSize.max,
                          children: [
                            CategoryButton(
                              category: postCategory,
                              categoryId: state.post.catId,
                            ),
                            Padding(
                              padding: const EdgeInsets.only(top: 10, bottom: 10),
                              child: Text(
                                postTitle,
                                style: TextStyle(
                                  color: AppColors.Black,
                                  fontFamily: AppFonts.Font_Family,
                                  fontWeight: FontWeight.bold,
                                  letterSpacing: 0.1,
                                  shadows: [
                                    Shadow(
                                      blurRadius: 0.1,
                                    )
                                  ],
                                  fontSize: 24,
                                ),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(bottom: 10),
                              child: Text(
                                DateFormat.yMMMMd().format(DateTime.parse(postDate)),
                                style: TextStyle(
                                  color: AppColors.Grey,
                                  fontFamily: AppFonts.Font_Family,
                                  fontWeight: FontWeight.normal,
                                  letterSpacing: 0.1,
                                  shadows: [
                                    Shadow(
                                      blurRadius: 0.1,
                                    )
                                  ],
                                  fontSize: 18,
                                ),
                              ),
                            ),
                            Html(
                              data: postContent,
                              onLinkTap: AppNavigation.launchUrl,
                              style: {
                                "p": Style(
                                  color: AppColors.Black,
                                  fontFamily: AppFonts.Font_Family,
                                  fontWeight: FontWeight.w400,
                                  letterSpacing: 0.1,
                                  textShadow: [
                                    Shadow(
                                      blurRadius: 0.1,
                                    )
                                  ],
                                  fontSize: FontSize(18),
                                  padding: EdgeInsets.all(0),
                                ),
                                "a": Style(
                                  textDecoration: TextDecoration.none,
                                  color: AppColors.Red,
                                  fontFamily: AppFonts.Font_Family,
                                  fontWeight: FontWeight.w400,
                                  letterSpacing: 0.1,
                                  textShadow: [
                                    Shadow(
                                      blurRadius: 0.1,
                                    )
                                  ],
                                  fontSize: FontSize(18),
                                  padding: EdgeInsets.all(0),
                                ),
                                "li": Style(
                                  color: AppColors.Black,
                                  fontFamily: AppFonts.Font_Family,
                                  fontWeight: FontWeight.w400,
                                  letterSpacing: 0.1,
                                  textShadow: [
                                    Shadow(
                                      blurRadius: 0.1,
                                    )
                                  ],
                                  fontSize: FontSize(18),
                                  padding: EdgeInsets.only(
                                    top: 5,
                                    bottom: 2.5,
                                  ),
                                ),
                              },
                            ),
                            InkWell(
                              splashColor: AppColors.Red.withOpacity(0.2),
                              onTap: () {
                                setState(() {
                                  _shareYourThoughts = true;
                                });
                              },
                              child: Padding(
                                padding: const EdgeInsets.only(top: 10, bottom: 10),
                                child: Text(
                                  "Share your thoughts",
                                  style: TextStyle(
                                    color: AppColors.Red,
                                    fontFamily: AppFonts.Font_Family,
                                    fontWeight: FontWeight.normal,
                                    letterSpacing: 0.1,
                                    shadows: [
                                      Shadow(
                                        blurRadius: 0.1,
                                      )
                                    ],
                                    fontSize: 18,
                                  ),
                                ),
                              ),
                            ),
                            if (_shareYourThoughts)
                              Form(
                                key: _formKey,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  mainAxisSize: MainAxisSize.max,
                                  children: [
                                    InputBox(
                                      inputType: TextInputType.name,
                                      labelText: "Name",
                                      currentFocusNode: _nameFocus,
                                      nextFocusNode: _emailFocus,
                                      validator: (value) {
                                        if (value.isEmpty) {
                                          return 'Please enter name';
                                        }
                                        return null;
                                      },
                                    ),
                                    InputBox(
                                        inputType: TextInputType.emailAddress,
                                        labelText: "Email",
                                        currentFocusNode: _emailFocus,
                                        nextFocusNode: _websiteFocus,
                                        validator: (value) {
                                          if (value.isEmpty) {
                                            return 'Please enter email';
                                          }
                                          return null;
                                        }),
                                    InputBox(
                                        inputType: TextInputType.url,
                                        labelText: "Website",
                                        currentFocusNode: _websiteFocus,
                                        nextFocusNode: _commentFocus,
                                        validator: (value) {
                                          if (value.isEmpty) {
                                            return 'Please enter website url';
                                          }
                                          return null;
                                        }),
                                    InputBox(
                                      inputType: TextInputType.multiline,
                                      labelText: "Comment",
                                      currentFocusNode: _commentFocus,
                                      isLastFocus: true,
                                      validator: (value) {
                                        if (value.isEmpty) {
                                          return 'Please enter comment';
                                        }
                                        return null;
                                      },
                                      maxLength: 200,
                                    ),
                                    RaisedButton(
                                      onPressed: () {
                                        if (_formKey.currentState.validate()) {
                                          // If the form is valid, display a Snackbar.
                                          Scaffold.of(context).showSnackBar(SnackBar(content: Text('Processing Data')));
                                        }
                                      },
                                      child: Text(
                                        "Submit",
                                        style: TextStyle(
                                          fontFamily: AppFonts.Font_Family,
                                          fontWeight: FontWeight.normal,
                                          letterSpacing: 0.1,
                                          shadows: [
                                            Shadow(
                                              blurRadius: 0.1,
                                            )
                                          ],
                                          fontSize: 18,
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                          ],
                        ),
                      ),
                    );
                  },
                );
am1tr0r commented 3 years ago

Have you found any solution for this issue , I am also facing the same issue.

DeD1rk commented 3 years ago

This is the same as #44.

slightfoot commented 2 years ago

Closing as dup of #44

slightfoot commented 2 years ago

Thanks @DeD1rk for your help on the issues.