refactor: merge to Flexi UI and new usage

README-zh-CN.md

@@ -9,12 +9,10 @@
 
 一个快速生成 Android、iOS、Desktop (JVM) 的 Jetpack Compose 多平台项目模版。
 
-<img width="1767" alt="SHOT" src="img-src/shot.png">
-
 [English](README.md) | 简体中文
 
 | <img src="https://github.com/BetterAndroid/.github/blob/main/img-src/logo.png?raw=true" width = "30" height = "30" alt="LOGO"/> | [BetterAndroid](https://github.com/BetterAndroid) |
-|---------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------|
+| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
 
 这个项目属于上述组织，**点击上方链接关注这个组织**，发现更多好项目。
 
@@ -22,8 +20,9 @@
 
 这是一个快速生成 Android、iOS、Desktop (JVM) 的 Jetpack Compose 多平台项目模版。
 
-Jetpack Compose 的跨平台能力为 Android 开发者将应用程序部署到多个平台提供了可能，这份模版修改自官方提供的 [compose-multiplatform-ios-android-template](https://github.com/JetBrains/compose-multiplatform-ios-android-template)，
+Jetpack Compose 的跨平台能力为 Android 开发者将应用程序部署到多个平台提供了可能，这份模版修改自官方提供的 [Kotlin Multiplatform Wizard](https://kmp.jetbrains.com/)。
-它改进了项目结构并支持了桌面端 (JVM) 的跨平台能力。
+
+这份模版集成了 [Flexi UI](https://github.com/BetterAndroid/FlexiUI) 和 [BetterAndroid](https://github.com/BetterAndroid/BetterAndroid)，为多平台提供了更好的原生体验。
 
 ## 开始使用
 

README.md

@@ -9,8 +9,6 @@
 
 A Jetpack Compose Multiplatform project template that quickly generates Android, iOS, and Desktop (JVM).
 
-<img width="1767" alt="SHOT" src="img-src/shot.png">
-
 English | [简体中文](README-zh-CN.md)
 
 | <img src="https://github.com/BetterAndroid/.github/blob/main/img-src/logo.png?raw=true" width = "30" height = "30" alt="LOGO"/> | [BetterAndroid](https://github.com/BetterAndroid) |
@@ -24,8 +22,9 @@ This is a Jetpack Compose Multiplatform project template that quickly generates
 
 The cross-platform capability of Jetpack Compose provides Android developers with the possibility to deploy applications to multiple platforms.
 
-This template is modified from the official [compose-multiplatform-ios-android-template](https://github.com/JetBrains/compose-multiplatform-ios-android-template),
+This template is modified from the official [Kotlin Multiplatform Wizard](https://kmp.jetbrains.com/).
-it improves project structure and supports cross-platform capabilities on the desktop (JVM).
+
+This template integrates [Flexi UI](https://github.com/BetterAndroid/FlexiUI) and [BetterAndroid](https://github.com/BetterAndroid/BetterAndroid) to provide a better native experience for multi-platforms.
 
 ## Get Started
 

androidApp/src/androidMain/kotlin/MainActivity.kt

@@ -1,6 +1,5 @@
 package __GROUP_NAME__
 
-import MainView
 import android.os.Bundle
 import androidx.activity.compose.setContent
 import com.highcapable.betterandroid.ui.component.activity.AppComponentActivity
@@ -9,6 +8,6 @@ class MainActivity : AppComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        setContent { MainView() }
+        setContent { App() }
     }
 }

desktopApp/build.gradle.kts

@@ -24,6 +24,6 @@ java {
 
 compose.desktop {
     application {
-        mainClass = "MainKt"
+        mainClass = "$group.MainKt"
     }
 }

desktopApp/src/desktopMain/kotlin/Main.kt

@@ -1,3 +1,5 @@
+package __GROUP_NAME__
+
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.application
@@ -8,5 +10,5 @@ fun main() = application {
         onCloseRequest = ::exitApplication,
         title = "__APP_NAME__",
         state = rememberWindowState(width = 550.dp, height = 450.dp)
-    ) { MainView() }
+    ) { App() }
 }

gradle/sweet-dependency/sweet-dependency-config.yaml

@@ -13,10 +13,12 @@ repositories:
 plugins:
   org.jetbrains.kotlin.multiplatform:
     alias: kotlin-multiplatform
-    version: +
+    # Manually update this version visit https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-compatibility-and-versioning.html
+    version: 1.9.21
   org.jetbrains.compose:
     alias: jetbrains-compose
-    version: +
+    # Manually update this version visit https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-compatibility-and-versioning.html
+    version: 1.5.11
     repositories:
       maven-central
   com.android.application:
@@ -27,6 +29,12 @@ plugins:
     version-ref: android-application
 
 libraries:
+  com.highcapable.flexiui:
+    core:
+      version: +
+      # Flexi UI is in alpha stage for now.
+      version-filter:
+        use-internal: false
   com.highcapable.betterandroid:
     ui-component:
       version: +
@@ -46,9 +54,6 @@ libraries:
   androidx.core:
     core-ktx:
       version: +
-  com.google.android.material:
-    material:
-      version: +
   androidx.test.ext:
     junit:
       version: +

iosApp/iosApp/AppDelegate.swift

@@ -8,8 +8,8 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 
     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
         window = UIWindow(frame: UIScreen.main.bounds)
-        window?.rootViewController = App_iosKt.createUIViewController()
+        window?.rootViewController = MainViewControllerKt.createMainViewController()
         window?.makeKeyAndVisible()
         return true
     }
-}
+}

shared/build.gradle.kts

@@ -4,8 +4,6 @@ plugins {
     autowire(libs.plugins.jetbrains.compose)
 }
 
-group = property.project.groupName
-
 kotlin {
     androidTarget()
     jvm("desktop")
@@ -21,23 +19,17 @@ kotlin {
     }
     jvmToolchain(17)
     sourceSets {
-        all {
-            languageSettings {
-                optIn("androidx.compose.material3.ExperimentalMaterial3Api")
-            }
-        }
         val commonMain by getting {
             dependencies {
                 implementation(compose.runtime)
                 implementation(compose.foundation)
-                implementation(compose.material3)
+                api(com.highcapable.flexiui.core)
-                implementation(com.highcapable.betterandroid.compose.extension)
+                api(com.highcapable.betterandroid.compose.extension)
-                implementation(com.highcapable.betterandroid.compose.multiplatform)
+                api(com.highcapable.betterandroid.compose.multiplatform)
             }
         }
         val androidMain by getting {
             dependencies {
-                api(compose.foundation)
                 api(androidx.core.core.ktx)
                 api(androidx.activity.activity)
                 api(androidx.activity.activity.compose)
@@ -49,9 +41,6 @@ kotlin {
         val desktopMain by getting {
             dependencies {
                 api(compose.desktop.currentOs)
-                api(compose.runtime)
-                api(compose.foundation)
-                api(compose.material3)
             }
         }
         val iosX64Main by getting

shared/src/androidMain/kotlin/App.android.kt

@@ -1,4 +0,0 @@
-import androidx.compose.runtime.Composable
-
-@Composable
-fun MainView() = App()

shared/src/commonMain/kotlin/App.kt

@@ -1,13 +1,10 @@
-import androidx.compose.foundation.layout.Arrangement
+package __GROUP_NAME__
-import androidx.compose.foundation.layout.Column
+
-import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
-import androidx.compose.material3.Button
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -16,44 +13,70 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import com.highcapable.betterandroid.compose.multiplatform.systembar.PlatformSystemBarStyle
 import com.highcapable.betterandroid.compose.multiplatform.systembar.PlatformSystemBars
 import com.highcapable.betterandroid.compose.multiplatform.systembar.rememberSystemBarsController
+import com.highcapable.betterandroid.compose.multiplatform.systembar.setStyle
+import com.highcapable.flexiui.FlexiTheme
+import com.highcapable.flexiui.component.AreaColumn
+import com.highcapable.flexiui.component.Button
+import com.highcapable.flexiui.component.PrimaryAppBar
+import com.highcapable.flexiui.component.Scaffold
+import com.highcapable.flexiui.component.Text
+import com.highcapable.flexiui.defaultColors
 
+@Composable
+private fun MyApplicationTheme(content: @Composable () -> Unit) {
+    val systemBars = rememberSystemBarsController()
+    val currentDarkMode = isSystemInDarkTheme()
+    val colorScheme = defaultColors(currentDarkMode)
+    systemBars.setStyle(
+        if (currentDarkMode)
+            PlatformSystemBarStyle.DarkTransparent
+        else PlatformSystemBarStyle.LightTransparent
+    )
+    // Customize Flexi UI theme styles.
+    FlexiTheme(
+        colors = colorScheme,
+        content = content
+    )
+}
+
+// Generated by https://github.com/BetterAndroid/compose-multiplatform-template
+// You can visit https://github.com/BetterAndroid/FlexiUI to learn how to use Flexi UI.
 @Composable
 fun App() {
-    MaterialTheme {
+    MyApplicationTheme {
+        MainScreen()
+    }
+}
+
+@Composable
+fun MainScreen() {
+    Scaffold(
+        appBar = {
+            PrimaryAppBar(
+                title = { Text("__APP_NAME__") }
+            )
+        }
+    ) { innerPadding ->
         val systemBars = rememberSystemBarsController()
         var hideOrShowBars by remember { mutableStateOf(false) }
-        var greeting by remember { mutableStateOf("Hello world!") }
+        var greeting by remember { mutableStateOf("Hello World!") }
-        Column(modifier = Modifier.safeDrawingPadding()) {
+        AreaColumn(
-            Row(
+            modifier = Modifier.fillMaxWidth().padding(innerPadding),
-                modifier = Modifier.padding(15.dp),
+            horizontalAlignment = Alignment.CenterHorizontally
-                verticalAlignment = Alignment.CenterVertically
+        ) {
-            ) {
+            Text(text = greeting)
-                Text(
+            NecessarySpacer()
-                    text = "__APP_NAME__",
+            Button(
-                    fontSize = 20.sp,
+                onClick = { greeting = "Hello Jetpack Compose Multiplatform!" }
-                    fontWeight = FontWeight.Bold
+            ) { Text(text = "Greeting") }
-                )
+            NecessarySpacer()
-            }
+            Button(
-            Column(
+                onClick = { hideOrShowBars = !hideOrShowBars }
-                modifier = Modifier.fillMaxSize(),
+            ) { Text(text = "Trigger SystemBars") }
-                verticalArrangement = Arrangement.Center,
-                horizontalAlignment = Alignment.CenterHorizontally
-            ) {
-                Text(text = greeting)
-                Spacer(Modifier.padding(15.dp))
-                Button(onClick = { greeting = "Hello Jetpack Compose Multiplatform!" }) {
-                    Text(text = "Greeting")
-                }
-                Spacer(Modifier.padding(15.dp))
-                Button(onClick = { hideOrShowBars = !hideOrShowBars }) {
-                    Text(text = "Trigger SystemBars")
-                }
-            }
         }
         LaunchedEffect(hideOrShowBars) {
             if (hideOrShowBars)
@@ -61,4 +84,9 @@ fun App() {
             else systemBars.show(PlatformSystemBars.All)
         }
     }
+}
+
+@Composable
+private fun NecessarySpacer() {
+    Spacer(Modifier.height(20.dp))
 }

shared/src/desktopMain/kotlin/App.desktop.kt

@@ -1,4 +0,0 @@
-import androidx.compose.runtime.Composable
-
-@Composable
-fun MainView() = App()

shared/src/iosMain/kotlin/App.ios.kt

@@ -1,9 +0,0 @@
-@file:Suppress("unused")
-
-import androidx.compose.runtime.Composable
-import com.highcapable.betterandroid.compose.multiplatform.platform.AppComponentUIViewController
-
-fun createUIViewController() = AppComponentUIViewController { MainView() }
-
-@Composable
-fun MainView() = App()

shared/src/iosMain/kotlin/MainViewController.kt

@@ -0,0 +1,6 @@
+@file:Suppress("unused")
+
+import __GROUP_NAME__.App
+import com.highcapable.betterandroid.compose.multiplatform.platform.AppComponentUIViewController
+
+fun createMainViewController() = AppComponentUIViewController { App() }