All Projects â†’ alphicc â†’ Brick

alphicc / Brick

Licence: MIT license
🧱 Brick - Multiplatform navigation library for Compose.

Programming Languages

kotlin
9241 projects

Projects that are alternatives of or similar to Brick

Compose Jb
Jetpack Compose for Desktop and Web, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
Stars: ✭ 7,562 (+22815.15%)
Mutual labels:  desktop, multiplatform, compose
ToDometer Multiplatform
WIP Kotlin Multiplatform project: A meter to-do list built with Android Jetpack, Compose UI Multiplatform, Wear Compose, SQLDelight, Koin Multiplatform, SwiftUI, Ktor Server / Client, Exposed...
Stars: ✭ 145 (+339.39%)
Mutual labels:  desktop, multiplatform, jetpack-compose
kmm-production-sample
This is an open-source, mobile, cross-platform application built with Kotlin Multiplatform Mobile. It's a simple RSS reader, and you can download it from the App Store and Google Play. It's been designed to demonstrate how KMM can be used in real production projects.
Stars: ✭ 1,476 (+4372.73%)
Mutual labels:  multiplatform, compose, jetpack-compose
me
A Jetpack Compose Kotlin Multiplatform WYSIWYG blog editor
Stars: ✭ 62 (+87.88%)
Mutual labels:  multiplatform, compose, jetpack-compose
Delish
Delish, a Food Recipes App in Jetpack Compose and Hilt based on modern Android tech-stacks and MVI clean architecture.
Stars: ✭ 356 (+978.79%)
Mutual labels:  compose, jetpack-compose
SuperheroLexicon
Simple superhero lexicon app to demonstrate Jetpack Compose.
Stars: ✭ 22 (-33.33%)
Mutual labels:  compose, jetpack-compose
Compose-Settings
Android #JetpackCompose Settings library
Stars: ✭ 188 (+469.7%)
Mutual labels:  compose, jetpack-compose
neon
Provides Jetpack Compose support for different image loading libraries.
Stars: ✭ 13 (-60.61%)
Mutual labels:  compose, jetpack-compose
Plasma
An Android Application written using latest Android Jetpack components and best practices, which displays trending movies/TV shows and cast, user can search movies and TV shows and also add them to watchlist.
Stars: ✭ 67 (+103.03%)
Mutual labels:  navigation, compose
compose-backstack
Simple composable for rendering transitions between backstacks.
Stars: ✭ 411 (+1145.45%)
Mutual labels:  compose, jetpack-compose
Tachidesk-JUI
A Tachidesk Client built in Compose Multiplatform
Stars: ✭ 203 (+515.15%)
Mutual labels:  jetpack-compose, compose-multiplatform
kighlighter
Simple and extendable code highlighter in Kotlin Multiplatform
Stars: ✭ 22 (-33.33%)
Mutual labels:  multiplatform, compose
ComposeBird
Flappy Bird game
Stars: ✭ 193 (+484.85%)
Mutual labels:  compose, jetpack-compose
arkitekt
Arkitekt is a set of architectural tools based on Android Architecture Components, which gives you a solid base to implement the concise, testable and solid application.
Stars: ✭ 114 (+245.45%)
Mutual labels:  compose, jetpack-compose
Cicerone
🚦 Cicerone is a lightweight library that makes the navigation in an Android app easy.
Stars: ✭ 2,345 (+7006.06%)
Mutual labels:  navigation, multistack
PCard
Demo project to showcase adding payment card details using JetPack Compose
Stars: ✭ 61 (+84.85%)
Mutual labels:  compose, jetpack-compose
resaca
The right scope for View Models in Android Compose
Stars: ✭ 105 (+218.18%)
Mutual labels:  compose, jetpack-compose
Decompose
Kotlin Multiplatform lifecycle-aware business logic components (aka BLoCs) with routing functionality and pluggable UI (Jetpack Compose, SwiftUI, JS React, etc.), inspired by Badoos RIBs fork of the Uber RIBs framework
Stars: ✭ 799 (+2321.21%)
Mutual labels:  multiplatform, jetpack-compose
Coyim
coyim - a safe and secure chat client
Stars: ✭ 513 (+1454.55%)
Mutual labels:  desktop, multiplatform
Mindustry
The automation tower defense game
Stars: ✭ 13,105 (+39612.12%)
Mutual labels:  desktop, multiplatform

MAVEN Platform API Platform


Brick

Take control of your apps

Brick is a lightweight library to make navigation.

Features

  • Framework free (Router can be injected in any layer of project. Navigate from any place you want. Example: UI-navigation or business logic navigation)
  • Child component navigation (easy BottomSheet navigation, Tab navigation, Dialogs navigation)
  • Composite navigation (build component from many mini-components.)
  • Decompose everything (Decompose component by buttons, text fields etc.!)
  • Nested navigation
  • Lifecycle
  • Multi-module navigation (provide router instance from any module to any module or just implement all app navigation inside one module or something else)
  • Deep-link support
  • Arguments support
  • components communication support
  • Current component check
  • Transition animations
  • Overlay navigation

Samples

Overlay sample Transition Animation Small sample Large sample
Desktop sample

Installation

Add repository in your project

repositories {
    mavenCentral()
    maven {
        url "https://maven.pkg.jetbrains.space/public/p/compose/dev"
    }
}

Add the dependency in your build.gradle

dependencies {
    //Brick
    implementation 'io.github.alphicc:brick:2.0.0-alpha01'
}

Android: Set jvmTarget in your build.gradle

kotlinOptions {
    jvmTarget = '11'
}

Thats all!

Usage

  1. Create Router in any place of your project (Note: router contains all information about component. Router destroyed = all navigation/components data destroyed).
val router: TreeRouter = TreeRouter.new()
  1. Create Component. Component != UI. Component has lifecycle, channels to communicate between other components. Component can live without UI. UI - part of Component.
val component1 = Component<Unit>(
    key = "1",
    content = { _, _ -> SimpleComponent(1, "new") { smallSampleRouter.addComponent(component2) } } // content - ui
)
  1. Provide ContainerConnector to %PLATFORM%AnimatedComponentsContainer or %PLATFORM%ComponentsContainer . Your Router implements ContainerConnector.
class SmallSampleActivity : ComponentActivity() {

    val containerConnector: ContainerConnector = ... //inject or provide from application class

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            AndroidComponentsContainer(containerConnector) {
                //on router empty callback
            }
        }
    }
}
  1. Navigate!

Work representation

Integration schema

Work schema

Lifecycle sample

Multistack navigation

  1. Create nested router using branch method.
//Components.bottomMenuComponent.key - component key that contains nested container
private val firstMenuRouter = mainRouter.branch(Components.bottomMenuComponent.key).apply {
    addComponent(Components.innerNavigationComponent, this)//initial navigation sample
}
  1. Pass created nested router to your nested %PLATFORM%ComponentsContainer.
//inside your composable function
%PLATFORM % AnimatedComponentsContainer(firstMenuRouter)
  1. Use your nested router to make nested navigation!

Multistack graph sample (simple)

Multistack graph sample (extended)

Composite navigation

Starting with version 2.* and above, you can extract small UI components to the Component and paste this small components in any place of other Component you want. Thus making them reusable. It also makes it possible to further decompose work when working in the team. Allowing you to work on one small UI component (like button, text field etc.) without affecting other components.

Screen sample

Decompose your screen by components

Code sample

Main screen component

val compositeScreen = Component<Unit>(
    key = "CompositeScreen",
    content = { _, compositeContainer ->
        Box(modifier = Modifier.fillMaxSize()) {
            Box(modifier = Modifier.align(Alignment.TopCenter)) {
                compositeContainer.place(component1.key)//use place method to define position of your component
            }

            Box(modifier = Modifier.align(Alignment.Center)) {
                compositeContainer.place(component3.key)
            }

            Box(modifier = Modifier.align(Alignment.BottomCenter)) {
                compositeContainer.place(component2.key)
            }
        }
    }
)

Components.

val component1 = Component<Unit>(
    key = "CompositeScreenInternal 1",
    onCreate = { _, _ -> }, lifecycle of your componentg
    onDestroy = { _ -> },
    content = { _, _ -> Text("CompositeScreenInternal 1") }
)

val component2 = Component<Unit>(
    key = "CompositeScreenInternal 2",
    content = { _, _ -> Text("CompositeScreenInternal 2") }
)

val component3 = Component<Unit>(
    key = "CompositeScreenInternal 3",
    content = { _, _ ->
        Button({}) {
            Text("CompositeScreenInternal 3")
        }
    }
)

Attach your components to main component (screen)

compositeSampleRouter.addComponent(compositeScreen) // default navigation method. like addScreen method in 1.*.*
compositeSampleRouter.attachCompositeComponent(component1, "321") // attach component into compositeScreen
compositeSampleRouter.attachCompositeComponent(component2) //composite components will be attached to current main component (screen)
compositeSampleRouter.attachCompositeComponent(component3)
compositeSampleRouter.detachCompositeComponent(component3) // use to detach composite component from main component

Note: composite components are shared between the component they are added to and its child components

Communicate between components

Pass data

// router - is your TreeRouter
// Screens.channelArgumentReceiveComponent.key - key of your destination component
// counter - argument
router.passArgument(Screens.channelArgumentReceiveComponent.key, counter)

Receive data

...
onCreate = { channel, _ -> return@Component ChannelArgumentReceiveViewModel(channel) }, //channel it is a SharedFlow that located in component onCreate lifecycle method
...

// Use method get<T> to receive your data
channel.onEach { _count.value = it.get() }.launchIn(scope)

Navigation methods list

  • currentComponentKey
  • backComponent
  • backToComponent
  • replaceComponent
  • addComponent
  • lastChildKey
  • backChild
  • backToChild
  • replaceChild
  • addChild
  • cleanRouter
  • setOverlay
  • removeOverlay
  • newRootComponent
  • attachCompositeComponent
  • detachCompositeComponent

Migrate from 1.* to 2.* version

  • Rename AndroidAnimatedScreensContainer to AndroidAnimatedComponentsContainer
  • Rename AndroidScreensContainer to AndroidComponentsContainer
  • Rename DesktopAnimatedScreensContainer to DesktopAnimatedComponentsContainer
  • Rename DesktopScreensContainer to DesktopComponentsContainer
  • To handle router empty action provide onRouterEmpty callback into %PLATFORM%ComponentsContainer
  • Rename Screen<T> to Component<T>
  • Inside Component<T> change
...
content = { dataContainer ->  }
...
//to
...
content = { dataContainer, compositeContainer ->  }
...
  • Rename currentScreenKey to currentComponentKey
  • Rename backScreen to backComponent
  • Rename backToScreen to backToComponent
  • Rename replaceScreen to replaceComponent
  • Rename addScreen to addComponent
  • Rename newRootScreen to newRootComponent
  • To fix other package changes just reimport
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].