Skip to content

Commit

Permalink
First draft of the FWE index page (flutter#10282)
Browse files Browse the repository at this point in the history
Since we'd like to see this page staged, I made sure that there weren't
any broken links. Files that aren't yet present just link back to this
index page.

New page staged here:
https://flutter-docs-prod--pr10282-fwe-index-d041ol16.web.app/get-started/fwe
  • Loading branch information
sfshaza2 authored and atsansone committed Apr 5, 2024
1 parent 1710642 commit c3314bc
Show file tree
Hide file tree
Showing 6 changed files with 456 additions and 217 deletions.
70 changes: 48 additions & 22 deletions src/get-started/fwe/fundamentals.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,30 @@ next:
permalink: /get-started/fwe/layout
---

Welcome to Flutter! On this page, there are a few videos, articles, and a short
tutorial that introduce many of the foundational concepts used by
On this page, there are a few videos,
articles, and a short tutorial that introduce many
of the foundational concepts used by
Flutter developers on a daily basis.

## Welcome to Flutter

The following tutorial is a gentle introduction in building UIs with Flutter. It
starts with a 'hello world' app, and walks you through building a simple
shopping list application. If you're exploring Flutter for the first time, it's
The following tutorial is a gentle introduction
in building UIs with Flutter.
It starts with a 'hello world' app,
and walks you through building a simple
shopping list application.
If you're exploring Flutter for the first time, it's
the perfect place to begin.

<i class="material-symbols" aria-hidden="true">flutter_dash</i>
Tutorial: [Building user interfaces with Flutter][]

## Dart

Flutter applications are built in [Dart][], a language that will look familiar
to anyone who's written Java, Javascript, or any other C-like language. The first
Flutter applications are built in [Dart][],
a language that will look familiar
to anyone who's written Java, Javascript,
or any other C-like language. The first
resource listed here is a tutorial about writing Dart code.

{{site.alert.note}}
Expand All @@ -46,24 +52,33 @@ The other link has more resources for learning Dart.

## Anatomy of a widget

In regard to Flutter, you'll often hear "everything is a widget". This isn't
exactly true, but it is safe to say that "_almost_ everything is a widget".
Widgets are the UI building blocks that are combined to create a fully
In regard to Flutter, you'll often hear
"everything is a widget". This isn't
exactly true, but it is safe to say that
"_almost_ everything is a widget".
Widgets are the UI building blocks that
are combined to create a fully
functional application.

In the first tutorial, [Building user interfaces with Flutter][], you saw some
built-in widgets, and created some custom widgets. The following videos expand
on what you learned by explaining in detail the two types of widgets that you
use the most in Flutter: stateless widgets and stateful widgets.
In the first tutorial,
[Building user interfaces with Flutter][],
you saw some built-in widgets,
and created some custom widgets.
The following videos expand
on what you learned by explaining in detail
the two types of widgets that you use the
most in Flutter: stateless widgets and stateful widgets.

* [Flutter widgets 101 episode 1: Stateless widgets][]
* [Flutter widgets 101 episode 2: Stateful widgets][]

## Important widgets to know

The Flutter SDK includes many built-in widgets, from the smallest pieces of UI,
like `Text`, to layout widgets, and widgets that style your application. The
following widgets are the most important to be aware of as you move onto the
The Flutter SDK includes many built-in widgets,
from the smallest pieces of UI, like `Text`,
to layout widgets, and widgets that style
your application. The following widgets are
the most important to be aware of as you move onto the
next lesson in the learning pathway.

* [`Container`][]
Expand All @@ -77,11 +92,14 @@ next lesson in the learning pathway.

## Next: Layouts

This page is an introduction to foundational Flutter concepts, like
widgets, and helps you become familiar with reading Flutter and Dart code. It's
okay if you don't feel clear on every topic you encountered, as every page after
this is a deep-dive on specific topics. In the next section, you'll start
building more interesting UIs by creating more complex layouts in Flutter.
This page is an introduction to foundational
Flutter concepts, like widgets,
and helps you become familiar with reading
Flutter and Dart code. It's okay if you don't
feel clear on every topic you encountered, as every page after
this is a deep-dive on specific topics.
In the next section, you'll start building more
interesting UIs by creating more complex layouts in Flutter.

[Building user interfaces with Flutter]:{{site.url}}/ui
[Bootstrap into Dart]: {{site.url}}/resources/bootstrap-into-dart
Expand All @@ -100,3 +118,11 @@ building more interesting UIs by creating more complex layouts in Flutter.
[`Row`]: {{site.api}}/flutter/widgets/Row-class.html
[`Scaffold`]: {{site.api}}/flutter/material/Scaffold-class.html
[`Text`]: {{site.api}}/flutter/widgets/Text-class.html

## Feedback

As this section of the website is evolving,
we [welcome your feedback][]!

[welcome your feedback]: {{site.url}}/get-started/fwe

84 changes: 84 additions & 0 deletions src/get-started/fwe/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
---
title: First week experience of Flutter
description: >
You've gotten a taste of using the Flutter framework;
now go beyond to learn the basics of Flutter.
---

## Welcome to the next level of Flutter!

If you are new to Flutter, and have already worked
through [your first Flutter codelab][],
this section of the website is for you!

The goal here is to guide you through some next
steps of learning Flutter. It's not about teaching
you how to _program_, it's about teaching you
how Flutter works.

{{site.alert.note}}
This first week experience is still a work
in progress and we welcome your feedback!
Please consider filling out the survey
listed at the bottom of this page and on the
new subject pages in this section.
{{site.alert.end}}

As you might know, Flutter uses the [Dart language][].
If you have experience with other object-oriented
languages, like Java, C++, or Swift,
Dart should feel familiar to you.
As of this writing,
[Dart is one of the fastest growing languages][dart-lang],
in part, thanks to Flutter.

[Dart language]: {{site.dart-site}}
[dart-lang]: https://twitter.com/MiSvTh/status/1732002450641400276?cxt
[your first Flutter codelab]: {{site.codelabs}}/codelabs/flutter-codelab-first

We suggest that you work through the
following subjects in the listed order.

1. [Widget fundamentals][]
: Learn about one of the primary building blocks
of a Flutter application, `Widgets`.
2. [Layout][]
: Flutter is different from other UI frameworks
in that you create the layout programmatically.
This allows you to compose widgets,
Flutter's basic building blocks,
to realize your own layout vision.
It also facilitates designing a UI to
optimize any screen where your app might be used.
3. [State management][]
: Learn how to manage state. xxx
4. [Handling user input][]
: Learn about Flutter's widgets that support
interactivity, like buttons and text.
Also, learn how to add interactivity to
a widget that doesn't already support it.
5. [Networking and data][]
: Networking is a very large topic,
so this section focuses on basic networking
functionality, such as how to retrieve
or submit data using HTTP,
how to convert to and from JSON,
how to use authentication,
how to implement asynchronicity, and more.
6. [Local data and caching][]
: Learn about different techniques for caching
local data.

[Widget fundamentals]: {{site.url}}/get-started/fwe/fundamentals
[Layout]: {{site.url}}/get-started/fwe/layout
[State management]: {{site.url}}/get-started/fwe
[Handling user input]: {{site.url}}/get-started/fwe/user-input
[Networking and data]: {{site.url}}/networking
[Local data and caching]: {{site.url}}/get-started/fwe/local-caching

## Feedback

As this section of the website is evolving,
we [welcome your feedback][]!

[welcome your feedback]: {{site.url}}/get-started/fwe
Loading

0 comments on commit c3314bc

Please sign in to comment.