Skip to content
Flutter web site
CSS HTML JavaScript Ruby Dart Shell Dockerfile
Branch: master
Clone or download
LongCatIsLooong and sfshaza2 Add new cupertino widgets to the catalog (#3555)
* Add 2 new cupertino widgets

* Add images
Latest commit 57d416e Jan 17, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Don't commit pubspec.lock files for tools and examples (#3112) Oct 16, 2019
examples Fixes #3481 and #3488 (#3491) Jan 3, 2020
firebase_config default jekyll build location, default to staging server on non-maste… ( Apr 28, 2016
flutter @ 27321eb Consistency between sidenav and page names. (#3442) Dec 18, 2019
site-shared @ a480c72 Upgrade ruby and gems (#3189) Nov 1, 2019
src Add new cupertino widgets to the catalog (#3555) Jan 18, 2020
tool Convert cookbook examples to DartPad (#3313) Dec 20, 2019
.cirrus-disabled.yml Disable Cirrus CI by renaming config file (#1221) Sep 4, 2018
.firebaserc Merge add-to-app branch to master without sidenav (#3344) Dec 5, 2019
.gitignore Update /desktop (#3395) Dec 11, 2019
.gitmodules Site-shared refresh, switch to master (#3165) Oct 25, 2019
.spelling Add implicit animations codelab (#3118) Oct 29, 2019
.travis.yml Don't check links twice and don't deploy from a cron build (#3154) Oct 24, 2019
AUTHORS Update platform-channels.md (#2939) Aug 27, 2019
CONTRIBUTING.md Fixing links. (#2685) May 22, 2019
Gemfile chore: tweak config and update setup instructions (#1161) Aug 17, 2018
Gemfile.lock chore: tweak config and update setup instructions (#1161) Aug 17, 2018
LICENSE Add LICENSE file (#2231) Jan 17, 2019
README.md update all embeds to non-experimental, unforked versions (#3269) Nov 19, 2019
_config.yml Update Gallery link (#3418) Dec 15, 2019
_config_dev.yml Fixing more links (#1737) Nov 15, 2018
_config_now.yml Add note to _config_now.yml (#2343) Feb 4, 2019
analysis_options.yaml chore: add top-level analysis_options file to exclude submodules, etc ( Jan 3, 2019
build.excerpt.yaml Get started codelab: use code excerpter to sync code (#2027) Dec 13, 2018
firebase.json Add new breaking change design doc (#3545) Jan 14, 2020
gulpfile.js Support site-wise image compression via gulp task (#2190) Jan 9, 2019
package.json Upgrade Node, refresh submodules, firebase-tools (#3188) Nov 1, 2019
pubspec.yaml Adding package dependencies for tools/* (#2665) May 14, 2019

README.md

Flutter's website Flutter logo

Build Status

Issues, bugs, and requests

We welcome contributions and feedback on our website! Please file a request in our issue tracker and we'll take a look.

For simple changes (such as to CSS and text), you probably don't need to build this site. Often you can make changes using the GitHub UI.

If you want/need to build, read on.

Before you build this site

1. Get the prerequisites

Install the following tools if you don't have them already.

  • bash, the Bourne shell. These instructions assume you're using bash -- setup might not work if you use another shell.
  • nvm, the Node Version Manager.
  • rvm, the Ruby Version Manager.
  • Flutter
  • Dart SDK

IMPORTANT: Follow the installation instructions for each of the tools carefully. In particular, configure your shell/environment so that the tools are available in every terminal/command window you create.

2. Clone this repo and its submodules

NOTE: This repo has git submodules, which affects how you clone it.

To clone this repo, follow the instructions given in the GitHub help on Cloning a repository, and choose one of the following submodule-cloning techniques:

  • Clone this repo and its submodule at the same, use the --recurse-submodules option:
    git clone --recurse-submodules https://github.com/flutter/website.git
  • If you've already cloned this repo without its submodule, then run this command from the repo root:
    git submodule update --init --remote

NOTE: At any time during development you can use the submodule command to refresh submodules:

git pull; git submodule update --init --remote

3. Run installation scripts

NOTE: It is safe to (re-)run all of the commands and scripts given below even if you already have the required packages installed.

Open a bash terminal/command window and execute the following commands:

  1. cd <path-to-this-repo>   # change to root of this repo
  2. source ./tool/env-set.sh   # initialize environment variables; install/use required Node & Ruby version
  3. ./tool/before-install.sh   # install core set of required tools
  4. ./tool/install.sh   # install everything else needed to build this site

IMPORTANT:

  • Any time you create a new terminal/command window to work on this repo, repeat steps 1 and 2 above.
  • If you upgrade Dart then rerun all of the steps above.

Developing

  1. Create a branch.

  2. Make your changes.

  3. Test your changes by serving the site locally. Run either one of these commands:

    • ./tool/serve.sh (can also run via npm run start)

    or

    • bundle exec jekyll serve --incremental --watch --livereload --port 4002

      Note: Unless you're editing files under site-shared, you can safely ignore ERROR: directory is already being watched messages. For details, see #1363.

      Note: The first time you run either one of these commands, jekyll takes anywhere between 10 - 20 seconds to generate static content inside the _sites directory. If you try to verify the site locally but aren't able to see the content right away, wait 20 seconds before stopping the server or concluding that something is wrong.

  4. Prior to submitting, validate site links:
    ./tool/shared/check-links.sh

TIP: Sometimes Jekyll gets confused and seems to be out-of-sync. (This might happen, for example, when you pull from master and lots of files have moved.) To fix Jekyll, stop the serve.sh script and remove the generated site files: hand, and then restart the serve.sh script:

npm run clean OR rm -Rf ./_site/* ./.jekyll*

Next, restart the serve.sh script:

npm run start OR ./tool/serve.sh

Creating and/or editing DartPad example code

At the time of writing this (10/22/19) most of the code used to create DartPad examples is hosted on GitHub. However, this repo also contains some .dart files responsible for DartPad example code.

DartPad example code in GitHub gists

A typical DartPad example takes the form of an iframe, e.g. within a codelab's markdown file:

<iframe
  src="{{site.custom.dartpad.embed-flutter-prefix}}?id=d7b09149ffee2f0535bb0c04d96987f5"
  style="border: 1px solid lightgrey; margin-top: 10px; margin-bottom: 25px"
  frameborder="no" height="500" width="100%"
></iframe>

This iframe depends on the following GitHub gist url:

https://gist.github.com/d7b09149ffee2f0535bb0c04d96987f5

For detailed instructions on how to use this approach to DartPad examples, see the DartPad embedding guide.

DartPad example code in this repo - src/_packages/dartpad_picker

Some DartPad example code remains in .dart files in this repo, and must be compiled via src/_packages/dartpad_picker/compile.sh. For an example, consult src/_packages/dartpad_picker/web/dartpad_picker_main.dart.

In order to create or change example code using dartpad_picker, you must regenerate the JavaScript:

  cd src/_packages/dartpad_picker
  ./compile.sh

Deploy to a staging site

You can deploy your local edits to a personal staging site as follows (steps 1 and 2 need to be done only once):

  1. In the Firebase Console, create your own Firebase project (e.g. 'mit-flutter-staging')

  2. Tell Firebase about that project with the firebase use command:

    $ npx firebase use --add
    ? Which project do you want to add? <select the project you created>
    ? What alias do you want to use for this project? (e.g. staging) my-foo
  3. Tell Firebase that you want to deploy to staging:

    $ npx firebase use my-foo
    Now using alias staging (<your project name>)
  4. Tell Firebase to execute deployment of your project:

$ npx firebase deploy

Your personal version of the Flutter website is now deployed to Firebase.

Alternatively, you can skip the previous steps and just use the deploy script:

$ ./tool/shared/deploy.sh --local my-foo

=== Deploying to '<your project name>'...

i  deploying hosting
i  hosting: preparing _site directory for upload...
✔  hosting: 213 files uploaded successfully
i  starting release process (may take several minutes)...

✔  Deploy complete!

Deploying to the official site

Usually, official site deploys are performed by Travis. In the event that you need to manually deploy, use the deploy script and the default project:

./tool/shared/deploy.sh --local --robots ok default

Writing for flutter.dev

The site-shared repo contains infrastructure shared by most of our Dart and Flutter websites. As a result, we've moved some of content of this README to the docs directory in the shared repo.

For more information on using/writing for this repo, refer to the following docs:

Also check out the site-shared wiki:

You can’t perform that action at this time.