Dauer: 1

Was lernst du

• Nützliche Resourcen
• Software installieren
• Einstiegsseite einrichten
• Ein Codelab erstellen
• Codelab-Kategorie anpassen
  
• other stuff

Wir ersetzen die main.dart durch diesen Inhalt. Wir rufen hier innerhalb einer Material-App unsere Demo-Klasse auf.

import 'package:flutter/material.dart';

import 'demo.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedPageviewDemo(),
    );
  }
}

Das AnimatedSliderDemo-Widget ist ein StatefulWidget.

Den Slider, um den wir im nächsten Schritt kümmern, geben wir hier drei Widgets für die darzustellenden Seiten mit. Es sind einfache Container mit verschiedenfarbigen Hintergründen.

    AnimatedPageView(
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  color: Colors.green
                ),
              ),
              Container(
                decoration: BoxDecoration(
                    color: Colors.blue
                ),
              ),
              Container(
                decoration: BoxDecoration(
                    color: Colors.red
                ),
              ),
            ],
          ),

Nun zum eigentlichen Pageview: Hier wollen wir in einem ersten Schritt nur die einfache Swipe Funktionalität implementieren. Dies wäre zwar mit dem PageView-Widget einfacher, aber um später die Pfadanimation hinzufügen zu können, gehen wir dieses Weg.

Das Widget ist ein StatefulWidget. In der build-Methode

Ein Codelab erstellen

• Unter dem Ordner site folgende Ordnerstruktur erstellen: codelabs/assets
• Markdown-File erstellen, z.B. sample.md
• Inhalte einfügen
• File mit Hilfe von claat exportieren: claat export sample.md Nun wurde automatisch ein Ordner dem Namen des codelabs erzeugt
• Zum Anzeigen des erzeugten Codelabs: gulp serve --codelabs-dir=codelabs oder claat serve

Codelab-Kategorie anpassen

Dazu wird das File /site/app/styles/_categories.scss. angepasst, z.B. so:

@include codelab-card(['sample'], #FC0023, 'sample.svg');

Das Icon wird in den Ordner /site/app/images/icons gespeichert

Codelab deployen

Die Codelabs können als statische Seite zum Beispiel in Firebase deployed werden

• firebase deploy

Und das war's.