Skip to content

Commit

Permalink
Solara
Browse files Browse the repository at this point in the history
  • Loading branch information
@ideyaa
ideyaa committed Sep 19, 2024
1 parent f9ab449 commit 5be0efd
Showing 1 changed file with 376 additions and 0 deletions.
376 changes: 376 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,382 @@ Let's give examples for demonstrating the development approach

## Flutter Development

### Flutter Resources

In [main.dart](https://github.com/Solara-Kit/Infinite/blob/main/flutter/lib/main.dart), to show the logo, we write something like this

```dart
Widget _headerView() {
return Image.asset(
'assets/solara_artifacts/logo.png',
width: 200,
height: 200,
);
}
```

The logo is copied to `assets/solara_artifacts/logo.png` during the **switch** process. If you change the logo to another image in other brands, it will display the new image for that brand and so on.


### Flutter Theme

- To apply the brand theme, we write something like this

```dart
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Infinite',
theme: ThemeData(
colorScheme: const ColorScheme(
primary: BrandColors.primary,
secondary: BrandColors.secondary,
surface: BrandColors.surface,
background: BrandColors.background,
error: BrandColors.error,
onPrimary: BrandColors.onPrimary,
onSecondary: BrandColors.onSecondary,
onSurface: BrandColors.onSurface,
onBackground: BrandColors.onBackground,
onError: BrandColors.onError,
brightness: Brightness.light,
),
useMaterial3: true,
),
home: const MyHomePage(title: 'Infinite'),
);
}
}
```

We refere to each color from `BrandColors` which is generated by Solara during the switching process.

### Flutter App Configurations

To get the app configuration, Solara makes it easy by generating them for you. You can get these data from `BrandConfig` which is located in `brand_config.dart` file, like this example
```dart
Widget _brandInfoView() {
const brandConfig = BrandConfig.instance;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildInfoText(
'Android Application ID:',
brandConfig.androidApplicationId,
BrandColors.primary,
BrandColors.secondary,
),
_buildInfoText(
'Android Version Name:',
brandConfig.androidVersionName,
BrandColors.primary,
BrandColors.secondary,
),
_buildInfoText(
'Android Version Code:',
brandConfig.androidVersionCode.toString(),
BrandColors.primary,
BrandColors.secondary,
),
const SizedBox(height: 16)
_buildInfoText(
'iOS Bundle Identifier:',
brandConfig.iOSBundleIdentifier,
BrandColors.primary,
BrandColors.secondary,
),
_buildInfoText(
'iOS Marketing Version:',
brandConfig.iOSMarketingVersion,
BrandColors.primary,
BrandColors.secondary,
),
_buildInfoText(
'iOS Bundle Version:',
brandConfig.iOSBundleVersion.toString(),
BrandColors.primary,
BrandColors.secondary,
),
],
),
);
}
```


### Flutter Custom Configurations

To add custom configuration to your brand, you have to put the configuration to `YOUR_BRAND/shared/brand_config`. For example, we need to add `showSplashScreen` and `baseUrl` with a different value for each brand:

- Brand 1 brand_confog.json

```json
{
"showSplashScreen": true,
"baseUrl": "https://www.google.com"
}
```

- Brand 2 brand_confog.json

```json
{
"showSplashScreen": false,
"baseUrl": "https://www.facebook.com"
}
```

Now to get the configurations, you can can call `BrandConfog.instance.baseUrl`


```dart
Widget _brandInfoView() {
const brandConfig = BrandConfig.instance;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 16),
_buildInfoText(
'showSplashScreen:',
brandConfig.showSplashScreen.toString(),
BrandColors.primary,
BrandColors.secondary,
),
_buildInfoText(
'baseUrl:',
brandConfig.baseUrl.toString(),
BrandColors.primary,
BrandColors.secondary,
),
],
),
);
}
```

> For the full project, check [Infinite Flutter Project](https://github.com/Solara-Kit/Infinite/blob/main/flutter).

## iOS Development

### iOS Resources

In [ContentView.swift](https://github.com/Solara-Kit/Infinite/blob/main/ios/Infinite/ContentView.swift), to show the logo, we write something like this

```swift
struct HeaderView: View {
var body: some View {
Image("logo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: 200)
}
}
```

The logo is copied to `Assets.xcassets/SolaraArtifacts/logo.imageasset` during the switch process. If you change the logo to another image in other brands, it will display the new image for that brand and so on.


### iOS Theme

- To apply the brand theme, we write something like this

```swift
struct ContentView: View {
var body: some View {
NavigationView {
MyHomePage(title: "Infinite")
}
.accentColor(BrandTheme.Colors.primary)
.background(BrandTheme.Colors.background)
}
}

```

We refere to each color from `BrandTheme.Colors` which is generated by Solara during the switching process.

### iOS App Configurations

To get the app configuration, Solara makes it easy by generating them for you. You can get these data from `BrandConfig.swift`, like this example
```swift
var body: some View {
VStack(alignment: .leading, spacing: 8) {
InfoText(title: "Bundle Identifier:", value: brandConfig.bundleIdentifie)
InfoText(title: "Version Name:", value: brandConfig.marketingVersion)
InfoText(title: "Build Number:", value: String(brandConfig.bundleVersion)
}
}
```


### iOS Custom Configurations

To add custom configuration to your brand, you have to put the configuration to `YOUR_BRAND/shared/brand_config`. For example, we need to add `showSplashScreen` and `baseUrl` with a different value for each brand:

- Brand 1 brand_confog.json

```json
{
"showSplashScreen": true,
"baseUrl": "https://www.google.com"
}
```

- Brand 2 brand_confog.json

```json
{
"showSplashScreen": false,
"baseUrl": "https://www.facebook.com"
}
```

Now to get the configurations, you can can call `BrandConfog.instance.baseUrl`


```swift
var body: some View {
VStack(alignment: .leading, spacing: 8) {
InfoText(title: "baseUrl:", value: brandConfig.baseUrl)
InfoText(title: "showSplashScreen:", value: String(brandConfig.showSplashScreen))
}
}
```

> For the full project, check [Infinite iOS Project](https://github.com/Solara-Kit/Infinite/blob/main/ios).


## Android Development

### Android Resources

In [HomeScreen.kt](https://github.com/Solara-Kit/Infinite/blob/main/android/app/src/main/java/com/android/infinite/HomeScreen.kt), to show the logo, we write something like this

```dart
@Composable
fun HeaderView() {
Image(
painter = painterResource(id = R.drawable.logo),
contentDescription = "Solara Logo",
modifier = Modifier
.size(200.dp)
.fillMaxWidth()
)
}
```

The logo is copied to `src/main/solara_artifacts/logo.png` during the switch process. If you change the logo to another image in other brands, it will display the new image for that brand and so on.


### Android Theme

- To apply the brand theme, we write something like this

```kotlin
@Composable
fun InfiniteApp() {
val navController = rememberNavController()

MaterialTheme(
colorScheme = MaterialTheme.colorScheme.copy(
primary = Color(BrandTheme.Colors.primary),
onPrimary = Color(BrandTheme.Colors.onPrimary),
secondary = Color(BrandTheme.Colors.secondary),
onSecondary = Color(BrandTheme.Colors.onSecondary),
surface = Color(BrandTheme.Colors.surface),
onSurface = Color(BrandTheme.Colors.onSurface),
background = Color(BrandTheme.Colors.background),
error = Color(BrandTheme.Colors.error),
onBackground = Color(BrandTheme.Colors.onBackground),
onError = Color(BrandTheme.Colors.onError),
)
) {
val isActive = remember { mutableStateOf(true) }

if (BrandConfig.instance.showSplashScreen && isActive.value) {
SplashScreen(isActive)
} else {
HomeScreen(navController = navController, title = stringResource(R.string.app_name))
}
}
}
```

We refere to each color from `BrandTheme.Colors` which is generated by Solara during the switching process.

### Android App Configurations

To get the app configuration, Solara makes it easy by generating them for you. You can get these data from `BrandConfig`, like this example:
```kotlin
@Composable
fun BrandInfoView() {
val brandConfig = BrandConfig.instance

Column(
modifier = Modifier.padding(16.dp)
) {
InfoText("Application ID:", brandConfig.applicationId)
InfoText("Version Name:", brandConfig.versionName)
InfoText("Version Code:", brandConfig.versionCode.toString())
InfoText("baseUrl:", brandConfig.baseUrl)
InfoText("showSplashScreen:", brandConfig.showSplashScreen.toString())
Spacer(modifier = Modifier.height(16.dp))
}
}
```


### Android Custom Configurations

To add custom configuration to your brand, you have to put the configuration to `YOUR_BRAND/shared/brand_config`. For example, we need to add `showSplashScreen` and `baseUrl` with a different value for each brand:

- Brand 1 brand_confog.json

```json
{
"showSplashScreen": true,
"baseUrl": "https://www.google.com"
}
```

- Brand 2 brand_confog.json

```json
{
"showSplashScreen": false,
"baseUrl": "https://www.facebook.com"
}
```

Now to get the configurations, you can can call `BrandConfog.instance.baseUrl`


```kotlin
@Composable
fun BrandInfoView() {
val brandConfig = BrandConfig.instance

Column(
modifier = Modifier.padding(16.dp)
) {
InfoText("Application ID:", brandConfig.applicationId)
InfoText("Version Name:", brandConfig.versionName)
InfoText("Version Code:", brandConfig.versionCode.toString())
InfoText("baseUrl:", brandConfig.baseUrl)
InfoText("showSplashScreen:", brandConfig.showSplashScreen.toString())
Spacer(modifier = Modifier.height(16.dp))
}
}
```

> For the full project, check [Infinite Android Project](https://github.com/Solara-Kit/Infinite/blob/main/android).


## Why Solara?
Expand Down

0 comments on commit 5be0efd

Please sign in to comment.