{"id":13407089,"url":"https://github.com/icerockdev/moko-widgets","last_synced_at":"2025-04-04T18:09:25.911Z","repository":{"id":48255287,"uuid":"218209603","full_name":"icerockdev/moko-widgets","owner":"icerockdev","description":"Multiplatform UI DSL with screen management in common code for mobile (android \u0026 ios) Kotlin Multiplatform development","archived":false,"fork":false,"pushed_at":"2023-05-21T07:42:56.000Z","size":2597,"stargazers_count":384,"open_issues_count":40,"forks_count":31,"subscribers_count":19,"default_branch":"master","last_synced_at":"2024-07-31T20:26:45.203Z","etag":null,"topics":["android","gradle-plugin","ios","kotlin","kotlin-compiler-plugin","kotlin-multiplatform","kotlin-native","moko","ui","ui-dsl"],"latest_commit_sha":null,"homepage":"https://moko.icerock.dev","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/icerockdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-10-29T05:18:24.000Z","updated_at":"2024-06-24T10:51:30.000Z","dependencies_parsed_at":"2024-01-07T04:48:13.529Z","dependency_job_id":null,"html_url":"https://github.com/icerockdev/moko-widgets","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icerockdev%2Fmoko-widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icerockdev%2Fmoko-widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icerockdev%2Fmoko-widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icerockdev%2Fmoko-widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icerockdev","download_url":"https://codeload.github.com/icerockdev/moko-widgets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226215,"owners_count":20904465,"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":["android","gradle-plugin","ios","kotlin","kotlin-compiler-plugin","kotlin-multiplatform","kotlin-native","moko","ui","ui-dsl"],"created_at":"2024-07-30T20:00:19.514Z","updated_at":"2025-04-04T18:09:25.890Z","avatar_url":"https://github.com/icerockdev.png","language":"Kotlin","readme":"![moko-widgets](https://user-images.githubusercontent.com/5010169/70204294-93a45900-1752-11ea-9bb6-820d514ceef9.png)  \n[![GitHub license](https://img.shields.io/badge/license-Apache%20License%202.0-blue.svg?style=flat)](http://www.apache.org/licenses/LICENSE-2.0) [![Download](https://img.shields.io/maven-central/v/dev.icerock.moko/widgets) ](https://repo1.maven.org/maven2/dev/icerock/moko/widgets/) ![kotlin-version](https://kotlin-version.aws.icerock.dev/kotlin-version?group=dev.icerock.moko\u0026name=widgets)\n\n# Mobile Kotlin widgets\nThis is a Kotlin MultiPlatform library that provides declarative UI and application screens management\n in common code. You can implement full application for Android and iOS only from common code with it.  \n\n## Sample Screen\n\n|Android|iOS|\n|---|---|\n|![Sample Android](https://user-images.githubusercontent.com/5010169/70204616-d0bd1b00-1753-11ea-95d1-749341631ba7.png)|![Sample iOS](https://user-images.githubusercontent.com/5010169/70204576-aff4c580-1753-11ea-95b9-14e488edb689.png)|\n\nCode of screen structure:\n\n```kotlin\nclass LoginScreen(\n    private val theme: Theme,\n    private val loginViewModelFactory: () -\u003e LoginViewModel\n) : WidgetScreen\u003cArgs.Empty\u003e() {\n\n    override fun createContentWidget() = with(theme) {\n        val viewModel = getViewModel(loginViewModelFactory)\n\n        constraint(size = WidgetSize.AsParent) {\n            val logoImage = +image(\n                size = WidgetSize.Const(SizeSpec.WrapContent, SizeSpec.WrapContent),\n                image = const(Image.resource(MR.images.logo)),\n                scaleType = ImageWidget.ScaleType.FIT\n            )\n\n            val emailInput = +input(\n                size = WidgetSize.WidthAsParentHeightWrapContent,\n                id = Id.EmailInputId,\n                label = const(\"Email\".desc() as StringDesc),\n                field = viewModel.emailField,\n                inputType = InputType.PHONE\n            )\n            val passwordInput = +input(\n                size = WidgetSize.WidthAsParentHeightWrapContent,\n                id = Id.PasswordInputId,\n                label = const(\"Password\".desc() as StringDesc),\n                field = viewModel.passwordField\n            )\n            val loginButton = +button(\n                size = WidgetSize.Const(SizeSpec.AsParent, SizeSpec.Exact(50f)),\n                content = ButtonWidget.Content.Text(Value.data(\"Login\".desc())),\n                onTap = viewModel::onLoginPressed\n            )\n\n            val registerButton = +button(\n                id = Id.RegistrationButtonId,\n                size = WidgetSize.Const(SizeSpec.WrapContent, SizeSpec.Exact(40f)),\n                content = ButtonWidget.Content.Text(Value.data(\"Registration\".desc())),\n                onTap = viewModel::onRegistrationPressed\n            )\n\n            val copyrightText = +text(\n                size = WidgetSize.WrapContent,\n                text = const(\"IceRock Development\")\n            )\n\n            constraints {\n                passwordInput centerYToCenterY root\n                passwordInput leftRightToLeftRight root offset 16\n\n                emailInput bottomToTop passwordInput offset 8\n                emailInput leftRightToLeftRight root offset 16\n\n                loginButton topToBottom passwordInput\n                loginButton leftRightToLeftRight root\n\n                registerButton topToBottom loginButton\n                registerButton rightToRight root\n\n                // logo image height must be automatic ?\n                logoImage centerXToCenterX root\n                logoImage.verticalCenterBetween(\n                    top = root.top,\n                    bottom = emailInput.top\n                )\n\n                copyrightText centerXToCenterX root\n                copyrightText bottomToBottom root.safeArea offset 8\n            }\n        }\n    }\n\n    object Id {\n        object EmailInputId : InputWidget.Id\n        object PasswordInputId : InputWidget.Id\n        object RegistrationButtonId : ButtonWidget.Id\n    }\n}\n```\n\nCode of theme:\n```kotlin\nval loginScreen = Theme(baseTheme) {\n    factory[ConstraintWidget.DefaultCategory] = ConstraintViewFactory(\n        padding = PaddingValues(16f),\n        background = Background(\n            fill = Fill.Solid(Colors.white)\n        )\n    )\n\n    factory[InputWidget.DefaultCategory] = SystemInputViewFactory(\n        margins = MarginValues(bottom = 8f),\n        underLineColor = Color(0x000000DD),\n        underLineFocusedColor = Color(0x3949ABFF),\n        labelTextStyle = TextStyle(\n            size = 12,\n            color = Color(0x3949ABFF),\n            fontStyle = FontStyle.BOLD\n        ),\n        errorTextStyle = TextStyle(\n            size = 12,\n            color = Color(0xB00020FF),\n            fontStyle = FontStyle.BOLD\n        ),\n        textStyle = TextStyle(\n            size = 16,\n            color = Color(0x000000FF),\n            fontStyle = FontStyle.MEDIUM\n        )\n    )\n\n    val corners = platformSpecific(android = 8f, ios = 25f)\n\n    factory[ButtonWidget.DefaultCategory] = SystemButtonViewFactory(\n        margins = MarginValues(top = 32f),\n        background = {\n            val bg: (Color) -\u003e Background = {\n                Background(\n                    fill = Fill.Solid(it),\n                    shape = Shape.Rectangle(\n                        cornerRadius = corners\n                    )\n                )\n            }\n            StateBackground(\n                normal = bg(Color(0x6770e0FF)),\n                pressed = bg(Color(0x6770e0EE)),\n                disabled = bg(Color(0x6770e0BB))\n            )\n        }.invoke(),\n        textStyle = TextStyle(\n            color = Colors.white\n        )\n    )\n\n    factory[LoginScreen.Id.RegistrationButtonId] = SystemButtonViewFactory(\n        background = {\n            val bg: (Color) -\u003e Background = {\n                Background(\n                    fill = Fill.Solid(it),\n                    shape = Shape.Rectangle(\n                        cornerRadius = corners\n                    )\n                )\n            }\n            StateBackground(\n                normal = bg(Color(0xFFFFFF00)),\n                pressed = bg(Color(0xE7E7EEEE)),\n                disabled = bg(Color(0x000000BB))\n            )\n        }.invoke(),\n        margins = MarginValues(top = 16f),\n        textStyle = TextStyle(\n            color = Color(0x777889FF)\n        ),\n        androidElevationEnabled = false\n    )\n}\n```\n\n## Table of Contents\n- [Features](#features)\n- [Requirements](#requirements)\n- [Versions](#versions)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Samples](#samples)\n- [Set Up Locally](#setup-locally)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Features\n- **compliance with platform rules**; \n- **declare structure, not rendering**;\n- **compile-time safety**;\n- **reactive data handling**.\n\n## Requirements\n- Gradle version 6.8+\n- Android API 16+\n- iOS version 11.0+\n\n## Installation\nroot build.gradle  \n```groovy\nallprojects {\n    repositories {\n        mavenCentral()\n    }\n}\n```\n\nproject build.gradle\n```groovy\ndependencies {\n    commonMainApi(\"dev.icerock.moko:widgets:0.2.4\")\n\n    commonMainApi(\"dev.icerock.moko:widgets-bottomsheet:0.2.4\") // show bottom sheets\n    commonMainApi(\"dev.icerock.moko:widgets-collection:0.2.4\") // collection widget\n    commonMainApi(\"dev.icerock.moko:widgets-datetime-picker:0.2.4\") // show datepicker\n    commonMainApi(\"dev.icerock.moko:widgets-image-network:0.2.4\") // images with load from url\n    commonMainApi(\"dev.icerock.moko:widgets-sms:0.2.4\") // input with sms autofill\n    commonMainApi(\"dev.icerock.moko:widgets-media:0.2.4\") // moko-media integration\n    commonMainApi(\"dev.icerock.moko:widgets-permissions:0.2.4\") // moko-permissions integration\n}\n```\n\n### Codegen for new Widgets with @WidgetDef\nroot build.gradle  \n```groovy\nbuildscript {\n    repositories {\n        gradlePluginPortal()\n    }\n\n    dependencies {\n        classpath \"dev.icerock.moko.widgets:gradle-plugin:0.2.4\"\n    }\n}\n```\n\nproject build.gradle\n```groovy\napply plugin: \"dev.icerock.mobile.multiplatform-widgets-generator\" // must apply before kotlin-multiplatform plugin\n```\n\n## Usage\n### Hello world\nMultiplatform application definition at `mpp-library/src/commonMain/kotlin/App.kt`:\n```kotlin\nclass App : BaseApplication() {\n    override fun setup(): ScreenDesc\u003cArgs.Empty\u003e {\n        val theme = Theme()\n\n        return registerScreen(HelloWorldScreen::class) { HelloWorldScreen(theme) }\n    }\n}\n```\n\nScreen definition `mpp-library/src/commonMain/kotlin/HelloWorldScreen.kt`: \n```kotlin\nclass HelloWorldScreen(\n    private val theme: Theme\n) : WidgetScreen\u003cArgs.Empty\u003e() {\n\n    override fun createContentWidget() = with(theme) {\n        container(size = WidgetSize.AsParent) {\n            center {\n                text(\n                    size = WidgetSize.WrapContent,\n                    text = const(\"Hello World!\")\n                )\n            }\n        }\n    }\n}\n```\n\nResult:\n\n|Android|iOS|\n|---|---|\n|![HelloWorld Android](https://user-images.githubusercontent.com/5010169/69857402-84408e00-12c2-11ea-945a-5f287a754e67.png)|![HelloWorld iOS](https://user-images.githubusercontent.com/5010169/69857202-febcde00-12c1-11ea-8679-5b68b5b11c42.png)|\n\n### Configure styles\nSetup theme config:\n```kotlin\nval theme = Theme {\n    factory[TextWidget.DefaultCategory] = SystemTextViewFactory(\n        textStyle = TextStyle(\n            size = 24,\n            color = Colors.black\n        ),\n        padding = PaddingValues(padding = 16f)\n    )\n}\n```\nResult:\n\n|Android|iOS|\n|---|---|\n|![Custom style Android](https://user-images.githubusercontent.com/5010169/69857575-d1bcfb00-12c2-11ea-9cbb-ee6b17357db2.png)|![Custom style iOS](https://user-images.githubusercontent.com/5010169/69857701-09c43e00-12c3-11ea-9e9d-181a298a7edf.png)|\n\n### Bind data to UI\n```kotlin\nclass TimerScreen(\n    private val theme: Theme\n) : WidgetScreen\u003cArgs.Empty\u003e() {\n    override fun createContentWidget(): Widget\u003cWidgetSize.Const\u003cSizeSpec.AsParent, SizeSpec.AsParent\u003e\u003e {\n        val viewModel = getViewModel { TimerViewModel() }\n\n        return with(theme) {\n            container(size = WidgetSize.AsParent) {\n                center {\n                    text(\n                        size = WidgetSize.WrapContent,\n                        text = viewModel.text\n                    )\n                }\n            }\n        }\n    }\n}\n\nclass TimerViewModel : ViewModel() {\n    private val iteration = MutableLiveData\u003cInt\u003e(0)\n    val text: LiveData\u003cStringDesc\u003e = iteration.map { it.toString().desc() }\n\n    init {\n        viewModelScope.launch {\n            while (isActive) {\n                delay(1000)\n                iteration.value = iteration.value + 1\n            }\n        }\n    }\n}\n```\n\n## Samples\nPlease see more examples in the [sample directory](sample).\n\n## Set Up Locally \n- The [widgets directory](widgets) contains the `widgets` library;\n- The [widgets-bottomsheet directory](widgets-bottomsheet) contains the `widgets-bottomsheet` library;\n- The [widgets-sms directory](widgets-sms) contains the `widgets-sms` library;\n- The [widgets-datetime-picker directory](widgets-datetime-picker) contains the `datetime-picker` library;\n- The [widgets-collection directory](widgets-collection) contains the `collection` library;\n- The [gradle-plugin directory](gradle-plugin) contains the gradle-plugin which apply compiler plugins for Native and JVM;\n- The [kotlin-plugin directory](kotlin-plugin) contains the JVM compiler plugin with code-generation from @WidgetDef annotation;\n- The [kotlin-native-plugin directory](kotlin-native-plugin) contains the Native compiler plugin with code-generation from @WidgetDef annotation;\n- The [kotlin-common-plugin directory](kotlin-common-plugin) contains the common code of JVM and Native compiler plugins;\n- The [sample directory](sample) contains sample apps for Android and iOS; plus the mpp-library connected to the apps;\n- For local testing a library use:\n  - `./publishToMavenLocal.sh`\n  - `cd sample/ios-app`\n  - `pod install`\n  - sample apps priority use the locally published version\n  - run android from `Android Studio` - module `android-app`, run iOS from xcode workspace `sample/ios-app/ios-app.xcworkspace`\n\n## Contributing\nAll development (both new features and bug fixes) is performed in the `develop` branch. This way `master` always contains the sources of the most recently released version. Please send PRs with bug fixes to the `develop` branch. Documentation fixes in the markdown files are an exception to this rule. They are updated directly in `master`.\n\nThe `develop` branch is pushed to `master` on release.\n\nFor more details on contributing please see the [contributing guide](CONTRIBUTING.md).\n\n## License\n        \n    Copyright 2019 IceRock MAG Inc.\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n       http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n","funding_links":[],"categories":["Libraries","Kotlin","UI"],"sub_categories":["GUI","SQL"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficerockdev%2Fmoko-widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficerockdev%2Fmoko-widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficerockdev%2Fmoko-widgets/lists"}