Skip to content

Conversation

@brianegan
Copy link
Contributor

@brianegan brianegan commented Feb 22, 2021

Fixes #76379

Flutter has one starter app template: the Counter app. It gets the user going quickly, and teaches low-level basics in 66 lines of code. We don't, however, provide a template that would be closer to a complete app, with several widgets in separate files, app-wide state, navigation or state restoration.

Summary

I've worked with @filiph to develop a new template application that includes two features: A static list / detail feature and a dynamic settings feature. When a user changes the Theme in the settings screen, the application responds in kind.

The template takes the following notable approaches. Reasons behind each feature / approach is documented in the "New Flutter Template: Final Decisions" document.

  • The template targets Intermediate Flutter developers. "Intermediate Flutter Developer" is defined by the "Flutter Learning Journey's" document.
  • Generally follows the Simple App State Management guide, using a ChangeNotifier to coordinate multiple Widgets.
  • Includes an analysis_options.yaml file
  • Generates localizations by default using arb files.
  • Includes an example image and establishes 1x, 2x and 3x folders for image assets.
  • Uses a "feature-first" folder organization
  • Navigator 1.0 with pushNamed for Navigation

Approach

  1. Spent one week on research and competitive analysis. This involved recruiting and interviewing beginner to intermediate Flutter developers to determine their current learning targets and needs. Furthermore, I reviewed popular architecture and state management libraries from the Flutter community to determine the current advice and best practices offered by the Flutter ecosystem. Finally, I researched templates from "competing" frameworks, such as Android, iOS, Xamarin, React and Angular to see what similar frameworks offer in regards to templates. This research has been compiled into the "New Flutter Template: Research and Competitive Analysis" Google doc that informed our subsequent work. Please note: This document includes some notes from the user interviews. It does not contain any personally revealing information, but to ensure privacy, I've restricted access to this document.
  2. Next, I spent 3 weeks coding up various approaches. This resulted in the creation of ~25 different potential templates. From these evaluations we learned the different types of decisions we need to make for a final template. For example: What should the template do? Should it include localization? Logging? Responsive Breakpoints? Etc.
  3. We then asked for more community feedback on these decisions. We used this feedback + all of the information gathered in our previous steps to make our final decisions. The decisions we've reached are documented in the "New Flutter Template: Final Decisions" document.
  4. Now, we've taken those decisions and distilled them into this template proposal!

Preview

simplescreenrecorder-2021-02-22_15.27.52.mp4
simplescreenrecorder-2021-02-26_17.11.23.mp4

Pre-launch Checklist

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • I read the Tree Hygiene wiki page, which explains my responsibilities.
  • I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
  • I signed the CLA.
  • I listed at least one issue that this PR fixes in the description above.
  • I updated/added relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making or feature I am adding, or Hixie said the PR is test-exempt.
  • All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

@flutter-dashboard flutter-dashboard bot added the tool Affects the "flutter" command-line tool. See also t: labels. label Feb 22, 2021
@google-cla google-cla bot added the cla: yes label Feb 22, 2021
@filiph
Copy link
Contributor

filiph commented Feb 22, 2021

Hi @Hixie, would you please have a look at this PR, and/or suggest other reviewers?

This is the project that adds a more complete template (flutter create -t full, go/flutter-more-complete-template). Issue at #76379.

We have a 24-page public document explaining all the micro-decisions that went into this. I recommend skimming through it since it may pre-empt some understandable questions and raised eyebrows.

@zanderso
Copy link
Member

Sorry if this is in the linked docs, but what is the plan for testing this?

Relatedly, I'm wondering if this could be an opportunity for demonstrating testing practices by including a few more non-trivial tests in the template itself.

@filiph
Copy link
Contributor

filiph commented Feb 23, 2021

Sorry if this is in the linked docs, but what is the plan for testing this?

Is there a test for the current flutter create template (the "counter app") that we could look at for inspiration?

Relatedly, I'm wondering if this could be an opportunity for demonstrating testing practices by including a few more non-trivial tests in the template itself.

Here's our thinking on this. In short: we see that, with the current template, developers introduce breaking changes to the template in the first 5 minutes of their work, and then the smoke test is broken (often statically broken, so there are analyzer errors and squiggly lines). The effect is that the (otherwise very educational!) test/widget_test.dart file gets deleted or commented out. For that reason, the approach is to have relatively trivial tests that can't be broken (they don't depend on lib/) but that still provide some boilerplate (test('...', () {})) and links to documentation.

Nothing here is set in stone, though.

@jonahwilliams
Copy link
Contributor

We need to find a way to not duplicate the existing platform files. We occasionally have to update these, and having 2 copies of everything is going to increase the chances that we accidentally get out of sync somewhere.

@zanderso
Copy link
Member

flutter create tests live in https://github.com/flutter/flutter/blob/master/packages/flutter_tools/test/commands.shard/permeable/create_test.dart. We currently generate the app, analyze it, check formatting, etc., but we don't have devicelab tests that run it, AFAIK.

@Hixie
Copy link
Contributor

Hixie commented Feb 23, 2021

We should definitely have tests for this app since it's non-trivial. I agree they shouldn't be in the template.
I think it might be worth branding this as a "best practices" template rather than "full" or "complete" or similar.
Thanks for the decision doc, that was very helpful. I think the analysis_options decision should be revisited in light of the comment I added to the doc. There's a large value in not having a file in the template there because everything in the template gets left behind when we update.
I concur with @jonahwilliams that we should make sure to not duplicate the platform-specific bits.

@brianegan
Copy link
Contributor Author

Thanks to everyone for the reviews! I'm working on addressing all feedback.

We should definitely have tests for this app since it's non-trivial.

Could you please describe in a bit more detail what kind of tests you'd like to see? I was going to replicate the tests for the Counter app, but I can include additional Widget and/or Unit tests to cover the functionality of the app as well.

Thanks again :)

@Hixie
Copy link
Contributor

Hixie commented Feb 24, 2021

Could you please describe in a bit more detail what kind of tests you'd like to see?

Well at a minimum we should verify that we can navigate to each page, and that changing the theme settings works. Might be good to have some golden tests too just in case.

@brianegan brianegan force-pushed the list_detail_app_template branch 4 times, most recently from df1e7b7 to 2a28270 Compare February 26, 2021 17:03
@brianegan
Copy link
Contributor Author

brianegan commented Mar 1, 2021

Thanks again for the review, everyone. I've gone through and updated the tool a bit to support the new template. Features include:

  1. Updated template based on feedback.
    • Remove analysis_options
    • Fix comments
    • Route restoration
    • Full types for all closures
    • use relative imports
  2. Shared Platform Files. To share files, I've introduced the concept of a "merged" template, which combines several source templates & their template_images into a single destination.
    • templates/app_shared - Contains all files shared between different apps
    • templates/app - only files needed by counter app
    • templates/list_detail_app - only files needed by the new template.
    • Submitted PR to flutter_template_images to ensure the directory structure is in sync
  3. Added tests
    • We've decided NOT to include any implementation tests in the final template, but we want to test the app before we ship it.
    • To support this Use Case, I've added an implentation-tests flag to the flutter create command. If this flag is set to true, the template will render .test.tmpl files found in the source directories and copy .golden.tmpl files from the flutter_template_images repo.

Please note: some tests will not pass until we merge flutter/packages#295.

This is my first time modifying the CLI, so I'm not sure if this is the correct approach! Happy to change it up if need be.

  - Bump flutter_template_images to 2.0.0
  - Fix typo in variable name
@brianegan brianegan force-pushed the list_detail_app_template branch from e0c3d3f to 397c577 Compare March 16, 2021 10:56
@brianegan
Copy link
Contributor Author

brianegan commented Mar 16, 2021

Thanks everyone. I agree: There's no perfect name here, and I'm happy with skeleton as well :)

I saw some updates were pushed to this branch, but they looked a bit busted. There should only be about ~900 additions, nowhere near 8000. Therefore, I've rebased my branch against master to be sure this PR is up-to-date, renamed everything to skeleton, and force-pushed once again.

At this point, I think the plan for landing this PR seems to be:

  1. Merge flutter_template_images: 3.0.0, which renames list_detail_app to skeleton: [flutter_template_images] Rename list_detail_app to skeleton packages#310
  2. Get any final input from the team and update this PR (all outstanding feedback so far has been addressed)
  3. Rerun the CI checks for this PR and fix any issues. The flutter_tools pubspec for this PR already references flutter_template_images: 3.0.0, but of course no tests will pass until that's deployed.
  4. Merge it up!

Copy link
Member

@zanderso zanderso left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm w/ nit

I don't have a strong opinion about the name, but an advantage of 'skeleton_app' would be making it easier to think of the name for similar templates for modules and plugins: 'skeleton_module', 'skeleton_plugin', etc.

/// It is different than the "module" template in that it exposes and doesn't
/// manage the platform code.
app,
/// A List/Detail app template that follows community best practices.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: it looks like this list was alphabetized.

Copy link
Member

@goderbauer goderbauer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

No strong opinion about the particular name. I do see advantages in using the suffix _app to make it clear what kind of template this is (e.g. module, plugin, package, or app).

@csells
Copy link
Contributor

csells commented Mar 17, 2021

cc @stuartmorgan re: the use of non-default templates using a naming convention like "skeleton_app" or "federated_plugin" as he's particularly interested in adding a federated plugin template in the future.

@stuartmorgan-g
Copy link
Contributor

I think it's plausible that we'll need a couple of new *_plugin types, but I don't have a strong opinion on whether that means this needs an *_app suffix; I don't see an issue with adding *_plugin templates even if this doesn't end with _app

@filiph
Copy link
Contributor

filiph commented Mar 17, 2021

The reason I'm not 100% on board with *_app is that it's not great developer experience on the command line. flutter create -t skeleton is easy to write and remember. flutter create -t skeleton_app not so much. ("Was it skeleton_app? Or skeleton_application? Or skeletonApp?")

I do understand the appeal of having a more stratified approach to naming. I just think we need to understand the tradeoff between that, and developer experience.

@csells
Copy link
Contributor

csells commented Mar 17, 2021

Perhaps we could have a policy that non-app templates get the suffix, e.g. skeleton is an app template but instead of using federated, we use federated_plugin.

@Hixie
Copy link
Contributor

Hixie commented Mar 17, 2021

We could also drop the underscore, as in "skeletonapp"

@goderbauer
Copy link
Member

#78619 is migrating the other templates to null safety. This one probably also needs to be null save then.

/cc @mit-mit

@brianegan
Copy link
Contributor Author

Hey all -- not 100% sure where we stand with this one. Unfortunately, I do not have any more free time to dedicate to this PR. Therefore, I'll close this one out for now.

Please feel free to pick it up if you'd like to continue with it!

@brianegan brianegan closed this Mar 25, 2021
@Hixie
Copy link
Contributor

Hixie commented Mar 26, 2021

@brianegan what was left to do? wasn't it reviewed and ready to land?

@brianegan
Copy link
Contributor Author

It was ready to roll with the old name or "skeleton," but from what I can gather the naming discussion has not come to a conclusion and the PR has become a bit stale.

Therefore, to wrap up this work, the team needs to choose a name, update the template to support the new name, update the template to support null safety, and rebase the branch against master again as there are now conflicting changes.

@stuartmorgan-g
Copy link
Contributor

If someone is going to pick this up and drive it to completion please let me know soon, because otherwise flutter/packages#295 needs to be reverted as a second breaking change to that package.

@csells
Copy link
Contributor

csells commented Mar 30, 2021

In general, this template has a ton of great practices in a very little bit of code. I'm looking forward to using it in my own projects.

Here's a little bit of review feedback for @filiph as referenced to https://github.com/brianegan/new_flutter_template:

  • the settings page action is hidden behind the debug banner, which could be mitigated with a tooltip
  • I would expect settings to be a dialog on the desktop form factor and not a page to navigate to
  • I normally find myself having a shared Scaffold and AppBar between pages to reduce the duplicated code while providing a consistent UI between pages
  • the item details page has no Settings actions
  • I would expect the strings "Dummy Items" and "Item Details" to be in the arb and for the code to use them
  • all of the tests except the first two in implementation_test.dart have great comments; would like great comments in all tests

@filiph
Copy link
Contributor

filiph commented Apr 15, 2021

Thanks @csells, replies inline:

the settings page action is hidden behind the debug banner, which could be mitigated with a tooltip

We were aware of the issue but decided to prioritize simplicity of code. What do you mean by mitigating the issue with a tooltip?

I would expect settings to be a dialog on the desktop form factor and not a page to navigate to

That would make the code a lot more complex, and isn't necessarily all that clear cut. Desktop apps often open a completely separate window for settings screens, which would make things even harder to implement.

I normally find myself having a shared Scaffold and AppBar between pages to reduce the duplicated code while providing a consistent UI between pages

We explored this. In many cases, AppBar will be meaningfully different between pages. This can be mitigated by creating a custom widget, of course, but that would make the template more complex. And it's something where we don't need to educate. The template educates about things like file structure, but extracting widget is something an intermediate developer is perfectly capable of.

In short, this goes back to the goals of the template: getting out of the way of an intermediate/advanced developer.

the item details page has no Settings actions

That is intentional. In most apps we're seeing, app-level settings aren't accessible from everywhere. Of course, a desktop app has its settings in the menu, so in that sense, it's available everywhere. But again, this is something an intermediate developer should be able to implement themselves. And it allows us to save code that would otherwise need to be understood, modified and/or deleted by the developer.

I would expect the strings "Dummy Items" and "Item Details" to be in the arb and for the code to use them
all of the tests except the first two in implementation_test.dart have great comments; would like great comments in all tests

This is also intentional. We've seen that developers, when starting projects, don't immediately implement i18n everywhere. It really damages perceived developer productivity when, instead of Text('OK') you have to write the i18n equivalent (in several files).

In the template, we show how to go about doing i18n in Flutter, and give you the files in the right places and with the right contents, but don't implement it fully for you. As a developer, you'd be deleting most of it anyway.

@filiph
Copy link
Contributor

filiph commented Apr 29, 2021

ping @csells

@csells
Copy link
Contributor

csells commented Apr 29, 2021

@filiph replies:

re: mitigating with a tooltip: at least a tooltip would show if you move the mouse over in that direction, although obviously that's a pretty lame mitigation.

I'm curious what feedback we get from a wider audience on the rest. Certainly what you have is a big improvement in pointing people down the right path structurally compared to the Counter app.

@Hixie
Copy link
Contributor

Hixie commented May 11, 2021

Is there an updated PR to track work on this?

@filiph
Copy link
Contributor

filiph commented May 11, 2021

Not yet. I'm planning to create it after next week (I/O).

@christopherfujino
Copy link
Contributor

Not yet. I'm planning to create it after next week (I/O).

FYI @filiph the flutter/packages change got reverted flutter/packages#353. You'll need to re-land that in order to land the tool change.

@stuartmorgan-g
Copy link
Contributor

You'll need to re-land that in order to land the tool change.

Given the experience last time, where the images package was left in an unusable state for several months, I would strongly prefer that the updated PR be fully approved and ready to land before doing the changes it the images package. It can be tested locally with version 2.0.0 of the package.

@filiph
Copy link
Contributor

filiph commented Jun 1, 2021

Hey all, I'm unable to push changes to this PR for whatever reason, so I'm recreating it in #83530. That PR is ready for review. I'll ask folks over there.

This PR can stay closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

tool Affects the "flutter" command-line tool. See also t: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

A more complete app template for Flutter