flutter / gallery

Flutter Gallery was a resource to help developers evaluate and use Flutter

Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Documentation

• Install Flutter
• Flutter documentation
• Development wiki
• Contributing to Flutter

For announcements about new releases, follow the [email protected] mailing list. Our documentation also tracks breaking changes across releases.

Terms of service

The Flutter tool may occasionally download resources from Google servers. By downloading or using the Flutter SDK, you agree to the Google Terms of Service: https://policies.google.com/terms

For example, when installed from GitHub (as opposed to from a prepackaged archive), the Flutter tool will download the Dart SDK from Google servers immediately when first run, as it is used to execute the flutter tool itself. This will also occur when Flutter is upgraded (e.g. by running the flutter upgrade command).

About Flutter

We think Flutter will help you create beautiful, fast apps, with a productive, extensible and open development model, whether you're targeting iOS or Android, web, Windows, macOS, Linux or embedding it as the UI toolkit for a platform of your choice.

Beautiful user experiences

We want to enable designers to deliver their full creative vision without being forced to water it down due to limitations of the underlying framework. Flutter's layered architecture gives you control over every pixel on the screen and its powerful compositing capabilities let you overlay and animate graphics, video, text, and controls without limitation. Flutter includes a full set of widgets that deliver pixel-perfect experiences whether you're building for iOS (Cupertino) or other platforms (Material), along with support for customizing or creating entirely new visual components.

Fast results

Flutter is fast. It's powered by hardware-accelerated 2D graphics libraries like Skia (that underpins Chrome and Android) and Impeller. We architected Flutter to support glitch-free, jank-free graphics at the native speed of your device.

Flutter code is powered by the world-class Dart platform, which enables compilation to 32-bit and 64-bit ARM machine code for iOS and Android, JavaScript and WebAssembly for the web, as well as Intel x64 and ARM for desktop devices.

Productive development

Flutter offers stateful hot reload, allowing you to make changes to your code and see the results instantly without restarting your app or losing its state.

Extensible and open model

Flutter works with any development tool (or none at all), and also includes editor plug-ins for both Visual Studio Code and IntelliJ / Android Studio. Flutter provides tens of thousands of packages to speed your development, regardless of your target platform. And accessing other native code is easy, with support for both FFI (on Android, on iOS, on macOS, and on Windows) as well as platform-specific APIs.

Flutter is a fully open-source project, and we welcome contributions. Information on how to get started can be found in our contributor guide.

gallery's Issues

When using web/desktop, cursor should change to a pointer when hovering over interactive elements

flutter/flutter feature request

Suggestion: add omit_local_variable_types to linter

For new code, we have been trying to omit types for local variables.
There are ~100 instances where we use types for local variables (mostly in the studies). We should consider adding this rule to our linter to be consistent. Something to consider is that these studies might be merged back into flutter/samples.

Acceptance Criteria

• rule added and followed either everywhere, or everywhere except the studies

Migrated from material-components/material-components-flutter-gallery#163

[Performance] Settings scale transition is choppy

When opening settings, the scale transition skips frames

material-components/material-components-flutter-gallery#560

Homepage - Improve Focus support

• On the homepage you should get focus on the settings icon first, then studies, then the demos.
• Settings should be settable with Focus (?).

Migrated from material-components/material-components-flutter-gallery#569

Implement Reply Study (13)

Acceptance Criteria

• Request a banner from Liam
• Utilize the code built by an external contributor at https://github.com/flschweiger/reply if they allow us to
• Expand on this and add desktop layout

Migrated from material-components/material-components-flutter-gallery#534

Automate the release process (5)

Acceptance Criteria

• Automate releases when a tag is added
  • Add Android build
  • Deploy to web with Firebase
  • Create release on github with macOS/linux/windows (if possible)

Migrated from material-components/material-components-flutter-gallery#521

Build additional screens for Fortnightly (5)

Acceptance Criteria

• Take the article view from the old gallery and repurpose it so tapping an article from home takes you there.
• Build the desktop layout for it
• Ensure a11y and l10n

Blocked on #238
Migrated from #material-components/material-components-flutter-gallery#537

Crane - Improve Focus support

Acceptance Criteria

• You can only navigate the navigation at the top the first time, when you have reached the destinations it is not possible to go back to the top
• If you shift-tab the first thing you do as you enter the app, it should scroll down all the way to the bottom as a destination on the bottom now has focus. (this should probably be a flutter/flutter issue)

Migrated from material-components/material-components-flutter-gallery#568

[Performance] Add flutter_gallery__transition_perf benchmarks of the new Flutter gallery app

See flutter/samples#309

Migrated from material-components/material-components-flutter-gallery#559

[Performance] Use deferred loading to improve performance

Acceptance Criteria

• The studies load asynchronously after the initial page load
• Load non necessary locales asynchronously

https://dart.dev/guides/language/language-tour#deferred-loading

Migrated from material-components/material-components-flutter-gallery#571

URL launcher plugin does not work on Windows/Linux

To repro

• Launch app on windows/linux
• Go into a demo and tap API doc button
• Observe nothing happens

Acceptance Criteria

• We should either find a way to launch a URL for windows/linux

The solution that was used for macOS doesn't work since it relies on a git URL and that doesn't work for linux/windows according to https://github.com/google/flutter-desktop-embedding/blob/master/plugins/README.md#dart

The alternative is to use a local path to the FDE repo but this is fragile and not a proper solution.

Migrated from material-components/material-components-flutter-gallery#293

Shrine: Improve Screenreader Support

Acceptance Criteria

• Let the screen reader go through widgets in a desired order. (Fine tune OrdinalSortKey)

Potential Additions

• Let every screen be read with a summary.
• Let every page change have a voice feedback (such as closing the cart).

[Performance] Shrine menu icon animation motion jumps a bit

Acceptance Criteria

• Investigate and fine tune the motion to match the spec

Migrated from material-components/material-components-flutter-gallery#442

[Performance] Settings locale list initial load is slow (3)

Acceptance Criteria

• Expand/collapse animation for settings should be smooth
• Look into different ListView constructor that recycles items

original issue: material-components/material-components-flutter-gallery#346

Demo swipe gesture for cards in gallery

From https://www.google.com/design/spec/components/cards.html#cards-behavior

"The swipe gesture may be used on a per-card basis. Limit swipe gestures within a view so that they don’t overlap with one another. For example, a swipeable card should not contain a swipeable image carousel, so that only a single action occurs when the card is swiped."

Localize app name

Acceptance Criteria

• The app name should be localized

Currently:

#material-components/material-components-flutter-gallery#285

Update code viewer script to replace localizations with english strings

In order to make the copied demo code runnable, we can update the script to replace the GalleryLocalizations.of(context).foo with the english strings.

[Shrine] example doesn't match with material studies shrine specs

I just downloaded and run the Shrine demo App, so far I can identify these issues:

1 - The login screen has a login button missing text and theme:

2 - There's no Launch Screen, as described in the study here: https://material.io/design/material-studies/shrine.html#motion

3 - The search and options icon just open the login screen.

Add an example of Material BottomNavigationBar with navigation

We don't have any demos of navigation using BottomNavigationBar in the gallery (for instance something showing https://material.io/design/components/bottom-navigation.html#behavior).

The BottomNavigationBar demo itself shows the Scaffold body doing animations. Add another demo that uses BottomNavigationBar with Navigators.

Plugin uses or overrides a deprecated API Warnings While Compiling Flutter Gallery To An APK

$ flutter build apk
Running "flutter packages get" in flutter_gallery...         1.1s
Initializing gradle...                                       2.4s
Resolving dependencies...                                   17.7s
Gradle task 'assembleRelease'...
Note: /Users/mit/dev/flutter/.pub-cache/hosted/pub.dartlang.org/video_player-0.6.4/android/src/main/java/io/flutter/plugins/videoplayer/VideoPlayerPlugin.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

Display a carousel of generative art on splash screen

Migrated from: material-components/material-components-flutter-gallery#31

Acceptance Criteria

• On app launch, a random piece of generative art is displayed
• When the home screen is pulled down and splash screen is visible, the art is displayed in an interactive carousel that allows user to swipe between pieces of art
• The art has an attribution with a link to the artist

[Performance] Backdrop animation is choppy on web and desktop

The animation that shows and hides the flutter animation (by hiding and showing the backdrop) is no longer choppy

original issue: material-components/material-components-flutter-gallery#570

[Performance] Rally numbers missing inside tab's content

To repro

• Initial load, clicked through all the tabs and the numbers were there for each except budget
• Then went back to the other tabs and the numbers were missing
• Went back to main page
• Opened rally again and now bills showed a number but the others didn't
• After a few click through tabs the bills number also disappeared

Acceptance Criteria

*Numbers should not disappear

original issue: material-components/material-components-flutter-gallery#553

Finish Remaining Details of Shrine

Acceptance Criteria

Finish the following parts for the Shrine desktop layout:

• 11-25 Desktop login screen (material-components/material-components-flutter-gallery#356)
• Some minor details
  • 12-17 Use correct letter spacing for certain labels (flutter/samples#187)
  • Use correct vertical gaps between cards
    • Make sure vertical gaps between product cards on the product page have dimensions that match the specs file.
  • Use correct animation specs
    • Make sure all animations match specs file.
• Scrollable vertical sidebar of categories (issue only visible when too many categories)
  • When the vertical sidebar contains too many categories (consider 10–20), it overflows instead of becomes scrollable.
  • Make it scrollable so that all categories can be accessed.
• 11-21 Implement RTL support (material-components/material-components-flutter-gallery#297)

Related Issues

• material-components/material-components-flutter-gallery#5

Integrate apps with Firebase Crashlytics

Acceptance Criteria

• Integrate Firebase Crashlytics into Android and iOS versions

#material-components/material-components-flutter-gallery#151

Show SF font on Android in the gallery

Demo'ing iOS looks on an Android device with the gallery looks weird currently due to typography. Figure out a way to bundle a SF or SF-like font so Android can display something nicer.

Integration of circular progress indicators with other widgets

From https://www.google.com/design/spec/components/progress-activity.html

Shrine - No visual indicator when adding the same item multiple times (2)

Acceptance Criteria

• The cart should somehow indicate that an item was added even if its the same type.
• Work with designer to determine the best way to do this

Gallery shrine demo WillPopScope in ExpandingBottomSheet doesn't work!

Add Screenshot tests

Acceptance Criteria

• Golden tests for the demos
• Add the tests to https://github.com/flutter/tests/blob/master/registry/flutter_gallery.test This is not possible due to differences in how the tests will be run on different machines.

Migrated from material-components/material-components-flutter-gallery#547

Gallery app would like a way to report crashes

We'd like to capture and measure crashes in the wild. We should find a good way to do this in Flutter apps.

Perhaps we can try https://firebase.google.com/docs/crash/

Localize the phone number and salary in text field demo

Acceptance Criteria

• Phone number is localized in text field demo
• Salary is localized in text field demo

#material-components/material-components-flutter-gallery#343

Changing theme in Gallery misses frames

Open Gallery, open drawer, change the theme to dark, then back to light:

Implement Owl Study (13)

Acceptance Criteria

• Request a banner from Liam
• Utilize the small amount of Owl code that exists at https://github.com/material-components/material-components-flutter-experimental/tree/master/advanced/lib/Owl
• Expand on this and add desktop layout

Migrated from material-components/material-components-flutter-gallery#533

Build additional screens for Shrine

Acceptance Criteria

[Performance] Resizing Window is not smooth

Resize from the bottom right or left hand corner of window
A black background appears before it is filled in with the purple card color
Notice that the cards/assets on the main page shift slow and janky, not smooth at all

original issue: material-components/material-components-flutter-gallery#549

Implement tab navigation support - Shrine

Acceptance Criteria

• Tab navigation for Shrine on Web works correctly.

Gallery UI is extremely slow

I've installed Flutter Gallery app on my Android phone and noticed that animations, scrolling and transitions are lagging.

Interesting observation: often once particular animation was performed it not longer lags. Same applies to scrolling: once I scroll to the end of the list scrolling starts working fine.

Seems that there is some kind of cache that is populated and only after that acceptable performance is achieved.

Here is a demo:
https://drive.google.com/open?id=1ZXKLWQEYLpOcjd5h7ndrMqHhC1GW37Rg
Notice how slow is tap animation when I press the button first time.
Also the last screen (Contact Profile) is unusable: scrolling and overall performance is extremely slow.

I've also tested this app on Android Tablet and got the same behavior.

Phone: Samsung Galaxy S4 (GT-I9500)
Tablet: ASUS MeMO Pad FHD 10 (ME302C)

Gallery app would like to measure usage

We'd like to see what demos people are checking out, and how long they use the app.

We could try https://firebase.google.com/docs/analytics/

Gallery should implement full screen / edge-to-edge for Android Q+ devices

Currently, flutter_gallery shows a black bar on the bottom of the screen where the system gestures are for Android Q+. However, the recommendation by Android suggests that we should now be making the system navigation bar transparent to take advantage of the entire screen.

What it looks like now:

What it should look like:

Investigate why fonts are being downloaded multiple times

When looking at the studies inside of a browser, it seems like the fonts are being downloaded multiple times when looking at the network tab inside of chrome.

Migrated from material-components/material-components-flutter-gallery#572

[Performance] Add scrollbars to scrollable screens

Acceptance Criteria

• Everything scrollable should have a scrollbar

Relates to flutter/flutter#36474.

Migrated from material-components/material-components-flutter-gallery#550

Shrine - Removing item from cart with screen reader should move focus to top of cart

Acceptance Criteria

• a11y focus moves to top of cart of removing item

Migrated from material-components/material-components-flutter-gallery#488

Cupertino Alerts on web have a strange artifact on the button

Acceptance Criteria

• Should render normally

Migrated from material-components/material-components-flutter-gallery#211

Seemingly no way to obtain device locale on desktop

Migrated from: material-components/material-components-flutter-gallery#458

See flutter/flutter#45343. This affects all desktop builds (macOS, windows, linux)

For now, we force the system locale to be en_US

[Performance] All Apps load very slowly initially

On all (Rally, shine, fortnightly etc) apps the initial load is janky
Second time loading is better but still a bit slow

Migrated from material-components/material-components-flutter-gallery#556

Have a Sliver demo in the Gallery

Hope it's not a dupe.

Would be nice to catalog some sliver widgets in the gallery and common usage patterns.

Code segment generator will get different imports on unix and macOS, verify-l10n is different on windows

Code segments generator has different output for unix and macOS

See the transformations demo.

In the subsegment transformationsDemo#2 we have the imports and these are the outputs generated on a macOS system:

import 'dart:collection' show IterableMixin;
import 'dart:math';
import 'dart:ui' show Vertices;
import 'package:flutter/material.dart' hide Gradient;
import 'package:vector_math/vector_math_64.dart' show Vector3;

In the subsegment transformationsDemo#3 we have the imports and theser are the outputs generated on Ubuntu:

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' show Vector3;
import 'transformations_demo_inertial_motion.dart';

Verify l10n has different output on Windows

To be debugged.

Migrated from material-components/material-components-flutter-gallery#565

Monitor performance of Flutter Gallery

Maybe we can start with some in-house apps such as Flutter gallery and Google Ads using Android Vitals and Firebase Performance Monitoring.

Some interesting metrics might be: crashes, ANRs, battery, FPS, memory, startup time, frame build/rasterize time, latency...

The Flutter team is now focusing on Add performance monitoring to Gallery on web/iOS/Android flutter/flutter#69

As a first step, we'll close this issue once

• #69 is closed.
• some publicly shareable performance metrics for the new gallery app on real user devices are added to our public performance dashboard.
• document how the new Gallery added the monitoring so developers can follow that.

Implement category tile expansion with translucency and scroll beneath

Acceptance Criteria

• When category is expanded the header moves to the top of the screen
• Header then has translucency and demos scroll beneath it
• This could maybe be done by presenting a new route with a custom transition (maybe using a Hero)
• The UX is a bit unclear as to what happens when you scroll to the top

Related to material-components/material-components-flutter-gallery#346

Migrated from material-components/material-components-flutter-gallery#100