Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/media990/domains/mediaart-jena.de/public_html/wp-content/themes/Divi/includes/builder/functions.php on line 5941
Responsive Web- und Desktop-Entwicklung mit Flutter - Marketing
Seite auswählen

Dieses Tutorial ist keine Einführung in Flutter. Es gibt viele Artikel, Videos und verschiedene Bücher online mit einfachen Einführungen, die Ihnen helfen, die Grundlagen von Flutter zu erlernen. Stattdessen werden wir die folgenden zwei Ziele behandeln:

  1. Der aktuelle Stand der nicht mobilen Entwicklung von Flutter und wie Sie Flutter-Code im Browser, auf einem Desktop- oder Laptop-Computer ausführen können;
  2. So erstellen Sie reaktionsschnelle Apps mit Flutter, damit Sie die Leistung – insbesondere als Webframework – vollständig anzeigen und mit einem Hinweis zum Routing basierend auf der URL abschließen können.

Lass uns loslegen!

Was Ist Flattern, Warum Ist Es Wichtig, Was Hat Es Sich Entwickelt, Wohin Es Geht?

Flutter ist Googles neuestes Framework für die App-Entwicklung. Google sieht es als umfassend an: Es ermöglicht die Ausführung desselben Codes auf Smartphones aller Marken, auf Tablets sowie auf Desktop- und Laptops als native Apps oder als Webseiten.

Es ist ein sehr ehrgeiziges Projekt, aber Google war bisher unglaublich erfolgreich, insbesondere in zweierlei Hinsicht: bei der Schaffung eines wirklich plattformunabhängigen Frameworks für native Android- und iOS-Apps, das hervorragend funktioniert und vollständig für die Produktion bereit ist, und bei der Schaffung einer beeindruckenden Front -end Web Framework, das 100% des Codes mit einer kompatiblen Flutter App teilen kann.

Im nächsten Abschnitt werden wir sehen, was die App kompatibel macht und wie der Stand der nicht-mobilen Flutter-Entwicklung ab sofort ist.

Nicht Mobile Entwicklung Mit Flattern

Die nicht-mobile Entwicklung mit Flutter wurde erstmals auf Google I / O 2019 in erheblichem Umfang veröffentlicht. In diesem Abschnitt wird erläutert, wie und wann sie funktioniert.

SO AKTIVIEREN SIE DIE WEB- UND DESKTOP-ENTWICKLUNG

Um die Webentwicklung zu aktivieren, müssen Sie sich zuerst im Beta-Kanal von Flutter befinden. Es gibt zwei Möglichkeiten, um an diesen Punkt zu gelangen:

  • Installieren Sie Flutter direkt auf dem Beta-Kanal, indem Sie die entsprechende neueste Beta-Version aus dem SDK-Archiv herunterladen .
  • Wenn Sie Flutter bereits installiert haben, wechseln Sie mit zum Beta-Kanal $ flutter channel betaund führen Sie den Wechsel selbst durch, indem Sie Ihre Flutter-Version (die sich tatsächlich git pullim Flutter-Installationsordner befindet) mit aktualisieren $ flutter upgrade.

Danach können Sie Folgendes ausführen:

$ flutter config –enable-web

Kopieren

Die Desktop-Unterstützung ist viel experimenteller, insbesondere aufgrund des Mangels an Tools für Linux und Windows, was die Plugin-Entwicklung besonders schwierig macht, und aufgrund der Tatsache, dass die dafür verwendeten APIs für die Verwendung als Proof-of-Concept vorgesehen sind und nicht für Produktion. Dies ist anders als bei der Webentwicklung, bei der der bewährte dart2js-Compiler für Release-Builds verwendet wird, die nicht einmal für native Windows- und Linux-Desktop-Apps unterstützt werden.

Hinweis : Die Unterstützung für macOS ist etwas besser als die Unterstützung für Windows und Linux, aber immer noch nicht so gut wie die Unterstützung für das Web und bei weitem nicht so gut wie die vollständige Unterstützung für mobile Plattformen.

Um die Unterstützung für die Desktop-Entwicklung zu aktivieren, müssen Sie zum masterRelease-Kanal wechseln, indem Sie die zuvor für den betaKanal beschriebenen Schritte ausführen . Führen Sie dann die folgenden durch den Austausch <OS_NAME>mit entweder linux, windowsoder macos:

$ flutter config –enable-<OS_NAME>-desktop

Kopieren

Wenn Sie an dieser Stelle Probleme mit einem der folgenden Schritte haben, die ich beschreiben werde, weil das Flutter-Tool nicht das tut, was ich sage, sollten Sie folgende Schritte zur Fehlerbehebung ausführen:

  • Ausführen flutter doctor, um nach Problemen zu suchen. Ein Nebeneffekt dieses Flutter-Befehls ist, dass er alle benötigten Tools herunterladen sollte, die er nicht hat.
  • Ausführen flutter upgrade.
  • Schalten Sie es aus und wieder ein. Die alte Antwort des technischen Supports auf den Tier-1-Neustart Ihres Computers ist möglicherweise genau das, was Sie benötigen, um den vollen Reichtum von Flutter nutzen zu können.

AUSFÜHREN UND ERSTELLEN VON FLUTTER-WEB-APPS

Die Unterstützung von Flutter Web ist überhaupt nicht schlecht, und dies spiegelt sich in der einfachen Entwicklung für das Web wider.

Laufen dies…

$ flutter devices

Kopieren

… Sollte sofort einen Eintrag für so etwas anzeigen:

Web Server • web-server • web-javascript • Flutter Tools

Kopieren

Darüber hinaus sollte das Ausführen des Chrome-Browsers dazu führen, dass Flutter auch einen Eintrag dafür anzeigt. Laufen flutter runauf einem kompatiblen Flutter – Projekt (mehr dazu später) , wenn der einzige „angeschlossene Gerät“ zeigt nach oben ist der Webserver Flutter verursachen einen Web – Server auf Start localhost:<RANDOM_PORT>, die es Ihnen erlaubt, Ihre Flutter Web – App Zugriff von einem beliebigen Browser.

Wenn Sie Chrome installiert haben, es jedoch nicht angezeigt wird, müssen Sie die CHROME_EXECUTABLEUmgebungsvariable auf den Pfad zur ausführbaren Chrome-Datei festlegen .

AUSFÜHREN UND ERSTELLEN VON FLUTTER DESKTOP APPS

Nachdem Sie die Flutter-Desktopunterstützung aktiviert haben, können Sie eine Flutter-App nativ auf Ihrer Entwicklungsarbeitsstation ausführen flutter run -d <OS_NAME>und <OS_NAME>durch denselben Wert ersetzen, den Sie beim Aktivieren der Desktopunterstützung verwendet haben. Sie können auch Binärdateien im buildVerzeichnis mit erstellen flutter build <OS_NAME>.

Bevor Sie dies tun können, benötigen Sie jedoch ein Verzeichnis, das enthält, was Flutter für Ihre Plattform erstellen muss. Dies wird automatisch erstellt, wenn Sie ein neues Projekt erstellen, aber Sie müssen es für ein vorhandenes Projekt mit erstellen flutter create .. Außerdem sind die Linux- und Windows-APIs instabil, sodass Sie sie möglicherweise für diese Plattformen neu generieren müssen, wenn die App nach einem Flutter-Update nicht mehr funktioniert.

WANN IST EINE APP KOMPATIBEL?

Was habe ich die ganze Zeit gemeint, als ich erwähnte, dass eine Flutter-App ein „kompatibles Projekt“ sein muss, damit sie auf dem Desktop oder im Web funktioniert? Einfach gesagt, ich meine, dass es kein Plugin verwenden darf, das keine plattformspezifische Implementierung für die Plattform hat, auf der Sie aufbauen möchten.

Um diesen Punkt für alle absolut klar zu machen und Missverständnisse zu vermeiden, beachten Sie bitte, dass ein Flutter-Plugin ein bestimmtes Flutter-Paket ist , das plattformspezifischen Code enthält, der für die Bereitstellung seiner Funktionen erforderlich ist.

Beispielsweise können Sie das von Google entwickelte url_launcherPaket so oft verwenden, wie Sie möchten (und dies möchten Sie möglicherweise, da das Web auf Hyperlinks basiert).

Ein Beispiel für ein von Google entwickeltes Paket, dessen Verwendung die Webentwicklung ausschließen würde path_provider, ist das, mit dem der lokale Speicherpfad zum Speichern von Dateien abgerufen wird. Dies ist ein Beispiel für ein Paket, das für eine Web-App im Übrigen nicht von Nutzen ist. Wenn Sie es also nicht verwenden können, ist dies kein wirklicher Mist, außer der Tatsache, dass Sie Ihren Code ändern müssen, um es funktioniert im Web, wenn Sie es verwenden.

Sie können beispielsweise das Paket shared_preferences verwenden , das auf HTML localStorageim Web basiert .

Ähnliche Einschränkungen gelten für Desktop-Plattformen: Nur sehr wenige Plugins sind mit Desktop-Plattformen kompatibel, und da dies ein wiederkehrendes Thema ist, muss auf der Desktop-Seite viel mehr daran gearbeitet werden, als auf Flutter für das Web wirklich erforderlich ist.

Erstellen Von Reaktionsschnellen Layouts In Flutter

Aufgrund der oben beschriebenen und der Einfachheit halber gehe ich für den Rest dieses Beitrags davon aus, dass Ihre Zielplattform das Web ist, aber die grundlegenden Konzepte gelten auch für die Desktop-Entwicklung.

Die Unterstützung des Webs hat Vorteile und Verantwortlichkeiten. Wenn Sie gezwungen sind, unterschiedliche Bildschirmgrößen zu unterstützen, klingt dies möglicherweise nach einem Nachteil. Wenn Sie jedoch die App in den Webbrowsern ausführen, können Sie sehr einfach sehen, wie Ihre App auf Bildschirmen mit unterschiedlichen Größen und Seitenverhältnissen aussieht, ohne separat ausgeführt werden zu müssen Emulatoren für mobile Geräte.

Sprechen wir jetzt über Code. Wie können Sie Ihre App reaktionsschnell machen?

Es gibt zwei Perspektiven, aus denen diese Analyse durchgeführt wird:

  1. “Welche Widgets verwende ich oder kann ich verwenden, die sich an Bildschirme unterschiedlicher Größe anpassen können oder sollten?”
  2. “Wie kann ich Informationen über die Größe des Bildschirms erhalten und wie kann ich sie beim Schreiben von UI-Code verwenden?”

Wir werden die erste Frage später beantworten. Lassen Sie uns zunächst über Letzteres sprechen, da es sehr einfach zu handhaben ist und im Mittelpunkt des Problems steht. Es gibt zwei Möglichkeiten, dies zu tun:

  1. Eine Möglichkeit ist , die Informationen von den zu übernehmen MediaQueryDatavon der MediaQueryWurzel InheritedWidget, die im Widget – Baum , um eine Flutter App Arbeit (es ist Teil vorhanden sein muss MaterialApp/WidgetsApp/CupertinoApp), die man bekommen kann, wie jede andere InheritedWidget, mit MediaQuery.of(context), unt sizeEigenschaft, die vom Typ Sizeist und daher zwei widthund heightEigenschaften des Typs hat double.
  2. Der andere Weg ist eine zu verwenden LayoutBuilder, die ein Builder – Widget ist (wie bei einer StreamBuilderoder a FutureBuilder), die an die Pässe builderFunktion (mit dem context) einem BoxConstraintsObjekt , das aufweist minHeight, maxHeight, minWidthund maxWidthEigenschaften.

Hier ist ein Beispiel für ein DartPad, mit dem MediaQueryEinschränkungen abgerufen werden. Der folgende Code lautet:

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(context) =>

    MaterialApp(

      home: MyHomePage()

    );

}

class MyHomePage extends StatelessWidget {

  @override

  Widget build(context) =>

    Scaffold(

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.spaceEvenly,

          children: [

            Text(

              “Width: ${MediaQuery.of(context).size.width}”,

              style: Theme.of(context).textTheme.headline4

            ),

            Text(

              “Height: ${MediaQuery.of(context).size.height}”,

              style: Theme.of(context).textTheme.headline4

            )

          ]

       )

     )

   );

}

Kopieren

Und hier ist einer, der dasLayoutBuilder für dasselbe verwendet:

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(context) =>

    MaterialApp(

      home: MyHomePage()

    );

}

class MyHomePage extends StatelessWidget {

  @override

  Widget build(context) =>

    Scaffold(

      body: LayoutBuilder(

        builder: (context, constraints) => Center(

          child: Column(

            mainAxisAlignment: MainAxisAlignment.spaceEvenly,

            children: [

              Text(

                “Width: ${constraints.maxWidth}”,

                style: Theme.of(context).textTheme.headline4

              ),

              Text(

                “Height: ${constraints.maxHeight}”,

                style: Theme.of(context).textTheme.headline4

              )

            ]

         )

       )

     )

  );

}

Kopieren

Lassen Sie uns nun darüber nachdenken, welche Widgets sich an die Einschränkungen anpassen können.

Lassen Sie uns zunächst über die verschiedenen Möglichkeiten nachdenken, mehrere Widgets je nach Bildschirmgröße anzuordnen.

Das Widget, das sich am einfachsten anpassen lässt, ist das GridView. Tatsächlich muss für eine GridViewmit dem GridView.extentKonstruktor erstellte Version nicht einmal Ihre Beteiligung reagiert werden, wie Sie in diesem sehr einfachen Beispiel sehen können :

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(context) =>

    MaterialApp(

      home: MyHomePage()

    );

}

class MyHomePage extends StatelessWidget {

  final List elements = [

    “Zero”,

    “One”,

    “Two”,

    “Three”,

    “Four”,

    “Five”,

    “Six”,

    “Seven”,

    “Eight”,

    “A Million Billion Trillion”,

    “A much, much longer text that will still fit”

  ];

  @override

  Widget build(context) =>

    Scaffold(

      body: GridView.extent(

        maxCrossAxisExtent: 130.0,

        crossAxisSpacing: 20.0,

        mainAxisSpacing: 20.0,

        children: elements.map((el) => Card(child: Center(child: Padding(padding: EdgeInsets.all(8.0), child: Text(el))))).toList()

      )

   );

}

Kopieren

Sie können Inhalte unterschiedlicher Größe aufnehmen, indem Sie die ändern maxCrossAxisExtent.

Dieses Beispiel diente hauptsächlich dem Zweck, die Existenz des GridView.extent GridViewKonstruktors zu zeigen. Eine viel intelligentere Methode wäre jedoch die Verwendung von a GridView.buildermit a SliverGridDelegateWithMaxCrossAxisExtent. In diesem Fall werden die im Raster anzuzeigenden Widgets dynamisch aus einer anderen Datenstruktur erstellt. Wie Sie in diesem Beispiel sehen können :

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(context) =>

    MaterialApp(

      home: MyHomePage()

    );

}

class MyHomePage extends StatelessWidget {

  final List<String> elements = [“Zero”, “One”, “Two”, “Three”, “Four”, “Five”, “Six”, “Seven”, “Eight”, “A Million Billion Trillion”, “A much, much longer text that will still fit”];

  @override

  Widget build(context) =>

    Scaffold(

      body: GridView.builder(

        itemCount: elements.length,

        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(

          maxCrossAxisExtent: 130.0,

          crossAxisSpacing: 20.0,

          mainAxisSpacing: 20.0,

        ),

        itemBuilder: (context, i) => Card(

          child: Center(

            child: Padding(

              padding: EdgeInsets.all(8.0), child: Text(elements[i])

            )

          )

        )

      )

   );

}

Kopieren

Ein Beispiel für die Anpassung von GridView an verschiedene Bildschirme ist meine persönliche Zielseite , bei der es sich um eine sehr einfache Flutter-Web-App handelt, die aus GridVieweiner Reihe von CardsCodes besteht, genau wie der vorherige Beispielcode, nur dass diese Cardsetwas komplexer und größer sind.

Eine sehr einfache Änderung, die an Apps für Telefone vorgenommen werden könnte, besteht darin, a Drawerdurch ein permanentes Menü auf der linken Seite zu ersetzen, wenn Platz vorhanden ist.

Zum Beispiel könnten wir ein ListViewWidget haben, wie das folgende, das für die Navigation verwendet wird:

class Menu extends StatelessWidget {

  @override

  Widget build(context) => ListView(

    children: [

      FlatButton(

        onPressed: () {},

          child: ListTile(

          leading: Icon(Icons.looks_one),

          title: Text(“First

Auf einem Smartphone befindet sich ein üblicher Verwendungsort in einem Drawer(auch als Hamburger-Menü bezeichnet).

Alternativen dazu wären das BottomNavigationBaroder das TabBarin Kombination mit dem TabBarView, aber bei beiden müssten wir mehr Änderungen vornehmen, als für die Schublade erforderlich sind, also bleiben wir bei der Schublade.

Um nur das zu zeigen Drawer, Menuwas wir zuvor auf kleineren Bildschirmen gesehen haben, würden Sie Code schreiben, der wie das folgende Snippet aussieht, die Breite mit dem überprüfen MediaQuery.of(context)und ein DrawerObjekt Scaffoldnur dann an das übergeben