added animated Header #1871

Umair-Manzoor-47 · 2025-02-14T12:47:21Z

ticket: #1863

 header:
    titleWidget: titleWIthMenu
    flexibleBackground: HeaderBackground
    styles:
      titleBarHeight: 72
      flexibleMaxHeight: 403
      flexibleMinHeight: 72
      backgroundColor: 0xFF0E154D
      scrollMode: pinned  // can be floating and Pinned (if using dropdown animation must stay pinned)
      animation:                // animation Map
        enabled: true         // flag for enabling/disabling
        duration: 300        // Animation lifecycle
        curve: easeIn        //  Curve for variety

header.webm

TheNoumanDev · 2025-02-16T22:19:04Z

modules/ensemble/lib/framework/view/page.dart

+        scrollableView: true,
+        showNavigationIcon: pageModel.runtimeStyles?['showNavigationIcon'],
+      );
+      // if (appBar is SliverAppBar) {


Why we are commenting out this condition?

there was already a check in _buildAppBar function
but it's importance came up later so will be adding it back

TheNoumanDev · 2025-02-16T22:27:05Z

modules/ensemble/lib/framework/view/page.dart

@@ -387,8 +435,11 @@ class PageState extends State<Page>
        flexibleSpace: wrapsInFlexible(backgroundWidget),
        expandedHeight: flexibleMaxHeight,
        collapsedHeight: flexibleMinHeight,
+        floating: floating ?? false,


these values will never be null, as while setting you are already providing fallback value to it as bool? floating = Utils.getBool(evaluatedHeader?['floating'], fallback: false);, same goes for other values.

TheNoumanDev · 2025-02-16T22:28:43Z

modules/ensemble/lib/framework/view/page.dart

+  void performLayout() {
+    final double scrollOffset = constraints.scrollOffset;
+    final double maxExtent = height;
+    bool repaint = false;


this value is never used, why we are declaring it?

Removing it as well.

Umair-Manzoor-47 · 2025-02-18T11:13:24Z

added the requested changes @TheNoumanDev

sharjeelyunus · 2025-02-18T14:02:42Z

@Umair-Manzoor-47 can we hide/unhide the title widget as well? see the attached video in this ticket: #1863 initial state is no header, and when user scrolls down, the header with floating widget appears.
Can you replicate the design in the ticket, and add video here

Umair-Manzoor-47 · 2025-02-19T17:37:16Z

Sure @sharjeelyunus here is without titleWidget or title
Schema is

  header:
    subtitleWidget:
      Row:
        styles:
          height: 100
          padding: 0
          gap: 3
          crossAxis: center
          mainAxis: center
          backgroundColor: blue
        children:
          - Button:
              label: Menu

          - Button:
              label: Shop

          - Button:

              label: Cart
          - Button:
              label: Order

    styles:

      backgroundColor: White
      shadowColor: white
      titleBarHeight: 50
      animation: true
      subtitleHeightOffSet: 100

2025-02-19.22-33-57.mp4

kmahmood74 · 2025-02-19T17:40:10Z

why do we have a `subtitleWidget` what's the point? How can you have subtitle without title? this is very confusing

…

On Wed, Feb 19, 2025 at 9:37 AM Umair Manzoor ***@***.***> wrote: Sure @sharjeelyunus <https://github.com/sharjeelyunus> here is without titleWidget or title Schema is header: subtitleWidget: Row: styles: height: 100 padding: 0 gap: 3 crossAxis: center mainAxis: center backgroundColor: blue children: - Button: label: Menu - Button: label: Shop - Button: label: Cart - Button: label: Order styles: backgroundColor: White shadowColor: white titleBarHeight: 50 animation: true subtitleHeightOffSet: 100 https://github.com/user-attachments/assets/b09b2e2a-3151-499f-a5e8-0ae20f160f3a — Reply to this email directly, view it on GitHub <#1871 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACMZUAXKCWKY5CFDYUWKWAT2QS6OFAVCNFSM6AAAAABXER4IIWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNRZGMZDKMJWGU> . You are receiving this because your review was requested.Message ID: ***@***.***> [image: Umair-Manzoor-47]*Umair-Manzoor-47* left a comment (EnsembleUI/ensemble#1871) <#1871 (comment)> Sure @sharjeelyunus <https://github.com/sharjeelyunus> here is without titleWidget or title Schema is header: subtitleWidget: Row: styles: height: 100 padding: 0 gap: 3 crossAxis: center mainAxis: center backgroundColor: blue children: - Button: label: Menu - Button: label: Shop - Button: label: Cart - Button: label: Order styles: backgroundColor: White shadowColor: white titleBarHeight: 50 animation: true subtitleHeightOffSet: 100 https://github.com/user-attachments/assets/b09b2e2a-3151-499f-a5e8-0ae20f160f3a — Reply to this email directly, view it on GitHub <#1871 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACMZUAXKCWKY5CFDYUWKWAT2QS6OFAVCNFSM6AAAAABXER4IIWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNRZGMZDKMJWGU> . You are receiving this because your review was requested.Message ID: ***@***.***>

Umair-Manzoor-47 · 2025-02-20T10:03:47Z

there's already title and titleWidget
There are two options.
1. Either I can include a different widget (Subtitle Widget) that drops down as user scrolls. Independent of title or TitleWidget
2. Make the whole Header Dropdown
@kmahmood74 @TheNoumanDev

kmahmood74 · 2025-02-20T17:01:16Z

I'll leave it to Sharjeel and you to decide. I am ok with what Sharjeel decides

…

On Thu, Feb 20, 2025 at 2:04 AM Umair Manzoor ***@***.***> wrote: there's already title and titleWidget There are two options. *1.* Either I can include a different widget that drops down as user scrolls. Independent of title or TitleWidget *2.* Make the whole Header Dropdown @kmahmood74 <https://github.com/kmahmood74> @TheNoumanDev <https://github.com/TheNoumanDev> — Reply to this email directly, view it on GitHub <#1871 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACMZUAVPP4EBVGPO6CZ25I32QWSBTAVCNFSM6AAAAABXER4IIWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZRGAZDCNRRGI> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: Umair-Manzoor-47]*Umair-Manzoor-47* left a comment (EnsembleUI/ensemble#1871) <#1871 (comment)> there's already title and titleWidget There are two options. *1.* Either I can include a different widget that drops down as user scrolls. Independent of title or TitleWidget *2.* Make the whole Header Dropdown @kmahmood74 <https://github.com/kmahmood74> @TheNoumanDev <https://github.com/TheNoumanDev> — Reply to this email directly, view it on GitHub <#1871 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACMZUAVPP4EBVGPO6CZ25I32QWSBTAVCNFSM6AAAAABXER4IIWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZRGAZDCNRRGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

…semble into header-enhancement

sharjeelyunus · 2025-02-24T16:31:53Z

modules/ensemble/lib/framework/view/page.dart

+    bool? pinned = Utils.getBool(evaluatedHeader?['pinned'], fallback: false);
+    bool? snapped = Utils.getBool(evaluatedHeader?['snapped'], fallback: false);
+    bool? floating =
+        Utils.getBool(evaluatedHeader?['floating'], fallback: false);
+    appBarBehaviour behaviour =
+        Utils.getEnum<appBarBehaviour>(evaluatedHeader?['scrollMode'], appBarBehaviour.values);


why do we have pinned, snapped, and floating properties here? aren't using scrollMode

Done with refactoring

TheNoumanDev

LGTM, before merging the PR, please also create Docs and Schema PR.

added animated Header

6baa350

Umair-Manzoor-47 requested a review from kmahmood74 February 14, 2025 12:47

Merge branch 'main' into header-enhancement

8d49575

TheNoumanDev linked an issue Feb 14, 2025 that may be closed by this pull request

Animations for header (app bar) #1863

Closed

amin-nas requested a review from TheNoumanDev February 14, 2025 17:51

TheNoumanDev requested changes Feb 16, 2025

View reviewed changes

Umair-Manzoor-47 and others added 2 commits February 18, 2025 00:56

made requested changes for animated Header

13c9a09

Merge branch 'main' into header-enhancement

971d0e7

Umair-Manzoor-47 added 3 commits February 24, 2025 21:02

enum for floating and pinned AppBar, Animation Map for sliver AppBar

d3cdbbf

Merge branch 'header-enhancement' of https://github.com/EnsembleUI/en…

0941843

…semble into header-enhancement

additional check

29e2310

sharjeelyunus reviewed Feb 24, 2025

View reviewed changes

Umair-Manzoor-47 added 2 commits February 24, 2025 21:45

code cleansing

068d870

Slivebar moved to new bar class

86f2472

Umair-Manzoor-47 requested a review from TheNoumanDev February 25, 2025 05:40

Umair-Manzoor-47 and others added 5 commits February 25, 2025 19:49

Code Reformatting

86bf83b

Restoring old format for irrelevant changes

64687c8

undoing unnecessary space page_model.dart

e4ee380

Update page_model.dart

92ce92b

Update page_model.dart

8d9e943

TheNoumanDev approved these changes Feb 25, 2025

View reviewed changes

Merge branch 'main' into header-enhancement

0fd7f75

sharjeelyunus approved these changes Feb 26, 2025

View reviewed changes

Merge branch 'main' into header-enhancement

d799710

Umair-Manzoor-47 merged commit c3a9950 into main Feb 27, 2025
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

added animated Header #1871

added animated Header #1871

Umair-Manzoor-47 commented Feb 14, 2025 •

edited

Loading

TheNoumanDev Feb 16, 2025

Umair-Manzoor-47 Feb 17, 2025

TheNoumanDev Feb 16, 2025

TheNoumanDev Feb 16, 2025

Umair-Manzoor-47 Feb 17, 2025

Umair-Manzoor-47 commented Feb 18, 2025

sharjeelyunus commented Feb 18, 2025 •

edited

Loading

Umair-Manzoor-47 commented Feb 19, 2025

kmahmood74 commented Feb 19, 2025 via email

Umair-Manzoor-47 commented Feb 20, 2025 •

edited

Loading

kmahmood74 commented Feb 20, 2025 via email

sharjeelyunus Feb 24, 2025

Umair-Manzoor-47 Feb 25, 2025

TheNoumanDev left a comment

added animated Header #1871

added animated Header #1871

Conversation

Umair-Manzoor-47 commented Feb 14, 2025 • edited Loading

TheNoumanDev Feb 16, 2025

Choose a reason for hiding this comment

Umair-Manzoor-47 Feb 17, 2025

Choose a reason for hiding this comment

TheNoumanDev Feb 16, 2025

Choose a reason for hiding this comment

TheNoumanDev Feb 16, 2025

Choose a reason for hiding this comment

Umair-Manzoor-47 Feb 17, 2025

Choose a reason for hiding this comment

Umair-Manzoor-47 commented Feb 18, 2025

sharjeelyunus commented Feb 18, 2025 • edited Loading

Umair-Manzoor-47 commented Feb 19, 2025

kmahmood74 commented Feb 19, 2025 via email

Umair-Manzoor-47 commented Feb 20, 2025 • edited Loading

kmahmood74 commented Feb 20, 2025 via email

sharjeelyunus Feb 24, 2025

Choose a reason for hiding this comment

Umair-Manzoor-47 Feb 25, 2025

Choose a reason for hiding this comment

TheNoumanDev left a comment

Choose a reason for hiding this comment

Umair-Manzoor-47 commented Feb 14, 2025 •

edited

Loading

sharjeelyunus commented Feb 18, 2025 •

edited

Loading

Umair-Manzoor-47 commented Feb 20, 2025 •

edited

Loading