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

Headers don't get stick to top after disappearing keyboard. #44

Closed am1tr0r closed 2 years ago

am1tr0r commented 3 years ago

sticky_header_issue

Headers don't get stick to top when I try to disappear keyboard . it does not work as it should do. sticky header overlaps its own content . when I scroll little bit then it goes to its place on top as you can see in uploaded Gif.

am1tr0r commented 3 years ago

@FlutterCommunityBot any solution for this issue?

masbenx commented 3 years ago

still waiting for the solution.. because i have the same issue..

chrisynchen commented 3 years ago

I can reproduce when entering to other page then go back. I believe it's same root cause.

slightfoot commented 2 years ago

Can't replicate the issue on Flutter v3.0.0 and sticky_headers 0.3.0. Please retest and if it's still a problem provide example so we can resolve it.

toasterrrrr commented 1 year ago

Hi, I'm currently experiencing the same issue mentioned above. Currently on Flutter v3.3.6 and sticky_headers 0.3.0+2.

Here is the full code:

import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final firstList = ['Hello', 'What is up?', 'You alright?'];
  final secondList = ['Bye', 'Adios'];
  final thirdList = ['Apple', 'Banana', 'Cherry', 'Durian', 'Figs'];

  @override
  Widget build(BuildContext context) {
    final combinedList = [firstList, secondList, thirdList];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: CustomScrollView(
                reverse: true,
                slivers: <Widget>[
                  SliverList(
                      delegate: SliverChildBuilderDelegate((context, index) {
                    return reversedMessageList(combinedList[index]);
                  }, childCount: combinedList.length)),
                ],
              ),
            ),
          ),
          TextField(
            style: Theme.of(context).textTheme.bodyText1,
            keyboardType: TextInputType.multiline,
            maxLines: 10,
            minLines: 1,
            textCapitalization: TextCapitalization.sentences,
            decoration: const InputDecoration(
              labelText: 'Message',
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }

  Widget reversedMessageList(List<String> messages) {
    //All messages sharing the same date, where date is displayed as StickyHeader
    return StickyHeader(
      overlapHeaders: false,
      content: Column(
        children: <Widget>[
          for (int i = 0; i < messages.length; i++)
            Container(
                decoration: const BoxDecoration(
                    color: Color(0xD9B2924A),
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                child: Padding(
                    padding: const EdgeInsets.all(20),
                    child: Text(messages[i])))
        ],
      ),
      header: Padding(
          padding: const EdgeInsets.all(5),
          child: Center(
              child: Container(
                  decoration: const BoxDecoration(
                      color: Color(0xD9590E98),
                      borderRadius: BorderRadius.all(Radius.circular(20))),
                  child: Padding(
                      padding: const EdgeInsets.all(8),
                      child: Text('Number of messages ${messages.length}'))))),
    );
  }
}

https://user-images.githubusercontent.com/61907066/201946692-62e5d43e-6053-41c1-9ef6-7b28e198ce5b.mp4

toasterrrrr commented 1 year ago

@slightfoot is it possible to reopen this issue? Many thanks.

jblankenship5 commented 1 year ago

This issue still exists, please reopen.

andynvt commented 1 year ago

still exist

amantoux commented 5 months ago

A solution that works for me is to add WidgetsBindingObserver mixin to the widget encapsulating the list view, add it as an observer to WidgetsBinding.instance and implement didChangeMetrics as follows:

@override
void didChangeMetrics() {
  super.didChangeMetrics();
  setState(() {});
}

hope this helps