diff --git a/src/_assets/css/_base.scss b/src/_assets/css/_base.scss
index e9cc47c7ac..f232a26902 100644
--- a/src/_assets/css/_base.scss
+++ b/src/_assets/css/_base.scss
@@ -107,14 +107,12 @@ dd {
.site-figure-container {
flex: 0 1 auto;
- img {
- width: 100%;
- }
+ img { width: 100%; }
figcaption {
- margin-top: bs-spacer(4);
- text-align: center;
- }
+ margin-top: bs-spacer(4);
+ text-align: center;
+ }
}
}
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/api_calls_android.gif b/src/_assets/image/get-started/android/react-native/api-calls.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/api_calls_android.gif
rename to src/_assets/image/get-started/android/react-native/api-calls.gif
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/basic_layout_android.gif b/src/_assets/image/get-started/android/react-native/basic-layout.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/basic_layout_android.gif
rename to src/_assets/image/get-started/android/react-native/basic-layout.gif
diff --git a/src/_assets/image/get-started/android/react-native/canvas.png b/src/_assets/image/get-started/android/react-native/canvas.png
new file mode 100644
index 0000000000..9fc5e4dcd3
Binary files /dev/null and b/src/_assets/image/get-started/android/react-native/canvas.png differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/card_swipe_android.gif b/src/_assets/image/get-started/android/react-native/card-swipe.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/card_swipe_android.gif
rename to src/_assets/image/get-started/android/react-native/card-swipe.gif
diff --git a/src/_assets/image/get-started/android/react-native/custom-cards.png b/src/_assets/image/get-started/android/react-native/custom-cards.png
new file mode 100644
index 0000000000..3e9c3fda5c
Binary files /dev/null and b/src/_assets/image/get-started/android/react-native/custom-cards.png differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/flatlist_android.gif b/src/_assets/image/get-started/android/react-native/flatlist.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/flatlist_android.gif
rename to src/_assets/image/get-started/android/react-native/flatlist.gif
diff --git a/src/_assets/image/get-started/android/react-native/flutter-fade.gif b/src/_assets/image/get-started/android/react-native/flutter-fade.gif
new file mode 100644
index 0000000000..ccef312f9d
Binary files /dev/null and b/src/_assets/image/get-started/android/react-native/flutter-fade.gif differ
diff --git a/src/_assets/image/get-started/android/react-native/flutter-gestures.gif b/src/_assets/image/get-started/android/react-native/flutter-gestures.gif
new file mode 100644
index 0000000000..d9697bc279
Binary files /dev/null and b/src/_assets/image/get-started/android/react-native/flutter-gestures.gif differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/flutterstyling_android.gif b/src/_assets/image/get-started/android/react-native/flutterstyling.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/flutterstyling_android.gif
rename to src/_assets/image/get-started/android/react-native/flutterstyling.gif
diff --git a/src/_assets/image/get-started/android/react-native/hello-world-basic.png b/src/_assets/image/get-started/android/react-native/hello-world-basic.png
new file mode 100644
index 0000000000..4ca3b63b23
Binary files /dev/null and b/src/_assets/image/get-started/android/react-native/hello-world-basic.png differ
diff --git a/src/_assets/image/get-started/android/react-native/hello-world.png b/src/_assets/image/get-started/android/react-native/hello-world.png
new file mode 100644
index 0000000000..b5940eb20c
Binary files /dev/null and b/src/_assets/image/get-started/android/react-native/hello-world.png differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/input_fields_android.gif b/src/_assets/image/get-started/android/react-native/input-fields.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/input_fields_android.gif
rename to src/_assets/image/get-started/android/react-native/input-fields.gif
diff --git a/src/_assets/image/get-started/android/react-native/modular.png b/src/_assets/image/get-started/android/react-native/modular.png
new file mode 100644
index 0000000000..3e9c3fda5c
Binary files /dev/null and b/src/_assets/image/get-started/android/react-native/modular.png differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/navigation_android.gif b/src/_assets/image/get-started/android/react-native/navigation.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/navigation_android.gif
rename to src/_assets/image/get-started/android/react-native/navigation.gif
diff --git a/src/_assets/image/get-started/android/react-native/stack.png b/src/_assets/image/get-started/android/react-native/stack.png
new file mode 100644
index 0000000000..f9f3ea9ae2
Binary files /dev/null and b/src/_assets/image/get-started/android/react-native/stack.png differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/state_change_android.gif b/src/_assets/image/get-started/android/react-native/state-change.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/state_change_android.gif
rename to src/_assets/image/get-started/android/react-native/state-change.gif
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/api_calls_iOS.gif b/src/_assets/image/get-started/ios/react-native/api-calls.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/api_calls_iOS.gif
rename to src/_assets/image/get-started/ios/react-native/api-calls.gif
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/basic_layout_iOS.gif b/src/_assets/image/get-started/ios/react-native/basic-layout.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/basic_layout_iOS.gif
rename to src/_assets/image/get-started/ios/react-native/basic-layout.gif
diff --git a/src/_assets/image/get-started/ios/react-native/canvas.png b/src/_assets/image/get-started/ios/react-native/canvas.png
new file mode 100644
index 0000000000..c805f3e8e0
Binary files /dev/null and b/src/_assets/image/get-started/ios/react-native/canvas.png differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/card_swipe_iOS.gif b/src/_assets/image/get-started/ios/react-native/card-swipe.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/card_swipe_iOS.gif
rename to src/_assets/image/get-started/ios/react-native/card-swipe.gif
diff --git a/src/_assets/image/get-started/ios/react-native/custom-cards.png b/src/_assets/image/get-started/ios/react-native/custom-cards.png
new file mode 100644
index 0000000000..1ae930bc1f
Binary files /dev/null and b/src/_assets/image/get-started/ios/react-native/custom-cards.png differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/flatlist_iOS.gif b/src/_assets/image/get-started/ios/react-native/flatlist.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/flatlist_iOS.gif
rename to src/_assets/image/get-started/ios/react-native/flatlist.gif
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/flutter_fade_iOS.gif b/src/_assets/image/get-started/ios/react-native/flutter-fade.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/flutter_fade_iOS.gif
rename to src/_assets/image/get-started/ios/react-native/flutter-fade.gif
diff --git a/src/_assets/image/get-started/ios/react-native/flutter-gestures.gif b/src/_assets/image/get-started/ios/react-native/flutter-gestures.gif
new file mode 100644
index 0000000000..f3b6f20fed
Binary files /dev/null and b/src/_assets/image/get-started/ios/react-native/flutter-gestures.gif differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/flutterstyling_iOS.gif b/src/_assets/image/get-started/ios/react-native/flutterstyling.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/flutterstyling_iOS.gif
rename to src/_assets/image/get-started/ios/react-native/flutterstyling.gif
diff --git a/src/_assets/image/get-started/ios/react-native/hello-world-basic.png b/src/_assets/image/get-started/ios/react-native/hello-world-basic.png
new file mode 100644
index 0000000000..3bdec15a34
Binary files /dev/null and b/src/_assets/image/get-started/ios/react-native/hello-world-basic.png differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/2e973d40d6e82114.png b/src/_assets/image/get-started/ios/react-native/hello-world.png
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/2e973d40d6e82114.png
rename to src/_assets/image/get-started/ios/react-native/hello-world.png
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/input_fields_iOS.gif b/src/_assets/image/get-started/ios/react-native/input-fields.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/input_fields_iOS.gif
rename to src/_assets/image/get-started/ios/react-native/input-fields.gif
diff --git a/src/_assets/image/get-started/ios/react-native/modular.png b/src/_assets/image/get-started/ios/react-native/modular.png
new file mode 100644
index 0000000000..1ae930bc1f
Binary files /dev/null and b/src/_assets/image/get-started/ios/react-native/modular.png differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/navigation_iOS.gif b/src/_assets/image/get-started/ios/react-native/navigation.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/navigation_iOS.gif
rename to src/_assets/image/get-started/ios/react-native/navigation.gif
diff --git a/src/_assets/image/get-started/ios/react-native/stack.png b/src/_assets/image/get-started/ios/react-native/stack.png
new file mode 100644
index 0000000000..4590c9f8bb
Binary files /dev/null and b/src/_assets/image/get-started/ios/react-native/stack.png differ
diff --git a/src/docs/get-started/flutter-for/react-native-devs/images/state_change_iOS.gif b/src/_assets/image/get-started/ios/react-native/state-change.gif
similarity index 100%
rename from src/docs/get-started/flutter-for/react-native-devs/images/state_change_iOS.gif
rename to src/_assets/image/get-started/ios/react-native/state-change.gif
diff --git a/src/docs/get-started/flutter-for/_android-ios-figure-pair.md b/src/docs/get-started/flutter-for/_android-ios-figure-pair.md
new file mode 100644
index 0000000000..518b576758
--- /dev/null
+++ b/src/docs/get-started/flutter-for/_android-ios-figure-pair.md
@@ -0,0 +1,26 @@
+{% comment %}
+TODO: Fernando, should we set all `figure-caption` to have centered text,
+ or locally use class="text-center"? I'd favor the former.
+ I've (chalin) temporarily used .text-center below.
+
+Sadly, Jekyll doesn't seem to supported nested includes, so the following won't work:
+
+ {% include app-figure.md image="{{include.image}}" platform="Android" %}
+ {% include app-figure.md image="{{include.image}}" platform="iOS" %}
+
+{% endcomment -%}
+
+|
|
+{% comment %}
+ FIXME: _android-ios-figure-pair.md is currently a copy.
+{% endcomment -%}
-
-Now that you've seen the most basic Flutter app, the next section shows
- how to take advantage of Flutter's rich widget libraries to create a modern,
- polished app.
+{% include_relative _android-ios-figure-pair.md image="react-native/hello-world-basic.png" alt="Hello world app" class="border" %}
+
+Now that you've seen the most basic Flutter app, the next section shows how to
+take advantage of Flutter's rich widget libraries to create a modern, polished
+app.
### How do I use widgets and nest them to form a widget tree?
@@ -434,8 +430,8 @@ A widget can define:
* An aspect of layout—like padding or alignment
The following example shows the "Hello world!" app using widgets from the
- Material library. In this example, the widget tree is nested inside the
- `MaterialApp` root widget.
+Material library. In this example, the widget tree is nested inside the
+`MaterialApp` root widget.
@@ -467,11 +463,7 @@ class MyApp extends StatelessWidget {
The following images show "Hello world!" built from Material Design widgets. You get more functionality for free than in the basic "Hello world!" app.
-|Android |iOS |
-|:---:|:--:|
-||
|
-
-
+{% include_relative _android-ios-figure-pair.md image="react-native/hello-world.png" alt="Hello world app" %}
When writing an app, you'll use two types of widgets: [StatelessWidget](https://docs.flutter.io/flutter/widgets/StatelessWidget-class.html) or
[StatefulWidget](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html). A StatelessWidget is just what it sounds like—a
@@ -568,18 +560,16 @@ add `@required` to the constructor.
The following screenshots show an example of the reusable CustomCard class.
-|Android|iOS|
-|:---:|:--:|
-||
|
-
-
+{% include_relative _android-ios-figure-pair.md image="react-native/custom-cards.png" alt="Custom cards" class="border" %}
## Project structure and resources
+
### Where do I start writing the code?
Start with the `main.dart` file. It's autogenerated when you create a
Flutter app.
+
```dart
// Dart
@@ -594,7 +584,8 @@ starts from the `main` function.
### How are files structured in a Flutter app?
When you create a new Flutter project, it builds the following directory structure. You can customize it later, but this is where you start.
-
+ +``` ┬ └ projectname ┬ @@ -611,7 +602,7 @@ When you create a new Flutter project, it builds the following directory structu ├ test - Contains automated test files. └ pubspec.yaml - Contains the metadata for the Flutter app. This is equivalent to the package.json file in React Native. -+``` ### Where do I put my resources and assets and how do I use them? @@ -754,6 +745,7 @@ For more information about the core widgets from the Widgets package, see [Flutter Widget Index](/docs/reference/widgets). ## Views + ### What is the equivalent of the `View` container? In React Native, `View` is a container that supports layout with `Flexbox`, @@ -806,11 +798,8 @@ ListView.builder( ) ``` -|Android|iOS| -|:---:|:--:| -|