Flutter Gallery

Flutter Gallery is a resource to help developers evaluate and use Flutter. It is a collection of Material Design & Cupertino widgets, behaviors, and vignettes implemented with Flutter. We often get asked how one can see Flutter in action, and this gallery demonstrates what Flutter provides and how it behaves in the wild.

Features

• Showcase for material, cupertino, and other widgets
• Adaptive layout for mobile and desktop
• State restoration support
• Settings to text scaling, text direction, locale, theme, and more...
• Demo for animations
• Foldable support and demo for dual_screen
• Deferred loading
• CI/CD
• ...and much more!

Supported Platforms

Flutter Gallery has been built to support multiple platforms. These include:

• Android (Google Play Store, .apk)
• iOS (locally)
• web (gallery.flutter.dev)
• macOS (.zip)
• Linux (.tar.gz)
• Windows (.zip, .msix)

Running

One can run the gallery locally for any of these platforms. For desktop platforms, please see the Flutter docs for the latest requirements.

cd gallery/
flutter pub get
flutter run

Troubleshooting

Flutter master channel

The Flutter Gallery targets Flutter's master channel. As such, it can take advantage of new SDK features that haven't landed in the stable channel.

If you'd like to run the Flutter Gallery, you may have to switch to the master channel first:

flutter channel master
flutter upgrade

When you're done, use this command to return to the safety of the stable channel:

flutter channel stable
flutter upgrade

Development

Generating localizations

If this is the first time building the Flutter Gallery, the localized code will not be present in the project directory. However, after running the application for the first time, a synthetic package will be generated containing the app's localizations through importing package:flutter_gen/gen_l10n/.

flutter pub get
flutter pub run grinder l10n

See separate README for more details.

Generating highlighted code segments

flutter pub get
flutter pub run grinder update-code-segments

See separate README for more details.

Including a new splash animation

1. Convert your animation to a .gif file. Ideally, use a background color of 0xFF030303 to ensure the animation blends into the background of the app.

2. Add your new .gif file to the assets directory under assets/splash_effects. Ensure the name follows the format splash_effect_$num.gif. The number should be the next number after the current largest number in the repository.

3. Update the map _effectDurations in splash.dart to include the number of the new .gif as well as its estimated duration. The duration is used to determine how long to display the splash animation at launch.

Releasing

must be a flutter-hackers member

A set of GitHub workflows are available to help with releasing the Flutter Gallery, one per releasing platform.

1. For Android, download the relevant Firebase configuration file (e.g. google-services.json).

2. Bump the pubspec.yaml version number. This can be in a PR making a change or a separate PR. Use semantic versioning to determine which part to increment. The version number after the + should also be incremented. For example 1.2.3+010203 with a patch should become 1.2.4+010204.

3. Run GitHub workflow.

• Deploy to web: Deploys a web build to the Firebase-hosted staging or production site.

• Deploy to Play Store: Uses Fastlane to create a beta (freely available on the Play Store) or promote an existing beta to production (Play Store).

  Note Once an .aab is created with a particular version number, it can't be replaced. The pubspec version number must be incremented again.

• Draft GitHub release: Drafts a GitHub release, including packaged builds for Android, macOS, Linux, and Windows. Release notes can be automatically generated. The release draft is private until published. Upon being published, the specified version tag will be created.

• Publish on Windows Store: Releasing to the Windows Store.

  Note This repository is not currently set up to publish new versions of the current Windows Store listing. Requires running msstore init within the repository and setting repository/environment secrets . See the instructions in the documentation for more information.

Escape hatch

If the above GitHub workflows aren't functional (#759), releasing can be done semi-manually. Since this requires obtaining environment secrets, this can only be done by a Googler. See go/flutter-gallery-manual-deployment.

Tests

The gallery has its own set of unit, golden, and integration tests.

In addition, Flutter itself uses the gallery in tests. To enable breaking changes, the gallery version is pinned in two places:

• flutter analyze: https://github.com/flutter/tests/blob/master/registry/flutter_gallery.test
• DeviceLab tests: https://github.com/flutter/flutter/blob/master/dev/devicelab/lib/versions/gallery.dart