Giter Club home page Giter Club logo

website's Introduction

Flutter logo

Flutter documentation website

The documentation site for the Flutter framework, built with Eleventy and hosted on Firebase.

Build Status OpenSSF Scorecard

Issues, bugs, and requests

We welcome contributions and feedback on our website. Please file a request in our issue tracker or create a pull request. For simple changes (such as tweaking some text), it's easiest to make changes using the GitHub UI.

If you have an issue with the API docs on api.flutter.dev, please file those issues on the flutter/flutter repo, not on this (flutter/website) repo. The API docs are embedded in Flutter's source code, so the engineering team handles those.

Before you submit a PR

We love it when the community gets involved in improving our docs! But here are a few notes to keep in mind before you submit a PR:

  • When triaging issues, we sometimes label an issue with the tag PRs welcome. But we welcome PRs on other issues as well— it doesn't have to be tagged with that label.
  • Please don't run our docs through Grammarly (or similar) and submit those changes as a PR.
  • We follow the Google Developer Documentation Style Guidelines — for example, don't use "i.e." or "e.g.", avoid writing in first person, and avoid writing in future tense. You can start with the style guide highlights or the word list, or use the search bar that's at the top of every style guide page.

We truly thank you for your willingness and helpfulness in keeping the website docs up to date!

Contributing

To update this site, fork the repo, make your changes, and generate a pull request. For small, contained changes (such as style and typo fixes), you probably don't need to build this site. Often you can make changes using the GitHub UI. If needed, we can stage the changes automatically in your pull request.

Important

If you are cloning this repository locally, follow the below instruction on cloning with its submodule.

If your change involves code samples, adds/removes pages, or affects navigation, do consider building and test your work before submitting.

If you want or need to build the site, follow the steps below.

Build the site

For changes beyond simple text and CSS tweaks, we recommend running the site locally to enable an edit-refresh cycle.

Get the prerequisites

Install the following tools to build and develop the site:

Flutter

The latest stable release of Flutter, which includes Dart, is required to build the site and run its tooling. If you don't have Flutter or need to update, follow the instructions at Install Flutter or Upgrading Flutter.

If you already have Flutter installed, verify it's on your path and already the latest stable version:

flutter --version

Node.js

The latest stable LTS release of Node.js is required to build the site. If you don't have Node.js or need to update, download your computer's corresponding version and follow the instructions from the Node.js download archive. If you prefer, you can use a version manager such as nvm, and run nvm install from the repository's root directory.

If you already have Node installed, verify it's available on your path and already the latest stable version (currently 20.10 or later):

node --version

If your version is out of date, follow the update instructions for how you originally installed it.

Clone this repo and its submodules

Note

This repository has git submodules, which affects how you clone it. The GitHub documentation has general help on forking and cloning repos.

If you're not a member of the Flutter organization, we recommend you create a fork of this repo under your own account, and then submit a PR from that fork.

Once you have a fork (or you're a Flutter org member), choose one of the following submodule-cloning techniques:

  1. Clone the repo and its submodule at the same time using the --recurse-submodules option:

    git clone --recurse-submodules https://github.com/flutter/website.git
  2. If you've already cloned the repo without its submodule, then run this command from the root of the repository:

    git submodule update --init --recursive

Note

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

git pull && git submodule update --init --recursive

Set up your local environment and serve changes

Before you continue setting up the site infrastructure, verify the correct versions of Flutter and Node.js are set up and available by following the instructions in Get the prerequisites.

  1. Optional: After cloning the repo and its submodules, create a branch for your changes:

    git checkout -b <BRANCH_NAME>
  2. From the root directory of the repository, fetch the site's Dart dependencies.

    dart pub get
  3. Install pnpm using your preferred installation method. pnpm is an alternative, efficient package manager for npm packages. If you already have pnpm, verify you have the latest stable version. We recommend using corepack to install and manage pnpm versions, since it is bundled with most installations of Node.

    If you haven't used corepack before, you'll need to first enable it with corepack enable. Then, to install the correct pnpm version, from the root directory of the repository, run corepack install:

    corepack enable
    corepack install
  4. Once you have pnpm installed and setup, fetch the site's npm dependencies using pnpm install. We highly recommend you use pnpm, but you can also use npm.

    pnpm install
  5. From the root directory, run the dash_site tool to validate your setup and learn about the available commands.

    ./dash_site --help
  6. From the root directory, serve the site locally.

    ./dash_site serve

    This command generates and serves the site on a local port that's printed to your terminal.

  7. View your changes in the browser by navigating to http://localhost:4000.

    Note the port might be different if 4000 is taken.

    If you want to check the raw, generated HTML output and structure, view the _site directory in a file explorer or an IDE.

  8. Make your changes to the local repo.

    The site should automatically rebuild on most changes, but if something doesn't update, exit the process and rerun the command. Improvements to this functionality are planned. Please open a new issue to track the issue if this occurs.

  9. Commit your changes to the branch and submit your PR.

    If your change is large, or you'd like to test it, consider validating your changes.

Tip

To find additional commands that you can run, run ./dash_site --help from the repository's root directory.

Validate your changes

Check documentation and example code

If you've made changes to the code in the /examples or /tool directories, commit your work, then run the following command to verify it is up to date and matches the site standards.

./dash_site check-all

If this script reports any errors or warnings, then address those issues and rerun the command. If you have any issues, leave a comment on your issue or pull request, and we'll try our best to help you. You can also chat with us on the #hackers-devrel channel on the Flutter contributors Discord!

Refresh code excerpts

A build that fails with the error Error: Some code excerpts needed to be updated! means that one or more code excerpts in the markdown file aren't identical to the code in the corresponding .dart file.

To resolve this error, from the root of the website directory, run ./dash_site refresh-excerpts.

For more information see Code excerpts .

[Optional] Deploy to a staging site

Submitted pull requests can be automatically staged by a site maintainer. If you'd like to stage the site yourself though, you can build a full version and upload it to Firebase.

  1. If you don't already have a Firebase project,
  • Navigate to the Firebase Console and create your own Firebase project (for example, flutter-dev-staging).

  • Head back to your local terminal and verify that you are logged in.

    firebase login
  • Ensure that your project exists and activate that project:

    firebase projects:list
    firebase use <your-project>
  1. From the root directory of the repository, build the site:

    ./dash_site build

    This will build the site and copy it to your local _site directory. If that directory previously existed, it will be replaced.

  2. Deploy to your activated Firebase project's default hosting site:

    firebase deploy --only hosting
  3. Navigate to your PR on GitHub and include the link of the staged version. Do consider adding a reference to the commit you staged, so that reviewers know if any further changes have been made.

website's People

Contributors

abarth avatar atsansone avatar brianegan avatar chalin avatar chunhtai avatar dependabot[bot] avatar devoncarew avatar domesticmouse avatar fertolg avatar filiph avatar goderbauer avatar gspencergoog avatar hixie avatar jayoung-lee avatar jmagman avatar johnpryan avatar kenzieschmoll avatar khanhnwin avatar kwalrath avatar legalcodes avatar micpap25 avatar miquelbeltran avatar mit-mit avatar parlough avatar piedcipher avatar piinks avatar qchong avatar sethladd avatar sfshaza2 avatar xster avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

website's Issues

first `flutter start` + new phone == Unexpected failure parsing device information from adb output

This is the very first time I enabled developer mode on my phone, and the very first time I tried pushing a flutter demo onto the phone. I apparently wasn't fast enough allowing the USB debugging, and even though I did tap the checkbox and tapped allow, the flutter start command errored like this:

Seths-iMac:my_app sethladd$ flutter start
Downloading Sky Snapshot from the cloud, one moment please...
Downloading Sky Shell from the cloud, one moment please...
warning: Unexpected failure parsing device information from adb output:
84B7N15A07007628       unauthorized usb:437387264X
Please report a bug at http://flutter.io/
severe: Unable to run application - no connected devices.

Maybe we can either wait longer, or check for this error and interpret it as "Please allow USB debugging and try again" ?

Tutorial: how to access Android services like Camera

Assuming some services come pre-bundled (I don't need to write a mojom), it would be helpful to show our new users how that can:

  • find what services are available
  • what it means to access a service
  • how to use one of the services as an example (e.g. camera)

adjust title color?

The Flutter site and the API docs have different primary colors.

screen shot 2015-09-26 at 4 14 04 pm

screen shot 2015-09-26 at 4 14 14 pm

Are we committed to the current Flutter color? I'd like to make the colors the same - either the Flutter color or a new third color.

A better way to explain how Counter "delegates" ?

From http://flutter.io/tutorial/

"Notice how Counter now delegates responsibility for incrementing and displaying the counter value down to CounterIncrementor and CounterDisplay, respectively."

Is delegates the right word here? Looking at Counter, all it does is create _CounterState.

Maybe: "Notice how we created two new stateless components, cleaning separating the concerns of displaying the counter (CounterDisplay) and changing the counter (CounterIncrementor)."

Thoughts?

analysis issues w/ the snippets

Related to #22 - the build failure can be seen here: https://travis-ci.org/flutter/flutter.github.io#L271.

[warning] The method 'debugDumpRenderTree' is not defined for the class 'FlutterBinding' at example/rendering_md_1.dart, line 401.
[warning] Undefined class 'ShrinkWrapWidth' at example/tutorial_md_5.dart, line 220.

[warning] The named parameter 'child' is not defined at example/tutorial_md_5.dart, line 220.
[warning] The named parameter 'child' is not defined at example/tutorial_md_6.dart, line 299.
[warning] The named parameter 'child' is not defined at example/tutorial_md_7.dart, line 417.

@abarth @Hixie

Request for a simple "counter" example in Tutorial

Working through the tutorial, I felt myself really wanting to see the most basic example of some UI changing its state. Perhaps a "counter" with a button, which when pressed, updates the count of some text.

IMHO, the Shopping Cart is a bit too complex as an example to show why we need StatefulComponents.

I'd be happy to help write this section if someone wants to contribute the canonical, simple "counter".

Thanks!

Doc: "Flutter for the react.js developer"

It would be interesting to write a document that specifically talks to JavaScript and react.js developers. There are enough similarities and differences that we could probably use a doc for this.

`flutter --version` runs pub get

Did we know that running flutter --version right after a fresh install will run pub get?

Seths-iMac:flutter sethladd$ flutter --version
Updating flutter tool...
Resolving dependencies... (6.6s) 
+ analyzer 0.26.3
+ archive 1.0.20
+ args 0.13.2
+ asn1lib 0.4.1
+ async 1.4.0
+ barback 0.15.2+7
+ bignum 0.0.7
+ charcode 1.1.0
+ cipher 0.7.1
+ collection 1.2.0
+ convert 1.0.1
+ crypto 0.9.1
+ csslib 0.12.2
+ fixnum 0.9.1+2 (0.10.2 available)
+ flx 0.0.10 from path ../flx
+ glob 1.0.5
+ html 0.12.2
+ http_multi_server 1.3.2
+ http_parser 1.1.0
+ logging 0.11.2
+ matcher 0.12.0+1
+ mime 0.9.3
+ mockito 0.10.1 (0.11.0 available)
+ mustache4dart 1.0.10
+ package_config 0.1.3
+ path 1.3.7
+ plugin 0.1.0
+ pool 1.2.1
+ pub_semver 1.2.3
+ shelf 0.6.4+2
+ shelf_static 0.2.3+1
+ shelf_web_socket 0.0.1+4
+ source_map_stack_trace 1.0.4
+ source_maps 0.10.1
+ source_span 1.2.1
+ stack_trace 1.5.0
+ string_scanner 0.1.4
+ test 0.12.5+2
+ typed_data 1.1.1
+ utf 0.9.0+2
+ watcher 0.9.7
+ yaml 2.1.7
Downloading archive 1.0.20...
Downloading mockito 0.10.1...
Downloading test 0.12.5+2...
Downloading analyzer 0.26.3...
Downloading plugin 0.1.0...
Downloading html 0.12.2...
Downloading stack_trace 1.5.0...
Downloading shelf_web_socket 0.0.1+4...
Downloading yaml 2.1.7...
Downloading bignum 0.0.7...
Downloading glob 1.0.5...
Downloading pool 1.2.1...
Downloading pub_semver 1.2.3...
Downloading path 1.3.7...
Downloading package_config 0.1.3...
Downloading asn1lib 0.4.1...
Downloading collection 1.2.0...
Downloading mustache4dart 1.0.10...
Downloading http_parser 1.1.0...
Downloading convert 1.0.1...
Downloading typed_data 1.1.1...
Downloading source_span 1.2.1...
Downloading cipher 0.7.1...
Downloading async 1.4.0...
Downloading shelf 0.6.4+2...
Downloading fixnum 0.9.1+2...
Downloading watcher 0.9.7...
Downloading barback 0.15.2+7...
Downloading csslib 0.12.2...
Downloading logging 0.11.2...
Changed 42 dependencies!
Precompiling executables... 
Loading source assets... 
Precompiled archive:tar.
Precompiled test:test.
flutter version 7be58b1ae0d4bddd181b3f44f509721ab070177f

This may be by design, since we don't ship snapshots. Just double checking this is expected.

List pre-reqs up top in Getting Started

e.g. do I need a phone? What kind, and version(s)? What OS and what version(s)? Any cables? Do I need other software like XCode?

maybe even show a picture to illustrate the setup.

mention a11y, i18n, l10n

We have plans, and are building the core framework with those plans very much in mind, but are still building core framework components and so haven't yet implemented those plans.

"Flutter has four main components" in FAQ only lists 3, other issues

Flutter has four main components:

a heavily optimized, mobile-first 2D rendering engine (with excellent support for text)
a functional-reactive framework (optional, you can bring-your-own framework)
a set of Material Design widgets (optional, you can bring-your-own widgets) libraries, tools, and a plugin for Atom

4 components, but 3 bullet points? As well, a comma needed "widgets, libraries, tools, and a".

Search doesn't provide feedback if results not found

Steps to Reproduce

  1. Go to the docs page
  2. Type yaml into the search box
  3. Hit return

Actual Result

Nothing happens

Expected Result

A search-results-page appears for yaml. Since the docs search seems to be entirely powered by a precalculated index, perhaps an autocomplete suggestion that reads "There isn't a docs page for yaml," would suffice.

Better explanations about installation of adb for linux users

On Ubuntu 14.04 (64b TLS) the adb provided via apt is too old.
So I followed the link provided in getting started and downloaded the SDK Tools but it's not obvious what should be done next.

It could be worth to mention somewhere :

  • launch tools/android
  • install (only?) Android SDK Platfrom-tools
  • add platform-tools/ to your PATH
  • check that adb devices -l lists your device

On this last item I got an misleading error adb: No such file or directory (or something like that). I figured out that it was because I needed to install lib32stdc++6 package (Actually there's a section Troubleshooting Ubuntu on the Installing the Stand-alone SDK Tools that mentions this package but I did not read it because it was under a section Here are the steps to install Java ) . It would also be nice to mention that issue too.

Doc: Dart for the JavaScript developer

There's room for a doc that talks about the different syntax and features of Dart, for a JavaScript developer. The places where Dart diverges should be explicitly called out.

Requesting API docs for dart:ui

Sitting here with my son :) trying to build a game with Flutter. I think we want basic dart:ui but I'm not actually sure what that is, to be honest. I see we're generating docs for package:flutter but I didn't see docs for dart:ui.

Are they hosted somewhere? Related, are there any other dart: libraries that I would want to check out?

Thanks!

Architecture Diagram request: How framework works

Hi,

The architecture diagrams are fantastic. I'd also love to learn a little more about how the framework manages all the widgets. I see a widget lifecycle diagram, but I'm missing a picture about how the higher-level flow looks like. For example, an input event comes in (e.g., tap) and then... change state in widget, calculate some diff in the tree, ... ?

Thanks!

Build failing due to old/incorrect example

From travis:

1 issue found; analyzed 10 source files in 13.3s.
[warning] The argument type '(BuildContext, Product, int) → dynamic' cannot be assigned to the parameter type 'ItemBuilder' at example/tutorial_md_8.dart, line 472.
The command "./tool/travis.sh" exited with 1.

Add some screenshots

  • on the homepage
  • in the widget gallery
  • in the tutorial, showing what each snippet should look like

Tutorial: explain routes

Tracking issue. There's a few small mentions in the existing tutorial, but routes might warrant more explanation.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.