mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
9766a97c54
<!-- Thanks for filing a pull request! Reviewers are typically assigned within a week of filing a request. To learn more about code review, see our documentation on Tree Hygiene: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md --> ## Add --web-define option for runtime variable injection in Flutter web templates This PR adds support for injecting environment-specific variables into Flutter web templates during development and build processes through a new `--web-define` command-line option. ### What this changes **Before**: Developers had to manually edit HTML templates or use build-time workarounds to inject environment-specific values (API URLs, feature flags, etc.) into Flutter web applications. **After**: Developers can now use `--web-define KEY=VALUE` to inject variables directly into web templates using `{{VARIABLE_NAME}}` placeholders. ### Key features - **Template variable substitution**: Support for `{{VARIABLE_NAME}}` placeholders in `index.html` and `flutter_bootstrap.js` - **Runtime validation**: Throws clear errors when required variables are missing with helpful suggestions - **Command-line integration**: Works with both `flutter run` and `flutter build web` commands - **Multiple variable support**: Can define multiple variables in a single command - **Built-in variable protection**: Ignores Flutter's built-in template variables during validation ### Usage examples ```bash # Development with API configuration flutter run -d chrome --web-define=API_URL=https://dev-api.example.com --web-define=DEBUG_MODE=true # Production build with environment variables flutter build web --web-define=API_URL=https://api.example.com --web-define=ANALYTICS_ID=GA-123456 --web-define=DEBUG_MODE=false # Multiple environments flutter run -d chrome --web-define=ENV=staging --web-define=FEATURE_X=enabled ``` ### Template usage In your `web/index.html`: ```html <script> window.config = { apiUrl: '{{API_URL}}', environment: '{{ENV}}', debugMode: {{DEBUG_MODE}} }; </script> ``` ### Error handling If a variable is missing, the tool provides clear feedback: ``` Missing web-define variable: API_URL Please provide the missing variable using: flutter run --web-define=API_URL=VALUE or flutter build web --web-define=API_URL=VALUE ``` ## Issues fixed Fixes https://github.com/flutter/flutter/issues/127853 ## Additional Usage Examples ### Environment-Specific Configurations (Flavors) ```bash # Development flutter run -d chrome --web-define=ENV=dev --web-define=API_URL=http://localhost:3000 --web-define=DEBUG=true # Production flutter build web --web-define=ENV=prod --web-define=API_URL=https://api.example.com --web-define=DEBUG=false ``` **Template:** ```html <script> window.config = { environment: '{{ENV}}', apiUrl: '{{API_URL}}', debugMode: {{DEBUG}} }; </script> ``` ### Dynamic Asset Loading ```bash flutter build web --web-define=CDN_URL=https://cdn.example.com --web-define=LOGO_PATH=/assets/logo.png ``` **Template:** ```html <link rel="icon" href="{{CDN_URL}}{{LOGO_PATH}}"> <link rel="stylesheet" href="{{CDN_URL}}/styles/theme.css"> ``` ### Analytics Integration ```bash flutter build web --web-define=GA_ID=G-XXXXXXXXXX --web-define=SENTRY_DSN=https://xxx@sentry.io/123 ``` **Template:** ```html <script async src="https://www.googletagmanager.com/gtag/js?id={{GA_ID}}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{{GA_ID}}'); </script> ``` ### Feature Flags ```bash flutter run -d chrome --web-define=FEATURE_X=true --web-define=FEATURE_Y=false ``` **Template:** ```html <script> window.features = { featureX: {{FEATURE_X}}, featureY: {{FEATURE_Y}} }; </script> ``` ### Multi-Tenant/White-Label Apps ```bash flutter build web --web-define=TENANT=acme --web-define=PRIMARY_COLOR=#FF5733 --web-define=LOGO_URL=https://cdn.acme.com/logo.png ``` **Template:** ```html <head> <title>{{TENANT}} Portal</title> <link rel="icon" href="{{LOGO_URL}}"> <style>:root { --primary: {{PRIMARY_COLOR}}; }</style> </head> ``` ### Backend Service URLs ```bash flutter build web \ --web-define=API_URL=https://api.example.com \ --web-define=WS_URL=wss://ws.example.com \ --web-define=AUTH_DOMAIN=auth.example.com ``` **Template:** ```html <script> window.services = { api: '{{API_URL}}', websocket: '{{WS_URL}}', auth: '{{AUTH_DOMAIN}}' }; </script> ``` ### SEO & Meta Tags ```bash flutter build web --web-define=APP_TITLE="My App" --web-define=APP_DESC="Description" --web-define=OG_IMAGE=https://example.com/og.png ``` **Template:** ```html <head> <title>{{APP_TITLE}}</title> <meta name="description" content="{{APP_DESC}}"> <meta property="og:title" content="{{APP_TITLE}}"> <meta property="og:image" content="{{OG_IMAGE}}"> </head> ``` ### Build Automation ```json { "scripts": { "dev": "flutter run -d chrome --web-define=ENV=dev --web-define=API_URL=http://localhost:3000", "prod": "flutter build web --web-define=ENV=prod --web-define=API_URL=https://api.example.com" } } ``` ### Important Notes - **Security**: Never expose secrets via `--web-define` (client-side only) ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md --------- Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: Ben Konyi <bkonyi@google.com> Co-authored-by: Mouad Debbar <mdebbar@google.com>
