Flutter Development

Flutter Development

Resources

In main.dart, we display the logo using the following code:

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

During the switch process, the logo is copied to assets/solara_artifacts/logo.png. If you update the logo to a different image for another brand, the new image will automatically be displayed for that brand. This approach allows for seamless branding across different implementations.

Theme

In main.dart, we apply the brand theme using this code snippet:

@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'),
  );
}

In this example, each color is referenced from BrandColors, which is generated by Solara during the switching process.

---

App Configurations

Solara simplifies accessing app configurations by generating them for you. You can retrieve this data using BrandConfig, located in the brand_config.dart file, as shown in the following example:

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,
        ),
      ],
    ),
  );
}

---

Custom Configurations

To add custom configurations for your brand, place the configuration in YOUR_BRAND/shared/brand_config. For example, you might have different settings for different brands:

• Brand 1 (brand_config.json)

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

• Brand 2 (brand_config.json)

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

We access these configurations with BrandConfig.instance, as shown below:

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 the Infinite Flutter Project.