FWE pt 1

src/content/tutorial/index.md

@@ -0,0 +1,56 @@
+---
+title: Learn Flutter
+description: Resources to help you learn Flutter.
+toc: false
+---
+
+## Welcome! 
+
+Welcome to the Flutter tutorial! This tutorial teaches you how to build 
+applications from scratch that run on mobile, desktop, and web.
+
+You’ll start from the very beginning: creating a blank Flutter application. 
+By the end, you’ll have built a handful of small apps that demonstrate 
+the critical features of Flutter development (and more!)
+
+{%- comment %}
+TODO(ewindmill) welcome video
+{%- endcomment %}
+
+## What is Flutter?
+
+Flutter is an open-source UI toolkit that helps you build native compiled, 
+expressive apps across mobile, web, and desktop from a single codebase. 
+It’s declarative, reactive, features hot reload for fast development cycles, 
+and has a rich set of customizable widgets for creating expressive interfaces.
+
+Flutter draws every pixel itself rather than wrapping native components, 
+giving developers complete control over the UI and ensuring visual consistency 
+across platforms.
+
+## How to use this tutorial
+
+You should be familiar with the Dart programming language to follow this
+tutorial. This tutorial assumes you have all the knowledge from its Dart
+counterpart, the [Learn Dart tutorial][]. (Alternatively, if you’re comfortable
+with another all-purpose object oriented language, like Java or Kotlin, you’ll
+likely be okay.)
+
+## Set up
+
+While reading this tutorial, you’ll ideally be coding along with the examples presented. 
+You can do so by [installing Flutter on your machine][], 
+or by using [Firebase Studio][], a web IDE that supports Flutter.
+
+If you’re running locally, this tutorial assumes that you’re running Flutter
+apps on the web, using [Chrome][]. This doesn’t require Xcode or Android Studio, 
+and thus is the quickest way to start using Flutter.  
+If you prefer to run Flutter apps on Android, 
+iOS, MacOS, or any other supported platform, you’ll have no problem following the tutorial. 
+But some features, like resizing a window to see how UI renders 
+on different screen sizes, aren’t available on mobile simulators.
+
+[Learn Dart tutorial]: https://dart.dev/
+[installing Flutter on your machine]: /get-started/install
+[Firebase Studio]: https://firebase.studio/
+[Chrome]: https://www.google.com/chrome/

src/content/tutorial/ui/1-create-an-app.md

@@ -0,0 +1,131 @@
+---
+title: Create an app
+description: Instructions on how to create a new Flutter app.
+permalink: /tutorial/create-an-app/
+---
+
+{%- comment %}
+<!-- TODO(ewindmill) embed video -->
+{%- endcomment %}
+
+In this first section of the Flutter tutorial, you’ll build the core UI of an
+app called ‘Birdle’, a game similar to [Wordle, the popular New York Times
+game][].
+
+By the end of this tutorial, you’ll have learned the fundamentals of building
+Flutter UIs, and your app will look like the following screenshot (and it’ll
+even mostly work 😀).
+
+{%- comment %}
+<!-- TODO(ewindmill) screenshot -->
+{%- endcomment %}
+
+## Create a new Flutter project
+
+The first step to building Flutter apps is to create a new project. You create
+new apps with the [Flutter CLI tool][], installed as part of the Flutter SDK. 
+
+Open your terminal or command prompt and run the following command to create a
+new Flutter project:
+
+```shell
+$ flutter create birdle --empty
+```
+
+This creates a new Flutter project using the minimal “empty” template.
+
+## Examine the code
+
+In your IDE, open the file at `lib/main.dart`. Starting from the top, you’ll see
+this code.
+
+```dart
+import 'package:flutter/material.dart'; // imports Flutter
+
+void main() {
+  runApp(const MainApp());
+}
+// ...
+```
+
+The `main` function is the entry point to any Dart program, and a Flutter app is
+just a **Dart** program. The `runApp` method is part of the Flutter SDK, and it
+takes a **widget** as an argument. (Most of this tutorial is about widgets, but
+in the simplest terms a widget is a Dart object that describes a piece of UI.)
+In this case, an instance of the `MainApp` widget is being passed in. 
+
+Just below the `main` function, you’ll find the `MainApp` class declaration.
+
+```dart
+class MainApp extends StatelessWidget {
+  const MainApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const MaterialApp(
+      home: Scaffold(
+        body: Center(
+          child: Text('Hello World!'),
+        ),
+      ),
+    );
+  }
+}
+
+```
+
+`MainApp` is the **root widget**, as it’s the widget that’s passed into
+`runApp`. Within this widget, there’s a `build` method, which returns another
+widget called `MaterialApp`.  Essentially, this is what a Flutter app is: a
+composition of Widgets that make up a tree structure called the **widget tree.**
+Your job as a Flutter developer is to compose widgets from the SDK into larger,
+custom widgets that display a UI.
+
+At the moment, the widget tree is quite simple:
+
+{%- comment %}
+<!-- TODO(ewindmill) widget tree diagram -->
+{%- endcomment %}
+
+## Run your app
+
+In your terminal at the root of your Flutter app, run:
+
+```shell
+$ flutter run -d chrome
+```
+
+The app will build and launch in a new instance of chrome. 
+
+{%- comment %}
+<!-- TODO(ewindmill) screenshot of app at start -->
+{%- endcomment %}
+
+
+## Hot reload
+
+**Stateful hot reload**, if you haven't heard of it, allows a running Flutter
+app to re-render updated business logic or UI code in less than a second - all
+without losing your place in the app. This is the part that hooks most Flutter
+developers.
+
+In your IDE, open the `main.dart` file and navigate to line \~15 and find this
+code:
+
+```dart
+child: Text('Hello World!'),
+```
+
+Change the text inside the string to anything you want. Then, hot-reload your
+app by pressing `r` in your terminal where the app is running. The running app
+should instantly show your updated text.
+
+This is only part of the power of hot reload, because the app doesn’t currently
+have ephemeral state. If the app did have state that could change, you’d see
+that you can update the code and the app will maintain its state, making
+development cycles lightning fast. Soon, you’ll add ephemeral state and see just
+that.
+
+[Flutter CLI tool]: /reference/flutter-cli
+[Wordle, the popular New York Times game]:
+    https://www.nytimes.com/games/wordle/index.html