Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions examples/cookbook/images/fading_in_images/lib/memory_main.dart
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
// #docregion TransparentImage
import 'dart:convert';
import 'dart:typed_data';
// #enddocregion TransparentImage

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

// #docregion TransparentImage
final Uint8List transparentImage = base64Decode(
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4'
'nGMAAQAABQABDQottAAAAABJRU5ErkJggg==',
);
// #enddocregion TransparentImage

void main() {
runApp(const MyApp());
Expand All @@ -22,7 +33,7 @@ class MyApp extends StatelessWidget {
Center(
// #docregion MemoryNetwork
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
placeholder: transparentImage,
image: 'https://picsum.photos/250?image=9',
),
// #enddocregion MemoryNetwork
Expand Down
2 changes: 0 additions & 2 deletions examples/cookbook/images/fading_in_images/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ environment:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.9
transparent_image: ^2.0.1

dev_dependencies:
flutter_test:
Expand Down
8 changes: 0 additions & 8 deletions sites/docs/src/content/add-to-app/performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,6 @@ This happens when you construct a `FlutterEngine` for the
first time on both **[Android][android-engine]**
and **[iOS][ios-engine]** APIs.

:::note
Some packages allow you to share images and fonts
from the native application to your Flutter screen.
For example:
* [native_font]({{site.pub-pkg}}/native_font)
* [ios_platform_images]({{site.pub-pkg}}/ios_platform_images)
:::

### Loading the Flutter library

After it's found, the engine's shared libraries are memory loaded
Expand Down
98 changes: 68 additions & 30 deletions sites/docs/src/content/cookbook/images/fading-in-images.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,53 @@ and images would fade in as they're loaded? Use the
`FadeInImage` works with images of any type: in-memory, local assets,
or images from the internet.

## In-Memory
## In-memory

In this example, use the [`transparent_image`][]
package for a simple transparent placeholder.
To use a single-pixel, transparent PNG as the placeholder image,
complete the following steps:

<?code-excerpt "lib/memory_main.dart (MemoryNetwork)" replace="/^child\: //g"?>
```dart
FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://picsum.photos/250?image=9',
),
```
1. **Create the transparent image data.**

Import `dart:convert` and `dart:typed_data`,
then decode the image from a Base64-encoded string:

<?code-excerpt "lib/memory_main.dart (TransparentImage)" plaster="none"?>
```dart
import 'dart:convert';
import 'dart:typed_data';
final Uint8List transparentImage = base64Decode(
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4'
'nGMAAQAABQABDQottAAAAABJRU5ErkJggg==',
);
```

1. **Use the image data as a placeholder.**

Pass the decoded image data to the `placeholder` parameter:

<?code-excerpt "lib/memory_main.dart (MemoryNetwork)" replace="/^child\: //g"?>
```dart
FadeInImage.memoryNetwork(
placeholder: transparentImage,
image: 'https://picsum.photos/250?image=9',
),
```

{:.steps}

### Complete example

<?code-excerpt "lib/memory_main.dart"?>
```dart
import 'dart:convert';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

final Uint8List transparentImage = base64Decode(
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4'
'nGMAAQAABQABDQottAAAAABJRU5ErkJggg==',
);

void main() {
runApp(const MyApp());
Expand All @@ -56,7 +84,7 @@ class MyApp extends StatelessWidget {
const Center(child: CircularProgressIndicator()),
Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
placeholder: transparentImage,
image: 'https://picsum.photos/250?image=9',
),
),
Expand All @@ -72,25 +100,36 @@ class MyApp extends StatelessWidget {

## From asset bundle

You can also consider using local assets for placeholders.
First, add the asset to the project's `pubspec.yaml` file
(for more details, see [Adding assets and images][]):
To use a local image asset as the placeholder image,
complete the following steps:

```yaml diff
flutter:
assets:
+ - assets/loading.gif
```
1. **Add the placeholder to the asset bundle.**

Then, use the [`FadeInImage.assetNetwork()`][] constructor:
Add a placeholder image to the project's `assets` directory,
such as `assets/loading.gif`.
Then, declare the asset in the project's `pubspec.yaml` file.
For more details, see [Adding assets and images][].

<?code-excerpt "lib/asset_main.dart (AssetNetwork)" replace="/^child\: //g"?>
```dart
FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://picsum.photos/250?image=9',
),
```
```yaml diff
flutter:
assets:
+ - assets/loading.gif
```

1. **Use the asset as a placeholder.**

Pass the asset path to the `placeholder` parameter of
the [`FadeInImage.assetNetwork`][] constructor:

<?code-excerpt "lib/asset_main.dart (AssetNetwork)" replace="/^child\: //g"?>
```dart
FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://picsum.photos/250?image=9',
),
```

{:.steps}

### Complete example

Expand Down Expand Up @@ -130,5 +169,4 @@ class MyApp extends StatelessWidget {

[Adding assets and images]: /ui/assets/assets-and-images
[`FadeInImage`]: {{site.api}}/flutter/widgets/FadeInImage-class.html
[`FadeInImage.assetNetwork()`]: {{site.api}}/flutter/widgets/FadeInImage/FadeInImage.assetNetwork.html
[`transparent_image`]: {{site.pub-pkg}}/transparent_image
[`FadeInImage.assetNetwork`]: {{site.api}}/flutter/widgets/FadeInImage/FadeInImage.assetNetwork.html
14 changes: 7 additions & 7 deletions sites/docs/src/content/flutter-for/android-devs.md
Original file line number Diff line number Diff line change
Expand Up @@ -518,7 +518,7 @@ Widget build(BuildContext context) {
In Android, there are two main use cases for `Intent`s: navigating between
Activities, and communicating with components. Flutter, on the other hand,
does not have the concept of intents, although you can still start intents
through native integrations (using [a plugin][]).
through native integrations, such as the [`android_intent_plus`][] plugin.

Flutter doesn't really have a direct equivalent to activities and fragments;
rather, in Flutter you navigate between screens, using a `Navigator` and
Expand Down Expand Up @@ -2179,22 +2179,22 @@ for accessing the camera.
### How do I log in with Facebook?

To Log in with Facebook, use the
[`flutter_facebook_login`][] community plugin.
[`flutter_facebook_auth`][] community plugin.

### How do I use Firebase features?

Most Firebase functions are covered by
[first party plugins][].
These plugins are first-party integrations,
maintained by the Flutter team:
maintained by the Flutter and Firebase teams:

* [`google_mobile_ads`][] for Google Mobile Ads for Flutter
* [`firebase_analytics`][] for Firebase Analytics
* [`firebase_auth`][] for Firebase Auth
* [`firebase_database`][] for Firebase RTDB
* [`firebase_storage`][] for Firebase Cloud Storage
* [`firebase_messaging`][] for Firebase Messaging (FCM)
* [`flutter_firebase_ui`][] for quick Firebase Auth integrations
* [`firebase_ui_auth`][] for quick Firebase Auth integrations
(Facebook, Google, Twitter and email)
* [`cloud_firestore`][] for Firebase Cloud Firestore

Expand Down Expand Up @@ -2379,14 +2379,14 @@ see the [`firebase_messaging`][] plugin documentation.
[`devicePixelRatio`]: {{site.api}}/flutter/dart-ui/FlutterView/devicePixelRatio.html
[DevTools]: /tools/devtools
[existing plugin]: {{site.pub}}/flutter/
[`flutter_facebook_login`]: {{site.pub}}/packages/flutter_facebook_login
[`flutter_facebook_auth`]: {{site.pub-pkg}}/flutter_facebook_auth
[`google_mobile_ads`]: {{site.pub}}/packages/google_mobile_ads
[`firebase_analytics`]: {{site.pub}}/packages/firebase_analytics
[`firebase_auth`]: {{site.pub}}/packages/firebase_auth
[`firebase_database`]: {{site.pub}}/packages/firebase_database
[`firebase_messaging`]: {{site.pub}}/packages/firebase_messaging
[`firebase_storage`]: {{site.pub}}/packages/firebase_storage
[`flutter_firebase_ui`]: {{site.pub}}/packages/flutter_firebase_ui
[`firebase_ui_auth`]: {{site.pub-pkg}}/firebase_ui_auth
[Firebase Messaging]: {{site.github}}/firebase/flutterfire/tree/master/packages/firebase_messaging
[first party plugins]: {{site.pub}}/flutter/packages?q=firebase
[Flutter for Android Developers: How to design LinearLayout in Flutter]: https://proandroiddev.com/flutter-for-android-developers-how-to-design-linearlayout-in-flutter-5d819c0ddf1a
Expand All @@ -2400,7 +2400,7 @@ see the [`firebase_messaging`][] plugin documentation.
[Material Components]: {{site.material}}/develop/flutter
[Material Design guidelines]: {{site.material}}/styles
[optimized for all platforms]: {{site.material}}/develop
[a plugin]: {{site.pub}}/packages/android_intent
[`android_intent_plus`]: {{site.pub-pkg}}/android_intent_plus
[pub.dev]: {{site.pub}}/flutter/packages/
[Retrieve the value of a text field]: /cookbook/forms/retrieve-input
[Shared_Preferences plugin]: {{site.pub}}/packages/shared_preferences
Expand Down
11 changes: 6 additions & 5 deletions sites/docs/src/content/flutter-for/xamarin-forms-devs.md
Original file line number Diff line number Diff line change
Expand Up @@ -2336,20 +2336,21 @@ The [`camera`][] plugin is popular for accessing the camera.
### How do I log in with Facebook?

To log in with Facebook, use the
[`flutter_facebook_login`][] community plugin.
[`flutter_facebook_auth`][] community plugin.

### How do I use Firebase features?

Most Firebase functions are covered by [first party plugins][].
These plugins are first-party integrations, maintained by the Flutter team:
These plugins are first-party integrations,
maintained by the Flutter and Firebase teams:

* [`google_mobile_ads`][] for Google Mobile Ads for Flutter
* [`firebase_analytics`][] for Firebase Analytics
* [`firebase_auth`][] for Firebase Auth
* [`firebase_database`][] for Firebase RTDB
* [`firebase_storage`][] for Firebase Cloud Storage
* [`firebase_messaging`][] for Firebase Messaging (FCM)
* [`flutter_firebase_ui`][] for quick Firebase Auth integrations
* [`firebase_ui_auth`][] for quick Firebase Auth integrations
(Facebook, Google, Twitter and email)
* [`cloud_firestore`][] for Firebase Cloud Firestore

Expand Down Expand Up @@ -2489,8 +2490,8 @@ For more information on using the Firebase Cloud Messaging API, see the
[`firebase_messaging`]: {{site.pub}}/packages/firebase_messaging
[`firebase_storage`]: {{site.pub}}/packages/firebase_storage
[first party plugins]: {{site.pub}}/flutter/packages?q=firebase
[`flutter_facebook_login`]: {{site.pub}}/packages/flutter_facebook_login
[`flutter_firebase_ui`]: {{site.pub}}/packages/flutter_firebase_ui
[`flutter_facebook_auth`]: {{site.pub-pkg}}/flutter_facebook_auth
[`firebase_ui_auth`]: {{site.pub-pkg}}/firebase_ui_auth
[`geolocator`]: {{site.pub}}/packages/geolocator
[`camera`]: {{site.pub-pkg}}/camera
[`http` package]: {{site.pub}}/packages/http
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -137,9 +137,6 @@ check out the following resources.
check out [Differentiate between ephemeral state
and app state][state].

* You might want to check out packages on pub.dev that
perform state restoration, such as [`statePersistence`][].

* For more information on navigation and the
[`go_router`][] package, check out [Navigation and routing][]
and the [State restoration][] topic on pub.dev.
Expand All @@ -150,5 +147,4 @@ check out the following resources.
[`RestorableProperty`]: {{site.api}}/flutter/widgets/RestorableProperty-class.html
[`restorablePush`]: {{site.api}}/flutter/widgets/Navigator/restorablePush.html
[`ScrollView`]: {{site.api}}/flutter/widgets/ScrollView/restorationId.html
[`statePersistence`]: {{site.pub-pkg}}/state_persistence
[`TextField`]: {{site.api}}/flutter/material/TextField/restorationId.html
Loading
Loading