Temi e Stili

# Temi e Stili

<div id="introduction"></div>

## Introduzione

Puoi gestire gli stili dell'interfaccia utente della tua applicazione utilizzando i temi. I temi ti permettono di cambiare, ad esempio, la dimensione del font del testo, l'aspetto dei pulsanti e l'aspetto generale della tua applicazione.

Se sei nuovo ai temi, gli esempi sul sito web di Flutter ti aiuteranno a iniziare <a href="https://docs.flutter.dev/cookbook/design/themes#creating-an-app-theme" target="_BLANK">qui</a>.

Per impostazione predefinita, Nylo Website include temi preconfigurati per la `Modalita' chiara` e la `Modalita' scura`.

Il tema si aggiornera' anche se il dispositivo entra in modalita' <b>'chiaro/scuro'</b>.

<div id="light-and-dark-themes"></div>

## Temi Chiaro e Scuro

- Tema chiaro - `lib/resources/themes/light_theme.dart`
- Tema scuro - `lib/resources/themes/dark_theme.dart`

All'interno di questi file, troverai ThemeData e ThemeStyle predefiniti.



<div id="creating-a-theme"></div>

## Creare un tema

Se vuoi avere temi multipli per la tua app, abbiamo un modo semplice per farlo. Se sei nuovo ai temi, segui la guida.

Per prima cosa, esegui il comando seguente dal terminale

``` bash
metro make:theme bright_theme
```

<b>Nota:</b> sostituisci **bright_theme** con il nome del tuo nuovo tema.

Questo crea un nuovo tema nella tua directory `/resources/themes/` e anche un file di colori del tema in `/resources/themes/styles/`.

``` dart
// App Themes
final List<BaseThemeConfig<ColorStyles>> appThemes = [
  BaseThemeConfig<ColorStyles>(
    id: getEnv('LIGHT_THEME_ID'),
    description: "Light theme",
    theme: lightTheme,
    colors: LightThemeColors(),
  ),
  BaseThemeConfig<ColorStyles>(
    id: getEnv('DARK_THEME_ID'),
    description: "Dark theme",
    theme: darkTheme,
    colors: DarkThemeColors(),
  ),

  BaseThemeConfig<ColorStyles>( // new theme automatically added
    id: 'Bright Theme',
    description: "Bright Theme",
    theme: brightTheme,
    colors: BrightThemeColors(),
  ),
];
```

Puoi modificare i colori per il tuo nuovo tema nel file **/resources/themes/styles/bright_theme_colors.dart**.

<div id="theme-colors"></div>

## Colori del Tema

Per gestire i colori del tema nel tuo progetto, controlla la directory `lib/resources/themes/styles`.
Questa directory contiene i colori degli stili per light_theme_colors.dart e dark_theme_colors.dart.

In questo file, dovresti avere qualcosa di simile a quanto segue.

``` dart
// e.g Light Theme colors
class LightThemeColors implements ColorStyles {
  // general
  @override
  Color get background => const Color(0xFFFFFFFF);

  @override
  Color get content => const Color(0xFF000000);
  @override
  Color get primaryAccent => const Color(0xFF0045a0);

  @override
  Color get surfaceBackground => Colors.white;
  @override
  Color get surfaceContent => Colors.black;

  // app bar
  @override
  Color get appBarBackground => Colors.blue;
  @override
  Color get appBarPrimaryContent => Colors.white;

  // buttons
  @override
  Color get buttonBackground => Colors.blue;
  @override
  Color get buttonContent => Colors.white;

  @override
  Color get buttonSecondaryBackground => const Color(0xff151925);
  @override
  Color get buttonSecondaryContent => Colors.white.withAlpha((255.0 * 0.9).round());

  // bottom tab bar
  @override
  Color get bottomTabBarBackground => Colors.white;

  // bottom tab bar - icons
  @override
  Color get bottomTabBarIconSelected => Colors.blue;
  @override
  Color get bottomTabBarIconUnselected => Colors.black54;

  // bottom tab bar - label
  @override
  Color get bottomTabBarLabelUnselected => Colors.black45;
  @override
  Color get bottomTabBarLabelSelected => Colors.black;

  // toast notification
  @override
  Color get toastNotificationBackground => Colors.white;
}
```

<div id="using-colors"></div>

## Utilizzare i colori nei widget

``` dart
import 'package:flutter_app/config/theme.dart';
...

// gets the light/dark background colour depending on the theme
ThemeColor.get(context).background

// e.g. of using the "ThemeColor" class
Text(
  "Hello World",
  style: TextStyle(
      color:  ThemeColor.get(context).content // Color - content
  ),
),

// or

Text(
  "Hello World",
  style: TextStyle(
      color:  ThemeConfig.light().colors.content // Light theme colors - primary content
  ),
),
```

<div id="base-styles"></div>

## Stili di Base

Gli stili di base ti permettono di personalizzare vari colori dei widget da un'unica area nel tuo codice.

Nylo Website viene fornito con stili di base preconfigurati per il tuo progetto situati in `lib/resources/themes/styles/color_styles.dart`.

Questi stili forniscono un'interfaccia per i colori del tuo tema in `light_theme_colors.dart` e `dart_theme_colors.dart`.

<br>

File `lib/resources/themes/styles/color_styles.dart`

``` dart
abstract class ColorStyles {

  // general
  @override
  Color get background;
  @override
  Color get content;
  @override
  Color get primaryAccent;

  @override
  Color get surfaceBackground;
  @override
  Color get surfaceContent;

  // app bar
  @override
  Color get appBarBackground;
  @override
  Color get appBarPrimaryContent;

  @override
  Color get buttonBackground;
  @override
  Color get buttonContent;

  @override
  Color get buttonSecondaryBackground;
  @override
  Color get buttonSecondaryContent;

  // bottom tab bar
  @override
  Color get bottomTabBarBackground;

  // bottom tab bar - icons
  @override
  Color get bottomTabBarIconSelected;
  @override
  Color get bottomTabBarIconUnselected;

  // bottom tab bar - label
  @override
  Color get bottomTabBarLabelUnselected;
  @override
  Color get bottomTabBarLabelSelected;

  // toast notification
  Color get toastNotificationBackground;
}
```

Puoi aggiungere stili aggiuntivi qui e poi implementare i colori nel tuo tema.

<div id="switching-theme"></div>

## Cambiare tema

Nylo Website supporta la possibilita' di cambiare tema al volo.

Ad esempio, se hai bisogno di cambiare tema quando un utente tocca un pulsante per attivare il "tema scuro".

Puoi supportare questo facendo come segue:

``` dart
import 'package:nylo_framework/theme/helper/ny_theme.dart';
...

TextButton(onPressed: () {

    // set theme to use the "dark theme"
    NyTheme.set(context, id: "dark_theme");
    setState(() { });

  }, child: Text("Dark Theme")
),

// or

TextButton(onPressed: () {

    // set theme to use the "light theme"
    NyTheme.set(context, id: "light_theme");
    setState(() { });

  }, child: Text("Light Theme")
),
```


<div id="fonts"></div>

## Font

Aggiornare il font principale in tutta l'app e' facile in Nylo Website. Apri il file `lib/config/design.dart` e aggiorna quanto segue.

``` dart
final TextStyle appThemeFont = GoogleFonts.lato();
```

Includiamo la libreria <a href="https://pub.dev/packages/google_fonts" target="_BLANK">GoogleFonts</a> nel repository, quindi puoi iniziare a usare tutti i font con poco sforzo.
Per aggiornare il font a qualcos'altro, puoi fare quanto segue:
``` dart
// OLD
// final TextStyle appThemeFont = GoogleFonts.lato();

// NEW
final TextStyle appThemeFont = GoogleFonts.montserrat();
```

Consulta i font sulla libreria ufficiale <a href="https://pub.dev/packages/google_fonts" target="_BLANK">Google Fonts</a> per saperne di piu'

Hai bisogno di usare un font personalizzato? Consulta questa guida - https://flutter.dev/docs/cookbook/design/fonts

Una volta aggiunto il tuo font, modifica la variabile come nell'esempio seguente.

``` dart
final TextStyle appThemeFont = TextStyle(fontFamily: "ZenTokyoZoo"); // ZenTokyoZoo used as an example for the custom font
```

<div id="design"></div>

## Design

Il file **config/design.dart** viene utilizzato per gestire gli elementi di design della tua app.

La variabile `appFont` contiene il font per la tua app.

La variabile `logo` viene utilizzata per visualizzare il Logo della tua app.

Puoi modificare **resources/widgets/logo_widget.dart** per personalizzare come vuoi visualizzare il tuo Logo.

La variabile `loader` viene utilizzata per visualizzare un loader. Nylo Website utilizzera' questa variabile in alcuni metodi helper come widget loader predefinito.

Puoi modificare **resources/widgets/loader_widget.dart** per personalizzare come vuoi visualizzare il tuo Loader.

<div id="text-extensions"></div>

## Estensioni di Testo

Ecco le estensioni di testo disponibili che puoi utilizzare in Nylo Website.

| Nome Regola   | Utilizzo | Info |
|---|---|---|
| <a href="#text-extension-display-large">Display Large</a> | displayLarge()  | Applica il textTheme **displayLarge** |
| <a href="#text-extension-display-medium">Display Medium</a> | displayMedium()  | Applica il textTheme **displayMedium** |
| <a href="#text-extension-display-small">Display Small</a> | displaySmall()  | Applica il textTheme **displaySmall** |
| <a href="#text-extension-heading-large">Heading Large</a> | headingLarge()  | Applica il textTheme **headingLarge** |
| <a href="#text-extension-heading-medium">Heading Medium</a> | headingMedium()  | Applica il textTheme **headingMedium** |
| <a href="#text-extension-heading-small">Heading Small</a> | headingSmall()  | Applica il textTheme **headingSmall** |
| <a href="#text-extension-title-large">Title Large</a> | titleLarge()  | Applica il textTheme **titleLarge** |
| <a href="#text-extension-title-medium">Title Medium</a> | titleMedium()  | Applica il textTheme **titleMedium** |
| <a href="#text-extension-title-small">Title Small</a> | titleSmall()  | Applica il textTheme **titleSmall** |
| <a href="#text-extension-body-large">Body Large</a> | bodyLarge()  | Applica il textTheme **bodyLarge** |
| <a href="#text-extension-body-medium">Body Medium</a> | bodyMedium()  | Applica il textTheme **bodyMedium** |
| <a href="#text-extension-body-small">Body Small</a> | bodySmall()  | Applica il textTheme **bodySmall** |
| <a href="#text-extension-label-large">Label Large</a> | labelLarge()  | Applica il textTheme **labelLarge** |
| <a href="#text-extension-label-medium">Label Medium</a> | labelMedium()  | Applica il textTheme **labelMedium** |
| <a href="#text-extension-label-small">Label Small</a> | labelSmall()  | Applica il textTheme **labelSmall** |
| <a href="#text-extension-font-weight-bold">Font Weight Bold</a> | fontWeightBold  | Applica il grassetto al widget Text |
| <a href="#text-extension-font-weight-bold">Font Weight Light</a> | fontWeightLight  | Applica il peso leggero al widget Text |
| <a href="#text-extension-set-color">Set Color</a> | setColor(context, (color) => colors.primaryAccent)  | Imposta un colore di testo diverso sul widget Text |
| <a href="#text-extension-align-left">Align Left</a> | alignLeft  | Allinea il font a sinistra |
| <a href="#text-extension-align-right">Align Right</a> | alignRight  | Allinea il font a destra |
| <a href="#text-extension-align-center">Align Center</a> | alignCenter  | Allinea il font al centro |
| <a href="#text-extension-set-max-lines">Set Max Lines</a> | setMaxLines(int maxLines)  | Imposta il numero massimo di righe per il widget text |

<br>


<div id="text-extension-display-large"></div>

#### Display large

``` dart
Text("Hello World").displayLarge()
```

<div id="text-extension-display-medium"></div>

#### Display medium

``` dart
Text("Hello World").displayMedium()
```

<div id="text-extension-display-small"></div>

#### Display small

``` dart
Text("Hello World").displaySmall()
```

<div id="text-extension-heading-large"></div>

#### Heading large

``` dart
Text("Hello World").headingLarge()
```

<div id="text-extension-heading-medium"></div>

#### Heading medium

``` dart
Text("Hello World").headingMedium()
```

<div id="text-extension-heading-small"></div>

#### Heading small

``` dart
Text("Hello World").headingSmall()
```

<div id="text-extension-title-large"></div>

#### Title large

``` dart
Text("Hello World").titleLarge()
```

<div id="text-extension-title-medium"></div>

#### Title medium

``` dart
Text("Hello World").titleMedium()
```

<div id="text-extension-title-small"></div>

#### Title small

``` dart
Text("Hello World").titleSmall()
```

<div id="text-extension-body-large"></div>

#### Body large

``` dart
Text("Hello World").bodyLarge()
```

<div id="text-extension-body-medium"></div>

#### Body medium

``` dart
Text("Hello World").bodyMedium()
```

<div id="text-extension-body-small"></div>

#### Body small

``` dart
Text("Hello World").bodySmall()
```

<div id="text-extension-label-large"></div>

#### Label large

``` dart
Text("Hello World").labelLarge()
```

<div id="text-extension-label-medium"></div>

#### Label medium

``` dart
Text("Hello World").labelMedium()
```

<div id="text-extension-label-small"></div>

#### Label small

``` dart
Text("Hello World").labelSmall()
```

<div id="text-extension-font-weight-bold"></div>

#### Font weight bold

``` dart
Text("Hello World").fontWeightBold()
```

<div id="text-extension-font-weight-light"></div>

#### Font weight light

``` dart
Text("Hello World").fontWeightLight()
```

<div id="text-extension-set-color"></div>

#### Set color

``` dart
Text("Hello World").setColor(context, (color) => colors.content)
// Color from your colorStyles
```

<div id="text-extension-align-left"></div>

#### Align left

``` dart
Text("Hello World").alignLeft()
```

<div id="text-extension-align-right"></div>

#### Align right

``` dart
Text("Hello World").alignRight()
```

<div id="text-extension-align-center"></div>

#### Align center

``` dart
Text("Hello World").alignCenter()
```

<div id="text-extension-set-max-lines"></div>

#### Set max lines

``` dart
Text("Hello World").setMaxLines(5)
```

Introduzione

Puoi gestire gli stili dell'interfaccia utente della tua applicazione utilizzando i temi. I temi ti permettono di cambiare, ad esempio, la dimensione del font del testo, l'aspetto dei pulsanti e l'aspetto generale della tua applicazione.

Se sei nuovo ai temi, gli esempi sul sito web di Flutter ti aiuteranno a iniziare qui.

Per impostazione predefinita, Nylo Website include temi preconfigurati per la Modalita' chiara e la Modalita' scura.

Il tema si aggiornera' anche se il dispositivo entra in modalita' 'chiaro/scuro'.

Temi Chiaro e Scuro

Tema chiaro - lib/resources/themes/light_theme.dart
Tema scuro - lib/resources/themes/dark_theme.dart

All'interno di questi file, troverai ThemeData e ThemeStyle predefiniti.

Creare un tema

Se vuoi avere temi multipli per la tua app, abbiamo un modo semplice per farlo. Se sei nuovo ai temi, segui la guida.

Per prima cosa, esegui il comando seguente dal terminale

metro make:theme bright_theme

Nota: sostituisci bright_theme con il nome del tuo nuovo tema.

Questo crea un nuovo tema nella tua directory /resources/themes/ e anche un file di colori del tema in /resources/themes/styles/.

// App Themes
final List<BaseThemeConfig<ColorStyles>> appThemes = [
  BaseThemeConfig<ColorStyles>(
    id: getEnv('LIGHT_THEME_ID'),
    description: "Light theme",
    theme: lightTheme,
    colors: LightThemeColors(),
  ),
  BaseThemeConfig<ColorStyles>(
    id: getEnv('DARK_THEME_ID'),
    description: "Dark theme",
    theme: darkTheme,
    colors: DarkThemeColors(),
  ),

  BaseThemeConfig<ColorStyles>( // new theme automatically added
    id: 'Bright Theme',
    description: "Bright Theme",
    theme: brightTheme,
    colors: BrightThemeColors(),
  ),
];

Puoi modificare i colori per il tuo nuovo tema nel file /resources/themes/styles/bright_theme_colors.dart.

Colori del Tema

Per gestire i colori del tema nel tuo progetto, controlla la directory lib/resources/themes/styles. Questa directory contiene i colori degli stili per light_theme_colors.dart e dark_theme_colors.dart.

In questo file, dovresti avere qualcosa di simile a quanto segue.

// e.g Light Theme colors
class LightThemeColors implements ColorStyles {
  // general
  @override
  Color get background => const Color(0xFFFFFFFF);

  @override
  Color get content => const Color(0xFF000000);
  @override
  Color get primaryAccent => const Color(0xFF0045a0);

  @override
  Color get surfaceBackground => Colors.white;
  @override
  Color get surfaceContent => Colors.black;

  // app bar
  @override
  Color get appBarBackground => Colors.blue;
  @override
  Color get appBarPrimaryContent => Colors.white;

  // buttons
  @override
  Color get buttonBackground => Colors.blue;
  @override
  Color get buttonContent => Colors.white;

  @override
  Color get buttonSecondaryBackground => const Color(0xff151925);
  @override
  Color get buttonSecondaryContent => Colors.white.withAlpha((255.0 * 0.9).round());

  // bottom tab bar
  @override
  Color get bottomTabBarBackground => Colors.white;

  // bottom tab bar - icons
  @override
  Color get bottomTabBarIconSelected => Colors.blue;
  @override
  Color get bottomTabBarIconUnselected => Colors.black54;

  // bottom tab bar - label
  @override
  Color get bottomTabBarLabelUnselected => Colors.black45;
  @override
  Color get bottomTabBarLabelSelected => Colors.black;

  // toast notification
  @override
  Color get toastNotificationBackground => Colors.white;
}

Utilizzare i colori nei widget

import 'package:flutter_app/config/theme.dart';
...

// gets the light/dark background colour depending on the theme
ThemeColor.get(context).background

// e.g. of using the "ThemeColor" class
Text(
  "Hello World",
  style: TextStyle(
      color:  ThemeColor.get(context).content // Color - content
  ),
),

// or

Text(
  "Hello World",
  style: TextStyle(
      color:  ThemeConfig.light().colors.content // Light theme colors - primary content
  ),
),

Stili di Base

Gli stili di base ti permettono di personalizzare vari colori dei widget da un'unica area nel tuo codice.

Nylo Website viene fornito con stili di base preconfigurati per il tuo progetto situati in lib/resources/themes/styles/color_styles.dart.

Questi stili forniscono un'interfaccia per i colori del tuo tema in light_theme_colors.dart e dart_theme_colors.dart.

File lib/resources/themes/styles/color_styles.dart

abstract class ColorStyles {

  // general
  @override
  Color get background;
  @override
  Color get content;
  @override
  Color get primaryAccent;

  @override
  Color get surfaceBackground;
  @override
  Color get surfaceContent;

  // app bar
  @override
  Color get appBarBackground;
  @override
  Color get appBarPrimaryContent;

  @override
  Color get buttonBackground;
  @override
  Color get buttonContent;

  @override
  Color get buttonSecondaryBackground;
  @override
  Color get buttonSecondaryContent;

  // bottom tab bar
  @override
  Color get bottomTabBarBackground;

  // bottom tab bar - icons
  @override
  Color get bottomTabBarIconSelected;
  @override
  Color get bottomTabBarIconUnselected;

  // bottom tab bar - label
  @override
  Color get bottomTabBarLabelUnselected;
  @override
  Color get bottomTabBarLabelSelected;

  // toast notification
  Color get toastNotificationBackground;
}

Puoi aggiungere stili aggiuntivi qui e poi implementare i colori nel tuo tema.

Cambiare tema

Nylo Website supporta la possibilita' di cambiare tema al volo.

Ad esempio, se hai bisogno di cambiare tema quando un utente tocca un pulsante per attivare il "tema scuro".

Puoi supportare questo facendo come segue:

import 'package:nylo_framework/theme/helper/ny_theme.dart';
...

TextButton(onPressed: () {

    // set theme to use the "dark theme"
    NyTheme.set(context, id: "dark_theme");
    setState(() { });

  }, child: Text("Dark Theme")
),

// or

TextButton(onPressed: () {

    // set theme to use the "light theme"
    NyTheme.set(context, id: "light_theme");
    setState(() { });

  }, child: Text("Light Theme")
),

Font

Aggiornare il font principale in tutta l'app e' facile in Nylo Website. Apri il file lib/config/design.dart e aggiorna quanto segue.

final TextStyle appThemeFont = GoogleFonts.lato();

Includiamo la libreria GoogleFonts nel repository, quindi puoi iniziare a usare tutti i font con poco sforzo. Per aggiornare il font a qualcos'altro, puoi fare quanto segue:

// OLD
// final TextStyle appThemeFont = GoogleFonts.lato();

// NEW
final TextStyle appThemeFont = GoogleFonts.montserrat();

Consulta i font sulla libreria ufficiale Google Fonts per saperne di piu'

Hai bisogno di usare un font personalizzato? Consulta questa guida - https://flutter.dev/docs/cookbook/design/fonts

Una volta aggiunto il tuo font, modifica la variabile come nell'esempio seguente.

final TextStyle appThemeFont = TextStyle(fontFamily: "ZenTokyoZoo"); // ZenTokyoZoo used as an example for the custom font

Design

Il file config/design.dart viene utilizzato per gestire gli elementi di design della tua app.

La variabile appFont contiene il font per la tua app.

La variabile logo viene utilizzata per visualizzare il Logo della tua app.

Puoi modificare resources/widgets/logo_widget.dart per personalizzare come vuoi visualizzare il tuo Logo.

La variabile loader viene utilizzata per visualizzare un loader. Nylo Website utilizzera' questa variabile in alcuni metodi helper come widget loader predefinito.

Puoi modificare resources/widgets/loader_widget.dart per personalizzare come vuoi visualizzare il tuo Loader.

Estensioni di Testo

Ecco le estensioni di testo disponibili che puoi utilizzare in Nylo Website.

Nome Regola	Utilizzo	Info
Display Large	displayLarge()	Applica il textTheme displayLarge
Display Medium	displayMedium()	Applica il textTheme displayMedium
Display Small	displaySmall()	Applica il textTheme displaySmall
Heading Large	headingLarge()	Applica il textTheme headingLarge
Heading Medium	headingMedium()	Applica il textTheme headingMedium
Heading Small	headingSmall()	Applica il textTheme headingSmall
Title Large	titleLarge()	Applica il textTheme titleLarge
Title Medium	titleMedium()	Applica il textTheme titleMedium
Title Small	titleSmall()	Applica il textTheme titleSmall
Body Large	bodyLarge()	Applica il textTheme bodyLarge
Body Medium	bodyMedium()	Applica il textTheme bodyMedium
Body Small	bodySmall()	Applica il textTheme bodySmall
Label Large	labelLarge()	Applica il textTheme labelLarge
Label Medium	labelMedium()	Applica il textTheme labelMedium
Label Small	labelSmall()	Applica il textTheme labelSmall
Font Weight Bold	fontWeightBold	Applica il grassetto al widget Text
Font Weight Light	fontWeightLight	Applica il peso leggero al widget Text
Set Color	setColor(context, (color) => colors.primaryAccent)	Imposta un colore di testo diverso sul widget Text
Align Left	alignLeft	Allinea il font a sinistra
Align Right	alignRight	Allinea il font a destra
Align Center	alignCenter	Allinea il font al centro
Set Max Lines	setMaxLines(int maxLines)	Imposta il numero massimo di righe per il widget text

Display large

Text("Hello World").displayLarge()

Display medium

Text("Hello World").displayMedium()

Display small

Text("Hello World").displaySmall()

Heading large

Text("Hello World").headingLarge()

Heading medium

Text("Hello World").headingMedium()

Heading small

Text("Hello World").headingSmall()

Title large

Text("Hello World").titleLarge()

Title medium

Text("Hello World").titleMedium()

Title small

Text("Hello World").titleSmall()

Body large

Text("Hello World").bodyLarge()

Body medium

Text("Hello World").bodyMedium()

Body small

Text("Hello World").bodySmall()

Label large

Text("Hello World").labelLarge()

Label medium

Text("Hello World").labelMedium()

Label small

Text("Hello World").labelSmall()

Font weight bold

Text("Hello World").fontWeightBold()

Font weight light

Text("Hello World").fontWeightLight()

Set color

Text("Hello World").setColor(context, (color) => colors.content)
// Color from your colorStyles

Align left

Text("Hello World").alignLeft()

Align right

Text("Hello World").alignRight()

Align center

Text("Hello World").alignCenter()

Set max lines

Text("Hello World").setMaxLines(5)