{"id":19208243,"url":"https://github.com/mttankkeo/flutter_appbar","last_synced_at":"2026-04-11T20:10:36.555Z","repository":{"id":225322447,"uuid":"762747418","full_name":"MTtankkeo/flutter_appbar","owner":"MTtankkeo","description":"This package implements the flexible appbar behavior, And we pursue higher performance and responsiveness than the appbar generally provided by Flutter.","archived":false,"fork":false,"pushed_at":"2025-02-17T01:51:32.000Z","size":67,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T02:20:02.965Z","etag":null,"topics":["appbar","flutter","flutter-package","flutter-ui","material-ui","responsive-layout"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flutter_appbar","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MTtankkeo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-24T15:26:30.000Z","updated_at":"2025-02-17T01:51:35.000Z","dependencies_parsed_at":"2025-01-27T18:25:58.374Z","dependency_job_id":"2077fc1f-e862-4902-bb17-93a14074c1f6","html_url":"https://github.com/MTtankkeo/flutter_appbar","commit_stats":null,"previous_names":["mttankkeo/flutter_appbar"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fflutter_appbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fflutter_appbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fflutter_appbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fflutter_appbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MTtankkeo","download_url":"https://codeload.github.com/MTtankkeo/flutter_appbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240280835,"owners_count":19776414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appbar","flutter","flutter-package","flutter-ui","material-ui","responsive-layout"],"created_at":"2024-11-09T13:25:00.474Z","updated_at":"2026-04-11T20:10:36.548Z","avatar_url":"https://github.com/MTtankkeo.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction\r\nThis package implements a flexible AppBar behavior that pursues higher performance and responsiveness than the default Flutter AppBar. It also avoids unnecessary gesture contention, ensuring smooth interactions in most typical situations.\r\n\r\n\u003e ✨ Build next-generation, **premium-grade scroll experiences** with full AppBar control.\r\n\r\n## Related Packages\r\nBuilt on the same foundation, these packages extend flutter_appbar capabilities:\r\n\r\n| Name | Introduction |\r\n| ---- | ------------ |\r\n| [flutter_refresh_indicator](https://pub.dev/packages/flutter_refresh_indicator) | A flexible, native-like refresh indicator built on flutter_appbar. |\r\n| [flutter_infinite_scroll_pagination ](https://pub.dev/packages/flutter_infinite_scroll_pagination) | Easy infinite scroll loading with one-line wrapping, no setup needed. |\r\n| [flutter_scroll_bottom_sheet](https://pub.dev/packages/flutter_scroll_bottom_sheet) | A bottom sheet widget that syncs smoothly with scroll events for a seamless UX. |\r\n\r\n## Preview\r\nThe GIF below demonstrates the package in action. Please note that due to compression, the animation may appear distorted or choppy.\r\n\r\n![preview](https://github.com/user-attachments/assets/9b077c66-83c3-4374-b217-f37dbe644d01)\r\n![preview](https://github.com/user-attachments/assets/e8b18258-f764-49e6-8068-4c34b9b6d62b)\r\n\r\n## Usage\r\nThis section covers the basic usage of this package and how to integrate it into your application.\r\n\r\n### How to apply the appbar?\r\nTo integrate an appbar into your application, use the `AppBarConnection` and AppBar widgets as shown in the example below.\r\n\r\n\u003e [!NOTE]\r\n\u003e If you define a separate `ScrollController` for a scrollable widget, you must explicitly pass that instance to the scrollController property of `AppBarConnection` to ensure proper synchronization.\r\n\r\n```dart\r\nAppBarConnection(\r\n  appBars: [\r\n    AppBar(\r\n      behavior: MaterialAppBarBehavior(),\r\n      body: Container(\r\n        width: double.infinity,\r\n        height: 300,\r\n        color: Colors.red,\r\n        alignment: Alignment.center,\r\n        child: Text(\"Header\", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),\r\n      ),\r\n    ),\r\n  ],\r\n  child: ListView.builder(\r\n    itemCount: 100,\r\n    itemBuilder: (context, index) {\r\n      return Text(\"Hello, World! $index\");\r\n    },\r\n  ),\r\n)\r\n```\r\n\r\n### How to apply the sized appbar?\r\nYou can explicitly define both the minimum and maximum extents for the appbar, allowing you to set fixed sizes rather than having it adjust dynamically, See Also, The sized appbar does not support alignment options.\r\n\r\n```dart\r\nAppBar(\r\n  minExtent: 0,   // Optional\r\n  maxExtent: 200, // Optional\r\n  behavior: MaterialAppBarBehavior(),\r\n  body: ...\r\n)\r\n```\r\n\r\n### How to apply effects according to appbar position?\r\nTo adjust UI effects dynamically according to the appbar’s position, use the AppBar.builder method. This provides the position object, which contains the current state of the appbar, including its expansion and shrinkage percentages.\r\n\r\n```dart\r\nAppBar.builder(\r\n  behavior: MaterialAppBarBehavior(),\r\n  builder: (context, position) {\r\n    position.expandedPercent; // 1.0\r\n    position.shrinkedPercent; // 0.0\r\n    return ...;\r\n  }\r\n)\r\n```\r\n\r\n### How to refer the other appbar position.\r\nTo obtain the `AppBarPosition` for a specific index, the `positionOf()` function of an explicitly defined `AppBarController` can be used.\r\n\r\n```dart\r\n@override\r\nvoid initState() {\r\n  super.initState();\r\n\r\n  WidgetsBinding.instance.addPostFrameCallback((_) =\u003e controller.synchronizeWith(0, 1));\r\n}\r\n\r\nAppBarConnection(\r\n  controller: controller,\r\n  appBars: [\r\n    AppBar.builder(...), // target to refer\r\n    AppBar.builder(\r\n      behavior: ...,\r\n      builder: (context, ) {\r\n        final position = controller.positionOf(0); // ScrollPosition\r\n        position?.expandedPercent; // 1.0 or null\r\n        position?.shrinkedPercent; // 0.0 or null\r\n        return ...;\r\n      }\r\n    )\r\n  ],\r\n  child: ...\r\n)\r\n```\r\n\r\n### How to customize appbar alignment?\r\nTry applying the `Alignment` that is a providing standard enumeration in this package.\r\n\r\n```dart\r\nAppBar(\r\n  behavior: MaterialAppBarBehavior(),\r\n  alignment: Alignment.center, // like this\r\n  body: ...\r\n)\r\n```\r\n\r\n### How to apply initial offset of the appbar?\r\n`initialOffset` defines the initial expansion or collapse state of the appbar and must be a value between 0 and 1.\r\n\r\n```dart\r\nAppBar(\r\n  initialOffset: 1, // 0 ~ 1\r\n  body: ...\r\n)\r\n```\r\n\r\n### How to set fixed scrollable height?\r\nWhen `fixedScrollableHeight` is enabled, the scrollable widget's height is calculated as if the AppBar is fully collapsed, regardless of its current expansion state.\r\n\r\nThis prevents the scrollable view from resizing dynamically as the AppBar expands or collapses, which can help avoid layout shifts, visual glitches, and performance overhead caused by frequent height changes.\r\n\r\n#### Locally\r\n\r\n```dart\r\nAppBarConnection(\r\n  fixedScrollableHeight: true,\r\n  appBars: [...],\r\n  child: ...\r\n)\r\n```\r\n\r\n#### Globally\r\n\r\n```dart\r\nAppBarConnection.defaultFixedScrollableHeight = true;\r\n```\r\n\r\n## AppBar Behavior\r\nThe package includes different appbar behaviors that define how the appbar interacts with user scroll actions.\r\n\r\n\u003e This provides developers with full control over how the appbar should behave under different scrolling conditions.\r\n\r\n### AppBarBehavior abstract class\r\nThis is an abstract class that dictates the overall behavior of the appbar. It provides two key methods:\r\n\r\n```dart\r\n/// Updates the given appbar based on available scroll offset,\r\n/// the current appbar position, and the nested scroll position.\r\ndouble setPixels(\r\n  double available,\r\n  AppBarPosition appBar,\r\n  NestedScrollPosition scroll,\r\n);\r\n```\r\n\r\n```dart\r\n/// Updates the appbar during bouncing (overscroll) situations\r\n/// Returns any remaining scroll offset that was not consumed.\r\ndouble setBouncing(\r\n  double available,\r\n  AppBarPosition appBar,\r\n  NestedScrollPosition scroll,\r\n);\r\n```\r\n\r\n```dart\r\n/// Determines the alignment of the appbar based on appbar position and scroll.\r\nAppBarAlignmentCommand? align(\r\n  AppBarPosition appBar,\r\n  NestedScrollPosition scroll,\r\n);\r\n```\r\n\r\n### AbsoluteAppBarBehavior\r\nThis behavior keeps the appbar in a fixed position, ignoring scroll interactions.\r\n\r\n| Property | Description |\r\n|----------|-------------|\r\n| `bouncing` | Whether the appbar will be synchronized when bouncing overscroll occurs. |\r\n\r\n### MaterialAppBarBehavior\r\nThis behavior mimics the Material 3 design behavior for appbars, supporting floating, dragging, and alignment animations.\r\n\r\n| Property | Description |\r\n|----------|-------------|\r\n| `floating` | Allows the appbar to expand and collapse without requiring the user to scroll to the top. |\r\n| `bouncing` | Whether the appbar will be synchronized when bouncing overscroll occurs. |\r\n| `dragOnlyExpanding` | Prevents the appbar from expanding automatically when scrolling up. It can only be expanded by dragging. (Cannot be used with `floating`.) |\r\n| `alwaysScrolling` | Ensures the appbar can be scrolled even when the content is not scrollable. Useful for keeping the appbar responsive. |\r\n| `alignAnimation` | Enables smooth animation when the appbar switches between expanded and collapsed states. |\r\n| `alignDuration` | Defines the duration of the alignment animation. Default is `300ms`. |\r\n| `alignCurve` | Sets the animation curve for the alignment transition, controlling the easing effect. |\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmttankkeo%2Fflutter_appbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmttankkeo%2Fflutter_appbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmttankkeo%2Fflutter_appbar/lists"}