gurupreet / composecookbook

A Collection on all Jetpack compose UI elements, Layouts, Widgets and Demo screens to see it's potential

Hi there 👋

Nice meeting you, I'm Gurupreet Singh!

• 🔭 I’m currently working at Google
• 🌱 I’m currently learning more about Jetpack Compose, Blockchain, Android development(Forever).
• 👯 I’m looking to collaborate on Podcasts, Youtube etc.
• 🤔 I’m looking for help with Improving my ComposeCookBook documentation and features.
• 💬 Ask me about Android in general or Jetpack Compsoe.
• 📫 How to reach me: Twitter - @_gurupreet
• 😄 Pronouns: He/His
• ⚡ Fun fact: If I am not coding then I am playing basktball or PUBG

Languages and Tools:

Share some love with Starring repositories and following me on twitter

composecookbook's Issues

Project have build errors

Describe the bug
While updating to beta09 I noticed somehow project is not compiling giving multiple build errors on

Android Studio Bumblebee | 2021.1.1 Canary 2
Build #AI-211.6222.4.2111.7407564

To Reproduce
Please check branch : https://github.com/Gurupreet/ComposeCookBook/tree/update/beta09

Screenshots
If applicable, add screenshots to help explain your problem.

cannot build the source file

When I download, open this project and run, I got this error.
AGP : 7.0.0
Gradle : 7.0
gradle plugin : 1.5.21

I think this is a problem of dsl, but don't know what to do.

e: /Users/user/Desktop/ComposeCookBook-master/buildSrc/src/main/kotlin/common-compose-module-configs-script-plugin.gradle.kts: (8, 1): Expression 'android' cannot be invoked as a function. The function 'invoke()' is not found e: /Users/user/Desktop/ComposeCookBook-master/buildSrc/src/main/kotlin/common-compose-module-configs-script-plugin.gradle.kts: (8, 1): Unresolved reference. None of the following candidates is applicable because of receiver type mismatch: internal val ComPluginGroup.android: ComAndroidPluginGroup defined in gradle.kotlin.dsl.plugins._a477e4bb38b5f342e70f4eed110d6eb4 in file PluginSpecBuilders.kt internal val OrgJetbrainsKotlinPlatformPluginGroup.android: PluginDependencySpec defined in gradle.kotlin.dsl.plugins._a477e4bb38b5f342e70f4eed110d6eb4 in file PluginSpecBuilders.kt internal val OrgJetbrainsKotlinPluginGroup.android: PluginDependencySpec defined in gradle.kotlin.dsl.plugins._a477e4bb38b5f342e70f4eed110d6eb4 in file PluginSpecBuilders.kt internal val PluginDependenciesSpec.android: PluginDependencySpec defined in gradle.kotlin.dsl.plugins._a477e4bb38b5f342e70f4eed110d6eb4 in file PluginSpecBuilders.kt

build failed

with the latest Android Studio Chipmunk 2021.2.1 Canary 5

error:
e: ...common-compose-module-configs-script-plugin.gradle.kts: (8, 1): Expression 'android' cannot be invoked as a function. The function 'invoke()' is not found

Need Tiktok Demo

Need Tiktok Demo.

Add UI tests for bottom navigation bar

UI tests for Compose

App crashes on scrolling too fast in the advance list sections

Describe the bug
App crashes on scrolling too fast in the advance list sections

To Reproduce
Steps to reproduce the behavior:

1. Go to advance lists
2. Click on any of the advance list variants (fade , rotatex etc)
3. Scroll very fast
4. App crashes

Expected behavior
The app to not crash

Smartphone (please complete the following information):

• OS: Android 10

Stacktrace

2020-11-02 20:40:08.461 26577-26577/com.guru.composecookbook E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.guru.composecookbook, PID: 26577
    java.lang.IllegalArgumentException: Layer is redrawn for LayoutNode in state NeedsRelayout [LayoutNode@9095ce3 children: 0 measureBlocks: MeasuringIntrinsicsMeasureBlocks@ddbe6e0{ measureBlock=androidx.compose.foundation.ImageKt$Image$1$1@839bd99 }]
        at androidx.compose.ui.node.LayerWrapper.invoke(LayerWrapper.kt:167)
        at androidx.compose.ui.node.LayerWrapper.invoke(Unknown Source:3)
        at androidx.compose.ui.platform.RenderNodeApi29$record$1$1.invoke(RenderNodeApi29.kt:152)
        at androidx.compose.ui.platform.RenderNodeApi29$record$1$1.invoke(Unknown Source:0)
        at androidx.compose.runtime.snapshots.Snapshot$Companion.observe(Snapshot.kt:1721)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:128)
        at androidx.compose.ui.platform.AndroidComposeView.observeLayerModelReads(AndroidComposeView.kt:485)
        at androidx.compose.ui.platform.RenderNodeApi29.record(RenderNodeApi29.kt:151)
        at androidx.compose.ui.platform.RenderNodeLayer.updateDisplayList(RenderNodeLayer.kt:191)
        at androidx.compose.ui.platform.AndroidComposeView.dispatchDraw(AndroidComposeView.kt:554)
        at android.view.View.draw(View.java:21985)
        at android.view.View.updateDisplayListIfDirty(View.java:20859)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4416)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4389)
        at android.view.View.updateDisplayListIfDirty(View.java:20819)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4416)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4389)
        at android.view.View.updateDisplayListIfDirty(View.java:20819)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4416)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4389)
        at android.view.View.updateDisplayListIfDirty(View.java:20819)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4416)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4389)
        at android.view.View.updateDisplayListIfDirty(View.java:20819)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4416)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4389)
        at android.view.View.updateDisplayListIfDirty(View.java:20819)
        at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:581)
        at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:587)
        at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:664)
        at android.view.ViewRootImpl.draw(ViewRootImpl.java:3767)
        at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:3495)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2779)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1745)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7772)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:967)
        at android.view.Choreographer.doCallbacks(Choreographer.java:791)
        at android.view.Choreographer.doFrame(Choreographer.java:726)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:952)
        at android.os.Handler.handleCallback(Handler.java:883)
        at android.os.Handler.dispatchMessage(Handler.java:100)
        at android.os.Looper.loop(Looper.java:214)
        at android.app.ActivityThread.main(ActivityThread.java:7356)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:491)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:940)

Font Runtime Error

Describe the bug
The app force closed the first time it try to launch.

To Reproduce
use the latest master branch (by the time this issue created) and run it

Screenshots

Additional context
Here is the full log.
It points out to getFontFamily function and i think it is because the Font has multiple implementation. See this screenshot:

App crashes when opening Widgets screen

I just compiled the project and observed that the app crashes when I open Widgets screen. Its this exception thrown.

--------- beginning of crash
2020-10-06 00:57:00.480 7398-7398/com.guru.composecookbook E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.guru.composecookbook, PID: 7398
    java.lang.IllegalStateException: Surface can have only one direct measurable child!
        at androidx.compose.material.SurfaceKt$SurfaceLayout$1$1.invoke(Surface.kt:131)
        at androidx.compose.material.SurfaceKt$SurfaceLayout$1$1.invoke(Unknown Source:13)
        at androidx.compose.ui.LayoutKt$MeasuringIntrinsicsMeasureBlocks$1.measure-2MWCACw(Layout.kt:385)
        at androidx.compose.ui.node.InnerPlaceable.performMeasure-BRTryo0(InnerPlaceable.kt:48)
        at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
        at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.performMeasure-BRTryo0(DelegatingLayoutNodeWrapper.kt:104)
        at androidx.compose.ui.node.LayerWrapper.performMeasure-BRTryo0(LayerWrapper.kt:67)
        at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
        at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.performMeasure-BRTryo0(DelegatingLayoutNodeWrapper.kt:104)
        at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
        at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.performMeasure-BRTryo0(DelegatingLayoutNodeWrapper.kt:104)
        at androidx.compose.ui.node.LayerWrapper.performMeasure-BRTryo0(LayerWrapper.kt:67)
        at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
        at androidx.compose.foundation.layout.FillModifier.measure-3Jkh9V0(LayoutSize.kt:464)
        at androidx.compose.ui.node.ModifiedLayoutNode.performMeasure-BRTryo0(ModifiedLayoutNode.kt:36)
        at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
        at androidx.compose.foundation.layout.PaddingModifier.measure-3Jkh9V0(LayoutPadding.kt:169)
        at androidx.compose.ui.node.ModifiedLayoutNode.performMeasure-BRTryo0(ModifiedLayoutNode.kt:36)
        at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
        at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$2.invoke(OuterMeasurablePlaceable.kt:90)
        at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$2.invoke(Unknown Source:0)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:133)
        at androidx.compose.ui.platform.AndroidComposeView.observeMeasureModelReads(AndroidComposeView.kt:430)
        at androidx.compose.ui.node.OuterMeasurablePlaceable.remeasure-BRTryo0(OuterMeasurablePlaceable.kt:89)
        at androidx.compose.ui.node.OuterMeasurablePlaceable.measure-BRTryo0(OuterMeasurablePlaceable.kt:62)
        at androidx.compose.ui.node.LayoutNode.measure-BRTryo0(LayoutNode.kt:1173)
        at androidx.compose.foundation.layout.RowColumnImplKt$rowColumnMeasureBlocks$1.invoke(RowColumnImpl.kt:88)
        at androidx.compose.foundation.layout.RowColumnImplKt$rowColumnMeasureBlocks$1.invoke(Unknown Source:13)
        at androidx.compose.ui.LayoutKt$measureBlocksOf$1.measure-2MWCACw(Layout.kt:147)
        at androidx.compose.ui.node.InnerPlaceable.performMeasure-BRTryo0(InnerPlaceable.kt:48)
        at androidx.compose.ui.node.LayoutNodeWrapper.measure-BRTryo0(LayoutNodeWrapper.kt:123)
        at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$2.invoke(OuterMeasurablePlaceable.kt:90)
        at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$2.invoke(Unknown Source:0)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:133)
        at androidx.compose.ui.platform.AndroidComposeView.observeMeasureModelReads(AndroidComposeView.kt:430)
        at androidx.compose.ui.node.OuterMeasurablePlaceable.remeasure-BRTryo0(OuterMeasurablePlaceable.kt:89)
        at androidx.compose.ui.node.OuterMeasurablePlaceable.measure-BRTryo0(OuterMeasurablePlaceable.kt:62)
        at androidx.compose.ui.node.LayoutNode.measure-BRTryo0(LayoutNode.kt:1173)
        at androidx.compose.foundation.layout.RowColumnImplKt$rowColumnMeasureBlocks$1.invoke(RowColumnImpl.kt:88)
        at androidx.compose.foundation.layout.RowColumnImplKt$rowColumnMeasureBlocks$1.invoke(Unknown Source:13)

Deprecated Compose APIs must be replaced with new ones for better version migrations

Describe the bug
Deprecated APIs use

To Reproduce
run command ./gradlew lint

Screenshots

Add plugin refreshVersions?

Hello,

would you be interested in having your dependencies versions managed by refreshVersions?

https://jmfayard.github.io/refreshVersions/

It would avoid having to do a clean build every time you change a version in the buildSrc folder

I can submit a pull request :)

Feature requests

Please comment down any feature/Demo request you would like me to add. Thanks

App shows more than 3 seconds black screen on launch

When we launch the app it shows a black screen on launch.

Tested on the OnePlus 6t and Pixel emulator.

Youtube demo ui layout may be broken

Describe the bug
The YoutubeLIstItem may be not looks as it supposed to be. Im not sure if it is intended or not, but it looks different from the readme gif. The vertical chain is stacked on top of image instead of constrained below it. (Look attached screenshot)

To Reproduce
Steps to reproduce the behavior:
Go to youtube demo ui screen

Screenshots
If applicable, add screenshots to help explain your problem.

add list of challenge UI and contributor try to implement it

moviesapp is mvvm or mvi?

moviesapp is mvvm or mvi?

App is crashing due to no internet/slow internet.

Describe the bug
The app is crashing due to no network/connection timeout.

To Reproduce
Steps to reproduce the behaviour:

1. Connect to a slow network or disconnect internet
2. Open MoviesApp+MVVM or Crypto app from DemoUI.
3. Wait for some time to connection timeout.

Expected behaviour
It should never crash due to any network condition or no network.

Smartphone (please complete the following information):

• Device: Redmi4
• OS: Android 7.0

Tiktok Demo Error

Describe the bug
Tiktok demo can not be accessed and will make the app force closed.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'DemoUI'
2. Click on 'Tiktok'
3. See error

Screenshots

Additional context
For full logcat check this pastebin here.

Feature: Infinite Looping Carousel/Pager

Compatible with Material You

Make project compatible with Material you, use of dynamic color in components.

Instrumentation Tests failing

Describe the bug
Instrumentation tests are failing

To Reproduce
Run android connected tests

Expected behavior
Fail

Master doesn't seem compile with Arctic Fox RC 1

Describe the bug
Master doesn't seem compile with Arctic Fox RC 1

To Reproduce
Steps to reproduce the behavior:

I installed Arctic Fox RC 1 and attempted to compile master and I see the following error

..../ComposeCookBook/buildSrc/src/main/kotlin/common-compose-module-configs-script-plugin.gradle.kts: (8, 1): Expression 'android' cannot be invoked as a function. The function 'invoke()' is not found

FWIW I am using Android Studio default JDK, anybody else

Android studio fail to load project

Describe the bug
Latest version of Android studio fails to load project on master.

Note that manually building the project with gradle works.

To Reproduce
Steps to reproduce the behavior:

1. Get the latest version of android studio
2. Open project
3. Load gradle

Expected behavior
Project should load but it throws an error:

This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 2021.1.1 or newer.

* Try:
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Exception is:
com.intellij.openapi.externalSystem.model.ExternalSystemException: This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 2021.1.1 or newer.
	at org.jetbrains.plugins.gradle.model.ProjectImportAction.addBuildModels(ProjectImportAction.java:258)
	at org.jetbrains.plugins.gradle.model.ProjectImportAction.execute(ProjectImportAction.java:116)

Screenshots

Desktop (please complete the following information):

• OS: MacOS Monterey
• Version 12.0.1

Additional context

Android Studio info:

Android Studio Arctic Fox | 2020.3.1 Patch 3
Build #AI-203.7717.56.2031.7784292, built on October 1, 2021
Runtime version: 11.0.10+0-b96-7281165 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
macOS 12.0.1
GC: G1 Young Generation, G1 Old Generation
Memory: 2048M
Cores: 8
Registry: external.system.auto.import.disabled=true
Non-Bundled Plugins: org.jetbrains.kotlin, com.jetbrains.space, com.squareup.sqldelight, org.intellij.plugins.markdown

Replace deprecated Compose APIs

Deprecated APIs in Compose alpha-09 must be replaced for easier compose migrations

• LazyColumnFor
• LazyColumnForIndexed
• FloatingActionButtonConstants

Addition of Flinger Library

The Flings that are present in the cookbook is completely native, By the addition of Flinger library, we will have complete control over it (which will change the complete look and feel of the page).

this is the link to the library: https://github.com/iamjosephmj/flinger

Update to Android Gradle Plugin 4.2.0-alpha15

https://androidstudio.googleblog.com/2020/10/android-studio-42-canary-15-available.html

Unit tests compilation error after upgrading to alpha-08

Describe the bug
androidx.ui.test classes have been moved to androidx.compose.ui.test

To Reproduce
Launch unit tests

Min SDK to 21

Currently, the minSDK is 29. Is it possible to make it 21?

Add UI-Tests to all modules

Add UI tests to all screens to improve the code-coverage

Add Material Time Picker

build failed

common-compose-module-configs-script-plugin.gradle.kts文件报错
AGP : 7.1.0-alpha12
Gradle : 7.2
gradle plugin : 1.5.21
下面的代码报错：
android {
compileSdk = ProjectConfigs.compileSdkVersion

defaultConfig {
    minSdk = ProjectConfigs.minSdkVersion
    targetSdk = ProjectConfigs.targetSdkVersion
}

compileOptions {
    sourceCompatibility = JavaVersion.VERSION_1_8
    targetCompatibility = JavaVersion.VERSION_1_8
}
kotlinOptions {
    jvmTarget = "1.8"
    freeCompilerArgs = freeCompilerArgs + "-Xopt-in=kotlin.RequiresOptIn"
}
buildFeatures {
    compose = true
}
composeOptions {
    kotlinCompilerExtensionVersion = ProjectConfigs.kotlinCompilerExtensionVersion
}

}
类似于#112

Feature Request & Questions - layout for tablet and common UI

Layout Or UI for Mobile Phones and Tablets.
I am just wondering about, how we can achieve or implement layouts for Mobile and Tablets. For example, In the older implementation, we can, implements these res folder layouts for different screens, for the land folder for landscape, and for tablet layout-600dp, layout-720dp.
I also go through, all of your demo apps example, and if we talk about the Gmail app example, On a Mobile phone the listing is normal, but on a tablet, we can see listing and details of that particular selection.

Describe the solution you'd like
How we can achieve this. In terms of UI and Behaviour of app for Mobile and Tablet. Because in general, the layout for tablet and mobile is different in terms of sizing, detailing and UX.

Describe alternatives you've considered
Please check the Gmail app on Mobile and Tablet.

Additional context
I am also attaching the screens shots for your reference.

Mobile Phone:

Tablet :

Second Thing
As of now if we are using, XML for layouts we can use same layout for different activities and fragments. I am just wondering how we can achieve in jetpack compose.

If you can guide us in this context that will be very helpful.

In last, thanks a lot for this repo. @Gurupreet
Learning and implementing...

Upgrade to Jetpack Compose Alpha09

• Update to Compose Alpha 09
• Fix compilation errors

Onboarding Overlays

Something like this: https://i.imgur.com/fZETnkc.png

Create a module per demo or per screen

Is your feature request related to a problem? Please describe.
When you want to check how a demo or a component are developed, it can be hard with the current architecture.

Describe the solution you'd like
Create a module per demo or per screen

Describe alternatives you've considered
Create module only for demos.

Build Failed When Trying to Run the Project

Describe the bug
I try to get latest version of this project from version control using master branch. But when i tried to run it, it shows multiple error. I have not tried with use the latest canary.

Android Studio Arctic Fox | 2020.3.1 Beta 4
Build #AI-203.7717.56.2031.7435690, built on June 8, 2021
Runtime version: 11.0.10+0-b96-7249189 amd64
VM: OpenJDK 64-Bit Server VM by Oracle Corporation
Windows 10 10.0

To Reproduce
Steps to reproduce the behavior:
Import from version control and use the master branch

Logcat
The complete log can be seen here (using stacktrace)

Caused by: org.gradle.workers.internal.DefaultWorkerExecutor$WorkExecutionException: A failure occurred while executing org.jetbrains.kotlin.gradle.internal.KaptWithoutKotlincTask$KaptExecutionWorkAction
Caused by: java.lang.reflect.InvocationTargetException
Caused by: java.lang.IllegalAccessError: class org.jetbrains.kotlin.kapt3.base.KaptContext (in unnamed module @0x26ef8ef9) cannot access class com.sun.tools.javac.util.Context (in module jdk.compiler) because module jdk.compiler does not export com.sun.tools.javac.util to unnamed module @0x26ef8ef9
Caused by: org.gradle.workers.internal.DefaultWorkerExecutor$WorkExecutionException: A failure occurred while executing org.jetbrains.kotlin.gradle.internal.KaptWithoutKotlincTask$KaptExecutionWorkAction
Caused by: java.lang.reflect.InvocationTargetException
Caused by: java.lang.IllegalAccessError: class org.jetbrains.kotlin.kapt3.base.KaptContext (in unnamed module @0x26ef8ef9) cannot access class com.sun.tools.javac.util.Context (in module jdk.compiler) because module jdk.compiler does not export com.sun.tools.javac.util to unnamed module @0x26ef8ef9

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
I tried to downgrade the gradle to 7.0.0-beta04 but still havent solved the problem

Add Material Date Picker

In SwipeableLists BackgroundListItem cannot click

First thanks for helping me a lot with your project.
SwipeableLists，BackgroundListItem cannot respond to any click events.
How should I solve it.

UI tests are failing. Investigate

Describe the bug
UI test started failing after version changes. Investigation needed

Migrate to Kotlin DSL

Is your feature request related to a problem? Please describe.
Related to App modularization feature request #61

Describe the solution you'd like
Migrate to Kotlin DSL before modularizing the project

TextInputs are not editable

I have tried the TextInputs() compose. Unfortunately, I can't change the text inside them. For some reason, keyboard input is not reflecting in the TextFields.

Add UI tests for the Home Screen

Tests should cover :

• HomeScreenItems sealed class
• Home Screen provided data
• HomeScreenContent Composable

add LICENCE file

Scaffold appbar covering content

Describe the bug
Scaffold appbar covering content

To Reproduce
Steps to reproduce the behavior:

1. clone project
2. open in android studio
3. run app on phone

Expected behavior
Display content correctly

Screenshots

Desktop (please complete the following information):

• OS: win 11
• Android studio: Android Studio Electric Eel | 2022.1.1 Canary 9
• Java Version: "11.0.12" 2021-07-20 LTS

Smartphone (please complete the following information):

• Device: mi 10 ultral
• OS: android 12

I tried it on another device and the same problem occurs，All pages using Scaffold have the problem of appbar covering content