[Tracking] Cookbook Recipes: Suggestions & Voting Thread

[brianegan]

Hey all 👋

I'm helping to write the Flutter cookbook, and have received a tremendous amount of feedback regarding the types of recipes folks would like to see -- Thank you all so much!

Now, I'd love your help to prioritize these ideas! To do so, please leave a 👍 on the recipe ideas found in the comments below that you'd be most interested in seeing on the flutter.io website.

And of course, please feel free to add comments with more ideas 😄

---

Upate: I'm leaving a 😄 on each recipe as I complete it!

[brianegan]

Creating the “Frosted Glass” effect

[brianegan]

How to Embed Flutter in one part of your app

[brianegan]

Working with Basic Layouts

[Purus]

How to create a simple plugin package for Android/iOS

[Purus]

Working with Stack widget and alignment of child widgets

[brianegan]

Working with Notification from a service

[brianegan]

How to protect views by auth

[brianegan]

Creating a Button with a "Speed Dial"

[Jeremywhiteley]

Local notifications and alarms, also push notifications using Azure.

[NicolasJacob]

Share code with a dart web app (angular dart?)

[0xff00ff]

Work with background tasks

[aslamhadi]

working with graphql

[JohannesKaufmann]

How to work with Hero animations: maybe try to recreate the IOS App Store Animation when clicking on an App Recommendation. For example the "interactive book on how to design and code an iOS 11 app" is heavily featuring that animation.

[ScottS2017]

InheritedWidget

[ScottS2017]

Brian, for many of these you don't need to kill yourself. You can just link 3-5 good tutorials and packages that already exist. Which reminds me:

[ScottS2017]

Organized list of quality tutorials and packages, organized by purpose such as data handling, async ops, UI and other useful ones such as url_launcher.

[phrohdoh]

Setting up Android SDK CLI tooling on the supported platforms (which version of the JDK needs to be installed, environment variables, etc).

Creating and launching AVDs from the CLI (and IDEs if possible).

[sethladd]

@Phrohdoh I wrote up the instructions for creating an emulator via CLI here: https://github.com/flutter/flutter/issues/9862#issuecomment-299612448

[mjohnsullivan]

Here's a few random ones:

Background execution Adding deep linking to apps Responsive UIs Saving state (maybe covered by K/V?)

[irrigator]

Integration with GraphQL

[xster]

From flutter/flutter#15966, refresh content from RefreshIndicator or CupertinoRefreshControl from a restful api.

[brianegan]

How to implement "Pull to Refresh"

[brianegan]

How to load more data at the end of a list

[xster]

Using isolates to do computationally heavy tasks concurrently with UI rendering

[xster]

An image scrolling example using the cacheExtent property and the precaching API to load images before they come into the viewport.

[ColquePaxi]

Implementing Mobile App with ML Kit for Firebase (On-device and Cloud examples).

[nesscx]

Working with GraphQL

[letsar]

@brianegan for Sticky Header I created a package here: https://github.com/letsar/flutter_sticky_header. I hope this will help you.

[ScottS2017]

I think @slightfoot may have already pushed his version of Sticky Headers as well. https://github.com/slightfoot/flutter_sticky_headers

[letsar]

@ScottS2017 Yes you are right, but the packages are quite different in their implementation details. The one you mentioned works with a RenderBox while mine works with a RenderSliver.

I think that the intended use of headers is typically for lists with a lot of items. And for lists, the SliverList (which renders in fine a RenderSliver) is a better choice than a Column (which renders in fine a RenderBox).

[zoechi]

An example for async validation until framework support flutter/flutter#9688 arrives. I didn't have a closer look, but I assume this shouldn't be too hard without framework support.

[zoechi]

Another one I have seen several times already. Get image data from an image flutter/flutter#18914

[PostImpatica]

How to implement Azure AD authentication. Also see this stack overflow. Currently this is the only thing keeping many companies from even looking at Flutter.

[mmcc007]

While waiting for flutter/flutter#9688 to resolve, based on suggestion made by @zoechi, there is a demo of sync and async form validation in the example provided in this new package: https://pub.dartlang.org/packages/modal_progress_hud

Example could possibly be adapted as a cookbook recipe (seems like a pretty common use case I so far couldn't find addressed elsewhere).

[mmcc007]

How to setup environment to develop integration tests in flutter:

Developing integration tests, at least for me, used to involve building the app and running in emulator for each development iteration. There is no hot reload equivalent for the integration tests. This takes minutes for each development iteration and is very slow.

$ flutter driver
Using device Android SDK built for x86.
Starting application: lib/main.dart
Initializing gradle...                                       0.8s
Resolving dependencies...                                    0.9s
Installing build/app/outputs/apk/app.apk...                  2.1s
Gradle task 'assembleDebug'...
Gradle task 'assembleDebug'... Done                          7.9s
Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk...                  1.8s
I/flutter (16870): Observatory listening on http://127.0.0.1:33407/
00:00 +0: app test:  (setUpAll)
[info ] FlutterDriver: Connecting to Flutter application at http://127.0.0.1:50244/
[trace] FlutterDriver: Isolate found with number: 980848669
[trace] FlutterDriver: Isolate is paused at start.
[trace] FlutterDriver: Attempting to resume isolate
[trace] FlutterDriver: Waiting for service extension

etc...

each run requires a build and install... very slow

Apparently there is a much faster way to develop integration tests.

1. configure the app to run in emulator and listen on a particular port using something like --observatory-port=8888.
2. The integration test, which is a pure dart program, can then be configured to connect on that port using something like VM_SERVICE_URL=http://127.0.0.1:8888/.

The integration test and the app code can then be modified and rerun without having to rebuild the app on each development iteration.

In one window run:

$ flutter run --observatory-port 8888 test_driver/main.dart
Using hardware rendering with device Android SDK built for x86. If you get graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching test_driver/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...                                       0.7s
Resolving dependencies...                                    0.9s
Gradle task 'assembleDebug'...
Gradle task 'assembleDebug'... Done                          3.4s
Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk...                  1.9s
Syncing files to device Android SDK built for x86...
D/        (16530): HostConnection::get() New Host Connection established 0x92a7f040, tid 16552
D/EGL_emulation(16530): eglMakeCurrent: 0xaa088a00: ver 3 0 (tinfo 0x96e46f10)
 2.2s

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:8888/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

In another window run:

$ export VM_SERVICE_URL=http://127.0.0.1:8888/
$ dart test_driver/main_test.dart
00:00 +0: app test:  (setUpAll)
[info ] FlutterDriver: Connecting to Flutter application at http://127.0.0.1:8888/
[trace] FlutterDriver: Isolate found with number: 448955887
[trace] FlutterDriver: Isolate is not paused. Assuming application is ready.
[info ] FlutterDriver: Connected to Flutter application.

etc...

Makes integration testing development way faster, probably 10x faster.

Can also be configured to run in an IDE

[manhluong]

I am not sure if it fits this cookbook, but maybe some more samples that uses the BLoC architecture?

From the state management page there seems to be more redux samples than BLoC samples: https://flutter.io/docs/development/data-and-backend/state-mgmt

Reading quickly around the internet, it seems that there is interest / doubts around BLoC from people coming from redux: https://www.reddit.com/r/FlutterDev/comments/9769oz/if_youre_using_the_bloc_pattern_what_do_you_think/

[manhluong]

Some examples on how to automatically switch between iOS and Android theming.

Related to this issue: https://github.com/flutter/flutter/issues/8410

However I am not sure about the status of 8410

[ronlobo]

Setting up .env to run app based on current environment (production, stage, local, etc ...)

[geek-sajjad]

Secure storing API credentials and Keys in Flutter App.

[fredgrott]

I have one, how to hide api keys in the binary as everyone already know how to use build variants to hide it from the git repos.

use a chain of math functions to hash the api key

take each math step and make it a separate function in a separate class to reverse.

make sure to make the names of each function character names from your favorite movie,.

its imperfect...but its the only viable solution right now

[parlough]

I'm going to close this as we haven't used it as a tracking issue for a while and now have many cookbook recipes. Thanks everyone!