How to add customised icon from https://fonts.google.com/icons

[kronoss00]

Can you give a more detailed explanation as to how I can customize the icons on Icons.xxxxx and how I can upload the IconData class reference. Can you give an example please. Thanks

[AdilSoomro]

You just need to find two things:

• the slug of your term
• icon code from google icons.

For example, the term Flat has slug as flat on your website admin panel, so you want to update its icon, you'll browse Google Font website and look for relevant icon. Lets say you found apartment icon from there for the Flat. You can return this icon from hooks map as below:

@override
  Map<String, dynamic> getElegantHomeTermsIconMap() {
    Map<String, dynamic> _iconMap = {
      "for-rent": Icons.vpn_key_outlined,
      "for-sale": Icons.real_estate_agent_outlined,
      "flat": Icons.apartment,
      "detached": Icons.gite,
    };

    return _iconMap;
  }

Restart the app and these icon will show on home screen.

[kronoss00]

I know how to update the icons, My question is, for example I have "flat": Icons.apartment, but I want to customise the default icon in a way which suits my needs for example add a red colour for the outline. How can I go about doing this.

[AdilSoomro]

Use Houzi Builder to generate theme config of you app.

Any customization more than this will need to be done from code. Check getTypeStatusWidget() function in the following file: PROJECT_ROOT/packages/houzi_package/lib/widgets/type_status_row_widget.dart

[kronoss00]

Can I change the border colour for these icons? If so, can you please explain how I can do so.

Thanks for the support.

[AdilSoomro]

If you want to change this grey-ish circular color in entire app, then you can open following file:

PROJECT_HOME/packages/houzi_package/lib/files/app_preferences/app_preferences.dart

and update the containerBackgroundColorLight and containerBackgroundColorDark value. It'll update the grey-ish color in every page, ie listing details etc.

If you only want to update color here in the terms circle only. You can open following file

PROJECT_HOME/packages/houzi_package/lib/widgets/type_status_row_widget.dart

and look for function getTypeStatusWidget() and around line 132, you should see following color for Card

color: AppThemePreferences().appTheme.containerBackgroundColor,

update this with your desired color as below:

color: Colors.red,

[kronoss00]

I tried both but the outcome is not the way I want it. As you can see the border for feature is red. This is how I want the border to be like for the icons that I showed you in my previous message.

[AdilSoomro]

Okay, in that case you can add the border to your Card widget like below:

      Card(
            elevation: AppThemePreferences.zeroElevation,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(AppThemePreferences.propertyDetailFeaturesRoundedCornersRadius),
              side: BorderSide(color: Colors.red),
            ),
            color: AppThemePreferences().appTheme.containerBackgroundColor,
            ...

This should show border like below

[kronoss00]

Is it possible to add multiple colours like shown in this picture?

Please let me know.

Thanks

[AdilSoomro]

Yes, it is possible.

Checkout following links:

1. https://stackoverflow.com/q/55395641/593709
2. https://dev.to/valerianagit/create-a-rounded-container-with-a-gradient-border-36kb
3. https://pub.dev/packages/outline_gradient_button

[kronoss00]

Can you send me custom code like the picture I sent, I am not very technical. Also the name of the file I should add the changes to. I would appreciate it.

[AdilSoomro]

It is a multi step procedure. You will need to add flutter dependency for gradient borders and then you'll need to customize borders.

It is better to hire flutter developer for all the custom work.

[AdilSoomro]

Marking this as closed. Please open new issue if you find any bug or need assistance.