started work on schema-demo

src/dashboard/lib/constants/schema_demo_constants.dart

+class SchemaDemoConstants {
+  static final String post = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
+}

src/dashboard/lib/ui/schema/index.dart

+import 'package:dashboard/ui/schema/page1/index.dart';
+import 'package:dashboard/ui/schema/page2/index.dart';
+import 'package:flutter/material.dart';
+
+enum Phase { WRITE, DETAILS }
+
+class SchemaDemo extends StatefulWidget {
+  @override
+  _SchemaDemoState createState() => _SchemaDemoState();
+
+  final Phase phase;
+
+  SchemaDemo({this.phase = Phase.WRITE});
+}
+
+class _SchemaDemoState extends State<SchemaDemo> {
+  Phase _phase = Phase.WRITE;
+
+  @override
+  void initState() {
+    _phase = widget.phase;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    switch (_phase) {
+      case Phase.WRITE:
+        return SchemaDemoPage1();
+
+      case Phase.DETAILS:
+        return SchemaDemoPage2();
+
+      default:
+        return Text("Unknown Phase $_phase");
+    }
+  }
+}

src/dashboard/lib/ui/schema/page1/index.dart

+import 'package:dashboard/ui/schema/index.dart';
+import 'package:dashboard/ui/schema/util/post_written.dart';
+import 'package:dashboard/ui/theme/color_holder.dart';
+import 'package:flutter/material.dart';
+
+class SchemaDemoPage1 extends StatefulWidget {
+  @override
+  _SchemaDemoPage1State createState() => _SchemaDemoPage1State();
+}
+
+class _SchemaDemoPage1State extends State<SchemaDemoPage1> {
+  void _next() {
+    Navigator.of(context).push(
+      MaterialPageRoute(
+        builder: (context) => SchemaDemo(
+          phase: Phase.DETAILS,
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: ColorHolder.color2,
+      body: Center(
+        child: WrittenPost(_next),
+      ),
+    );
+  }
+}

src/dashboard/lib/ui/schema/page2/index.dart

+import 'package:dashboard/constants/schema_demo_constants.dart';
+import 'package:dashboard/ui/schema/util/post_written.dart';
+import 'package:dashboard/ui/theme/color_holder.dart';
+import 'package:flutter/material.dart';
+
+class SchemaDemoPage2 extends StatefulWidget {
+  @override
+  _SchemaDemoPage2State createState() => _SchemaDemoPage2State();
+}
+
+class _SchemaDemoPage2State extends State<SchemaDemoPage2> {
+  void _previous() {
+    Navigator.of(context).pop();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: ColorHolder.color2,
+      body: Center(
+        child: Row(
+          children: [
+            SizedBox(width: 16),
+            FloatingActionButton(
+              onPressed: _previous,
+              child: Icon(Icons.arrow_back),
+              heroTag: "left-${DateTime.now()}",
+            ),
+            Expanded(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  WrittenPost(
+                    null,
+                    initialStatus: PostStatus.DONE,
+                  ),
+                ],
+              ),
+            ),
+            Icon(Icons.arrow_right),
+            Expanded(
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  SizedBox(
+                    width: 350,
+                    child: Card(
+                      child: Padding(
+                        padding: const EdgeInsets.all(8.0),
+                        child: DataTable(
+                          columnSpacing: 16,
+                          dataRowHeight: 48,
+                          headingTextStyle: TextStyle(
+                            fontWeight: FontWeight.bold,
+                            color: Colors.black,
+                            fontSize: 24,
+                          ),
+                          columns: [
+                            DataColumn(label: Text("Field")),
+                            DataColumn(label: Text("Value")),
+                          ],
+                          rows: [
+                            DataRow(cells: [
+                              DataCell(Text("Author")),
+                              DataCell(Text("u/SomeUserOnReddit")),
+                            ]),
+                            DataRow(cells: [
+                              DataCell(Text("Timestamp")),
+                              DataCell(
+                                  Text("${DateTime.now().toIso8601String()}")),
+                            ]),
+                            DataRow(cells: [
+                              DataCell(Text("Content")),
+                              DataCell(Text(SchemaDemoConstants.post)),
+                            ]),
+                            DataRow(cells: [
+                              DataCell(Text("Upvotes")),
+                              DataCell(Text("198")),
+                            ]),
+                            DataRow(cells: [
+                              DataCell(Text("Percentage Upvoted")),
+                              DataCell(Text("0.96")),
+                            ]),
+                            DataRow(cells: [
+                              DataCell(Text("Number of Comments")),
+                              DataCell(Text("0")),
+                            ]),
+                            DataRow(cells: [
+                              DataCell(Text("Subreddit")),
+                              DataCell(Text("r/Example")),
+                            ]),
+                            DataRow(cells: [
+                              DataCell(Text("Id")),
+                              DataCell(Text("a8bf26")),
+                            ]),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            FloatingActionButton(
+              onPressed: () {},
+              child: Icon(Icons.arrow_forward),
+              heroTag: "right-${DateTime.now()}",
+            ),
+            SizedBox(width: 16),
+          ],
+        ),
+      ),
+    );
+  }
+}

src/dashboard/lib/ui/schema/util/post_written.dart

+import 'package:animated_text_kit/animated_text_kit.dart';
+import 'package:dashboard/constants/schema_demo_constants.dart';
+import 'package:flutter/material.dart';
+
+enum PostStatus { WRITING, SENDING, DONE }
+
+class WrittenPost extends StatefulWidget {
+  @override
+  _WrittenPostState createState() => _WrittenPostState();
+
+  final TextStyle style = TextStyle(
+    color: Colors.black,
+    fontSize: 16,
+    fontWeight: FontWeight.normal,
+  );
+
+  final Function onDone;
+  final PostStatus initialStatus;
+  final Duration pauseBetweenCharacters = Duration(milliseconds: 10);
+
+  WrittenPost(this.onDone, {this.initialStatus = PostStatus.WRITING});
+}
+
+class _WrittenPostState extends State<WrittenPost> {
+  PostStatus _status;
+
+  void initState() {
+    _status = widget.initialStatus;
+    super.initState();
+  }
+
+  void _onWritingDone() {
+    setState(() {
+      _status = PostStatus.SENDING;
+    });
+
+    Future.delayed(Duration(milliseconds: 500))
+        .then((value) => _onSendingDone());
+  }
+
+  void _onSendingDone() {
+    setState(() {
+      _status = PostStatus.DONE;
+    });
+
+    if (widget.onDone != null) widget.onDone();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Hero(
+      tag: "post_written",
+      child: SizedBox(
+        height: 270,
+        width: 400,
+        child: Card(
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Text(
+                  "New Post",
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 22,
+                  ),
+                ),
+                Divider(),
+                Expanded(
+                  child: _status == PostStatus.WRITING
+                      ? TypewriterAnimatedTextKit(
+                          speed: widget.pauseBetweenCharacters,
+                          totalRepeatCount: 1,
+                          text: [SchemaDemoConstants.post],
+                          pause: Duration(milliseconds: 200),
+                          textStyle: widget.style,
+                          repeatForever: false,
+                          onFinished: _onWritingDone,
+                          textAlign: TextAlign.left,
+                        )
+                      : Text(
+                          SchemaDemoConstants.post,
+                          style: widget.style,
+                        ),
+                ),
+                Divider(),
+                _SendButton(_status),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _SendButton extends StatelessWidget {
+  final PostStatus status;
+
+  _SendButton(this.status);
+
+  Widget _icon() {
+    switch (status) {
+      case PostStatus.WRITING:
+        return Icon(
+          Icons.edit,
+          color: Colors.white,
+        );
+      case PostStatus.SENDING:
+        return SizedBox(
+          width: 20,
+          height: 20,
+          child: CircularProgressIndicator(
+            valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
+          ),
+        );
+      case PostStatus.DONE:
+      default:
+        return Icon(
+          Icons.check,
+          color: Colors.white,
+        );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton.icon(
+      onPressed: () {},
+      icon: Padding(
+        padding: EdgeInsets.all(4),
+        child: _icon(),
+      ),
+      style: TextButton.styleFrom(
+        backgroundColor: status == PostStatus.WRITING
+            ? Theme.of(context).primaryColor
+            : Colors.grey,
+      ),
+      label: Padding(
+        padding: EdgeInsets.only(top: 4, bottom: 4, right: 4),
+        child: Text(
+          "Submit",
+          style: TextStyle(
+            color: Colors.white,
+          ),
+        ),
+      ),
+    );
+  }
+}

src/dashboard/pubspec.lock

 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  animated_text_kit:
+    dependency: "direct main"
+    description:
+      name: animated_text_kit
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.2"
   apex_flutter_sdk:
     dependency: "direct main"
     description:

src/dashboard/pubspec.yaml

@@ -21,6 +21,7 @@ dependencies:
   localstorage: ^3.0.6
   flutter_spinkit: ^5.0.0
   intl: ^0.17.0
+  animated_text_kit: ^3.1.2
 
 dev_dependencies:
   flutter_test: