Dart und das Web - Bootstrap integrieren

 

Dart und das Web
In diesem Blog habe ich Artikel über Bootstrap (1,2,3,4) und die Erstellung eines Templates für ein kleines Webprojekt mit Dart (1) online gestellt.  In diesem Post werden wir als ersten Schritt unser Dart Web Template um die Möglichkeiten von Bootstrap ergänzen !

Wenn Sie die Homepage von Bootstrap 5 besuchen, findet sich dort ein Template für den unkomplizierten Einsatz von Bootstrap.

Wenn Sie das Template betrachten fällt auf, das vor allem zwei Links, die Verbindung zwischen index.html und Bootstrap herstellen. Zur Erinnerung hier noch einmal die index.html Datei unseres Dart Web Templates: 

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/dart-lang/stagehand">
    <title>dartweb1</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script defer src="main.dart.js"></script>
</head>

<body>

  <div id="output"></div>

</body>
</html>

Dieses Template ergänzen wir nun um diese zwei Links von Bootstrap 5. Erwarten Sie dabei keine visuellen Änderungen, wenn Sie den Code in Visual Studio Code ausführen lassen. Wichtig ist aber, das Bootstrap uns nun zur Verfügung steht. Hier der abgeänderte Code:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/dart-lang/stagehand">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <title>dartweb1</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script defer src="main.dart.js"></script>
</head>

<body>

  <div id="output"></div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>

Um aber zu testen, ob es wirklich funktioniert, ergänzen wir unsere index.html Datei um eine kleine Navigation:


<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/dart-lang/stagehand">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <title>dartweb1</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script defer src="main.dart.js"></script>
</head>

<body>

  <div id="output"></div>
 
  <div class="container-md">
  <nav>
    <ul class="nav">
      <li class="nav-item"><a class="nav-link" href="#link_1.html">Bootstrap 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#link_2.html">Bootstrap 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#link_3.html">Bootstrap 3</a></li>
    </ul>
  </nav>
</div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>

Das Ergebnis auf dem Bildschirm zeigt: Es funktioniert: ! Bis bald !

Dart fürs Web inkl. Bootstrap


Standort: Zürich, Schweiz

Kommentare

  1. clearmind21. Oktober 2021 um 18:55

    Welche main.dart.js benutzen Sie - auf Github fand ich in projekten Größen vom 68KB bis 1,09MB ?

    AntwortenLöschen
  2. clearmind21. Oktober 2021 um 18:56

    Welche version von main.dart.js nutzen Sie . Ich fand auf Github Größen von 68 K bis 1.09MB - ist das projektabhängig ?

    AntwortenLöschen
    Antworten
    1. fluttercode30. Oktober 2021 um 10:43

      Hallo, da die Grösse von main.dart.js von dem main.dart file abhängt dürfte die kleinste Grösse beim automatischen erstellen eines Projekt Templates entstehen. Mir ist keine Grenze nach oben bekannt. Das main.dart File programmieren Sie individuell, so wie Sie es für Ihr Projekt benötigen.

      Löschen
  3. clearmind21. Oktober 2021 um 18:56

    Welche main.dart.js benutzen Sie - auf Github fand ich in projekten Größen vom 68KB bis 1,09MB ?

    AntwortenLöschen

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Dart Basic: Parameter in Funktionen

Bild
Im letzten Artikel zu Dart haben wir uns ja mit, abstrakten Klassen beschäftigt. Ein zugegebener Massen abstraktes Thema (dieser flache Scherz musste jetzt sein) . In diesem Artikel geht es um Parameter, also Übergabewerte. Nicht wenige Funktionen verrichten ihre Arbeit nur, wenn wir Ihnen einen, oder mehrere Werte beim Aufruf übergeben. Dabei kann jede Funktion zwei Arten von Parametern übernehmen: benötige(Pflicht) Werte und optionale . Beispiel: Funktion mit Parametern In diesem sehr einfach Beispielcode wird eine Funktion benutzt, die zwei Zeichenketten als Übergabewerte erwartet. Sollten wir diese Funktion ohne, oder mit nur einem Parameter aufrufen, oder sollten die Übergabewerte den falschen Typ haben, wird uns der Compiler einen Fehler melden . Im Beispiel haben wir also zwei Pflichtwerte zu übergeben. Das Beispiel können wir jetzt um optionale Parameter erweitern. Optionale Parameter gibt es in zwei Varianten : solche die wir durch ihre Position definier...
Mehr anzeigen

Dart Basic: Strings Part 1

Bild
Dart Die Manipulation von Zeichenketten ist eine wiederkehrende Aufgabe in der Programmierung. Natürlich hat auch Dart diverse Möglichkeiten mit Zeichenketten umzugehen. Dieser Serie wird auf einige eingehen. Basis Alles in Dart ist letztendlich ein Objekt. Auch der Datentyp String ist ein Objekt, beziehungsweise, die entsprechenden Variablen die wir erstellen. In der dart:core Library ist die String Klasse implementiert. Die Dokumentation dazu ist, wie bei Dart üblich, hervorragend. Ich kann nur empfehlen, sich eingehend damit zu beschäftigen. Zum testen kann man das DartPad verwenden. Es ist ideal für kleine Programme und erste Schritte in Dart. Eine Zeichenkette einer Variablen zuweisen Einfache Zuweisung von Strings Links sehen wir zwei einfache Zuweisungen. Einmal an die Variable test , diese ist vom Typ String . Das andere Mal an test1 , diese wiederum ist vom Typ var . Beides ist legitim, obwohl ein kleiner Unterschied besteht. Während String test ...
Mehr anzeigen

Flutter BloC Pattern 1

Bild
Las Vegas Bei grösseren Projekten stellt sich die Frage, wie man das State - Management lösen möchte.  Wer schon seine ersten Schritte mit Flutter gemacht hat, weiß, das es Widgets ohne State gibt und solche mit. Ein Umgang mit diesen Stateful Widgets, wird schnell zur zentralen Frage bei der Softwareentwicklung mit Flutter. Basis BloC Es gibt verschiedene Konzepte um mit dem State umzugehen, diese stehen nicht in Konkurrenz. Es ist an dem Entwickler, sich für ein Konzept zu entscheiden, je nach den erwarteten Erfordernissen der geplanten Software. BloC steht für B usiness Lo gic Co mponent und ermöglicht das Handling der State's. Es wird gerne als Pattern bezeichnet, also als Muster, mit welchem wir den Umgang mit einem State konzipieren. Die hinter BloC ist die Trennung der Präsentation (UI / StatelessWidgets) von der Logic (StatefulWidgets). Das heißt der Button, den wir in der App drücken, muss nichts darüber wissen, was nach dem drücken passiert. In einem Fall wi...
Mehr anzeigen