Verwenden von Flutter-Designs für plattformübergreifende Zielseiten (Web, Android, iOS)

Dieser Artikel ist die Fortsetzung von Cross-Plattform-Flutter-Landingpage responsiv machen. Im vorherigen Beitrag haben wir gelernt, wie man eine plattformübergreifende Landingpage (Web, Android und iOS) für verschiedene Formfaktoren reaktionsfähig macht. In diesem Beitrag werden wir sehen, wie wir das Erscheinungsbild oder das Design der Zielseite schnell ändern können, indem wir einfach einen kleinen Codeabschnitt ändern.

Sehen Sie sich das Begleitvideo an:

Teil 1. (Themen Einführung)

Teil-1a. (Globales Thema)

Teil 2. (Lokales Thema)

Teil-3. (Benutzerdefinierte Schriftarten-Web)

Teil-3a. (Benutzerdefinierte Schriftarten-native Demo)

Tor: Unser Ziel ist es, Themen für die plattformübergreifende Flutter-Zielseite (Web- und native Apps) zu erstellen.

Thema Nr. 1: Blaues Thema Verwendet benutzerdefinierte Schriftart Indie-Blume und blaue Farbe für den Kopfbereich. Die Schaltfläche “Abonnieren” demonstriert das Thema des lokalen Widgets.

Thema Nr. 1

Thema Nr. 2: Lila Thema Verwendet violette Farbe für den Kopfbereich. Keine Standardschriftart oder Textstil angegeben. Die Schaltfläche “Abonnieren” demonstriert das Thema des lokalen Widgets.

Thema Nr. 2

Thema Nr. 3: Grünes Thema Verwendet grüne Farbe für den Kopfbereich. Keine Standardschriftart angegeben. Kopfzeilen-Navigationslinks sind kursiv formatiert. Die Schaltfläche “Abonnieren” demonstriert das Thema des lokalen Widgets.

Thema Nr. 3

Einführung

Dieser Artikel ist der dritte in Entwicklung eines plattformübergreifenden Flutter-Prototyps für Landing Page Serie. In diesem Artikel zeige ich Ihnen, wie Sie erstellen und verwenden Flutter-Themen für Landingpage.

Zwei Möglichkeiten, Themes in Flutter zu implementieren:

Globales Design: Diese Art von Design wirkt sich auf die gesamte App aus. Globale Themen werden mit implementiert ThemeData

Lokale Themen: Dies ist dafür verantwortlich, Änderungen an einem Teil der App vorzunehmen, anstatt einen anderen Teil der App zu berühren. Lokale Themen werden mit umgesetzt Theme Widget und Weitergabe spezifisch ThemeData Beispiel dazu.

Beginnen wir mit der Definition des globalen Themas say AppThemeBlue für unsere Landingpage. Später zeige ich Ihnen, wie das Design eines bestimmten Widgets (z. B. SubscribeButton) mit geändert werden kann Theme Widget.

Dieser Artikel behandelt drei Aspekte von Flutter-Designs:

  • Teil 1: So erstellen und verwenden Sie globale App-Designs
  • Teil 2: So erstellen und verwenden Sie lokale Themen für ein Widget
  • Teil 3: So verwenden Sie benutzerdefinierte Schriftarten in Themen

Teil 1: So erstellen und verwenden Sie globale App-Designs

Ich habe eine Utility-Klasse erstellt MyAppThemes um den Überblick über meine themenbezogenen Konfigurationen zu behalten. Alle Methoden in dieser Klasse sind static. Ich werde drei Themenfarben verwenden: Blau (Standard), Grün und Lila, um verschiedene Themen zu demonstrieren. Ich habe eine weitere Utility-Klasse erstellt MyColors um alle Farben an einem Ort zu halten. Dies gibt mir die Flexibilität, Schattierungen einer bestimmten Farbe an einer Stelle in eine gewünschte Farbe zu ändern, anstatt nach jedem einzelnen Vorkommen in der gesamten Codebasis zu suchen.

Definieren des globalen Themas der App : Wir müssen anpassen ThemeDatadie Attribute von , um unser gewünschtes Erscheinungsbild der App zu erreichen. Ich habe verschiedene Blautöne für verwendet primaryColor, secondaryHeaderColor und accentColor. Ich werde später in der Codebasis auf die eine oder andere dieser Farben aus den Widgets meiner App verweisen.Notiz: Ich verwende vordefinierte Farben in MyColors Klasse, die ich als Farbnamen mit vorangestellter Zahl wie blue1, blue2 usw. für alle Farben benannt habe, die ich in meiner Web-/nativen App verwendet habe.

So würde ein Grundthema in Blau aussehen (alle Farben werden als unterschiedliche Blautöne verwendet).Notiz: In diesem Artikel werde ich nur ein helleres Thema implementieren. Sie können mehr darüber lesen brightness Attribut hier.

static ThemeData AppThemeBlue(BuildContext context) {
  return ThemeData(
    brightness: Brightness.light,
    primaryColor: MyColors.blue1,
    secondaryHeaderColor: MyColors.blue2,
    accentColor: MyColors.blue3,  

  );
}

Lassen Sie uns grüne und lila Themen wie unten definieren. Alles, was wir tun müssen, ist, unsere Lieblingsfarbtöne dieser Farben auszuwählen primaryColor, secondaryHeaderColor und accentColor Attribute.

Implementierung des grünen Themas:

static ThemeData AppThemeGreen(BuildContext context) {
   return ThemeData(
     // Define the default brightness and colors for the overall app.
     brightness: Brightness.light,
     primaryColor: MyColors.green1,
     secondaryHeaderColor: MyColors.green2,
     accentColor: MyColors.green3,
   );
 }

Implementierung des lila Themas:

static ThemeData AppThemePurple(BuildContext context) {
  return ThemeData(
    // Define the default brightness and colors for the overall app.
    brightness: Brightness.light,
    primaryColor: MyColors.purple1,
    secondaryHeaderColor: MyColors.purple2,
    accentColor: MyColors.purple3,
  );
}

Textthemen: Lassen Sie uns das Standard-Textdesign wie folgt definieren. Wir werden das verwenden textTheme für unsere Themen Blau und Lila.

// Define the default TextTheme for headline, title and body text
static TextTheme getDefaultTextTheme(BuildContext context) {
  return TextTheme(
    headline: TextStyle(fontSize: 36.0, fontWeight: FontWeight.bold),
    title: TextStyle(
        fontSize: 20.0,
        fontStyle: FontStyle.normal,
        fontWeight: FontWeight.bold),
    body1: TextStyle(
        fontSize: 26.0,
        fontStyle: FontStyle.italic,
        fontWeight: FontWeight.normal),
  );
}

Übergeordnete Themen erweitern: Das Erweitern von übergeordneten Themen bedeutet, in der Lage zu sein, einige Attribute des übergeordneten Themas zu ändern, während andere Attribute gleich bleiben. In diesem Beispiel aktualisieren wir textTheme. Unser GreenTheme wird sich dieses Beispiels zunutze machen. Angenommen, wir möchten unseren Titeltext kursiv darstellen. Beachten Sie den kursiven Text im Kopfbereich in den obigen Bildern.

//Example of extending the parent theme. Overwrites textTheme with given attributes
static TextTheme getItalicTitleTextTheme(BuildContext context) {
  return Theme.of(context).textTheme.copyWith(
        title: TextStyle(
            fontSize: 20.0,
            fontStyle: FontStyle.italic,
            fontWeight: FontWeight.bold),
      );
}

Integrieren TextTheme in Themendaten: Blaue und violette Themen verwenden das Standard-TextTheme:

static ThemeData AppThemeBlue(BuildContext context) {
  return ThemeData(
    ...
    textTheme: getDefaultTextTheme(context),
  );
}

static ThemeData AppThemePurple(BuildContext context) {
  return ThemeData(
    ...
    textTheme: getDefaultTextTheme(context),
  );
}

Grünes Design verwendet erweitertes TextDesign getItalicTitleTextTheme():

static ThemeData AppThemeGreen(BuildContext context) {
  return ThemeData(
    ...
    textTheme: getItalicTitleTextTheme(context),
  );
}

Verwenden von benutzerdefinierten Designs in main.dart:

Sie können das Design anpassen, indem Sie es ändern theme Attribut von MaterialApp wie unten gezeigt:

//entrance into app
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...

      //This is where you can call a new theme !
      theme: MyAppThemes.AppThemeGreen(context),

      ...
    );
  }
}

Sie werden das gleiche TextTheme für das Blau- und Lila-Thema bemerken. Für GreenTheme sehen Sie kursive Navigationslinks im Kopfbereich. Unten sind die Screenshots für alle Themen in dieser Phase. Beachten Sie, dass alle Schaltflächen entsprechend ihrer Hauptthemenfarbe thematisch ähnlich sind.

_ Thema Nr. 1 Blaues Thema: _ Blaue Farbe für alle Schaltflächen verwenden.

Thema Nr. 1

Thema #2 Lila Thema: Verwendung von violetter Farbe für alle Schaltflächen.

Thema Nr. 2

Thema #3 Grünes Thema: Verwendung grüner Farbe für alle Schaltflächen. Kopfzeilen-Navigationslinks sind kursiv formatiert.

Thema Nr. 3

Teil 2: So erstellen und verwenden Sie lokale Themen für ein Widget

Jetzt möchten wir einen bestimmten Button mit der Aufschrift „Abonnieren“ in einem orangefarbenen Thema. Wie würden wir das machen? Hier kommen lokale Themen ins Spiel. Mal sehen, wie wir ein lokales Thema definieren können. Im EmailBox Klasse wird die Schaltfläche zum Abonnieren wie folgt hinzugefügt:

...

Expanded(
  flex: 2,
  child: SubscribeButton(),
)

...

Wir können benutzen Theme Widget zu wickeln SubscribeButton() Widget. Übergeben Sie das lokale Thema ThemeData wie data Attribut von Theme Widget und hinzufügen SubscribeButton() Widget als Kind. In lokaler ThemeDatakönnen Sie überschreiben primaryColor, secondaryHeaderColor und accentColor. In diesem Beispiel verwende ich Orangetöne. Der Vorteil dieses Ansatzes besteht darin, dass Widgets themenunabhängig bleiben. Zum Beispiel ist das Branding-Logo etwas, das Sie vielleicht beibehalten möchten, auch wenn Sie das Erscheinungsbild Ihrer gesamten App ändern möchten.

Expanded(
    flex: 2,
    child:
        //Example of applying local themes to a certain widget in app
        Theme(
      data: ThemeData(
        primaryColor: MyColors.orange1,
        secondaryHeaderColor: MyColors.orange2,
        accentColor: MyColors.orange3,
      ),
      child: SubscribeButton(),
    ))

So würde SubscribeButton für alle Themes aussehen:

Lokales Thema abonnieren

Teil 3: So verwenden Sie benutzerdefinierte Schriftarten in Themen

Fahren wir fort, um benutzerdefinierte Schriftarten auf Ihrer Zielseite verwenden zu können. Zunächst möchten Sie vielleicht eine benutzerdefinierte Schriftart Ihrer Wahl von Ihrer bevorzugten Plattform herunterladen (oder von Ihrem Designer erhalten). Ich verwende die Google Fonts-Website, um benutzerdefinierte Schriftarten für dieses Beispiel herunterzuladen. Ich möchte benutzen Indie Flower-Schriftart nur für mein BlueTheme. Das Konfigurieren benutzerdefinierter Schriftarten in Flutter Web unterscheidet sich geringfügig von Flutter Native-Apps.

Benutzerdefinierte Schriftarten für das Web:

Lassen Sie uns zuerst Flutter Web erkunden:

  • Ich habe heruntergeladen IndieFlower.ttf aus Google Fonts-Website.
  • Kopieren IndieFlower.ttf Datei hinein web/assets Verzeichnis.
  • Schaffen FontManifest.json Datei drin web/assets Verzeichnis mit folgendem Inhalt:
[
    {
        "family": "Indie Flower",
        "fonts": [
            {
                "asset": "IndieFlower.ttf"
            }
        ]
    }

]
  • Aktualisieren Sie BlueTheme, um es aufzunehmen fontFamily als ‘Indie Flower’:
static ThemeData AppThemeBlue(BuildContext context) {
  return ThemeData(
    ...

    // I used custom font for the default font family.
    fontFamily: 'Indie Flower',

    ...
  );

Das ist ziemlich viel dazu! Hier ein Screenshot der Webversion: Benutzerdefinierte Schriftart-Web

Benutzerdefinierte Schriftarten auf Native (Android, iOS):

Android

Lassen Sie uns benutzerdefinierte Schriftarten für die native Zielseite verwenden. Wir müssten zwei Änderungen vornehmen:

  • Vergessen Sie nicht, die native Version der Flutter-Abhängigkeiten zu aktualisieren, wie in meinem anderen Artikel über beschrieben Laufende Flatter-Landingpage plattformübergreifend im Web und nativ.
  • Kopieren Sie die Schriftartendatei ‚IndieFlower.ttf‘ in das Schriftartenverzeichnis als fonts/IndieFlower.ttf Verzeichnis.
  • Schriftartbezogene Konfiguration aktualisieren in pubspec.yaml:
fonts:
  - family: Indie Flower
    fonts:
      - asset: fonts/IndieFlower.ttf

Screenshot der endgültigen Zielseite auf der Android-Plattform:

Android

Screenshot der endgültigen Zielseite auf der iOS-Plattform:

Android

Flattere weiter!

Quellcode-Repositorys:

Referenzen/Credits:

Viel Spaß beim Kochen mit Flutter 😃

Der Artikel hat Ihnen gefallen? Konnten Sie ein Thema Ihres Interesses nicht finden? Bitte hinterlassen Sie Kommentare oder senden Sie mir eine E-Mail zu Themen, die Sie mir schreiben möchten Übrigens ich liebe Cupcakes und Kaffee beides :)

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *