Upgrading from package:flutter_web to the Flutter SDK
This guide is for updating projects that currently use package:flutter_web
to use the Flutter SDK.
At the time of writing (September 13th, 2019), you'll need to switch to the dev
channel to use web support in the Flutter SDK.
$ flutter channel dev
$ flutter upgrade
You can verify your flutter version using:
$ flutter version
Flutter 1.10.1 • channel dev • https://github.com/flutter/flutter.git
Framework • revision ce45c2d3e6 (7 days ago) • 2019-09-06 20:11:41 -0400
Engine • revision b9ce2500d9
Tools • Dart 2.5.0 (build 2.5.0-dev.4.0 be66176534)
To enable web support you'll need to run the following command:
flutter config --enable-web
You might have a web/main.dart
file that looks like:
import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:example/main.dart' as app;
main() async {
await ui.webOnlyInitializePlatform();
app.main();
}
Remove these files. An equivalent web/
directory will be created automatically in the next step.
Flutter has a web runner that can be initialized using the flutter create
command:
flutter create .
This should create a new web/index.html
for your project.
Change:
dependencies:
flutter_web: any
flutter_web_ui: any
to:
dependencies:
flutter:
sdk: flutter
Remove the FontManifest.json
file and specify the fonts the standard way. See this cookbook article for an example.
If you're using FontManifest.json
to enabled Material Design icons as described here, you can remove it and add the following to your pubspec.yaml
:
flutter:
uses-material-design: true
Assets should be placed in a top-level assets/
directory and specified in the pubspec.yaml
:
flutter:
assets:
- preview.png
Alternatively, an entire top-level directory can be used, for example, my_assets
. In this configuration, the directory must be specified in the pubspec:
flutter:
assets:
- my_assets/
Any Dart files using flutter_web
should use package:flutter
instead. For example:
import 'package:flutter_web/material.dart';
import 'package:flutter_web_ui/ui.dart';
Changes to:
import package:'flutter/material.dart';
import 'dart:ui';
Instead of using webdev serve
or pub run build_runner serve
, use flutter run -d chrome
- Home of the Wiki
- Roadmap
- API Reference (stable)
- API Reference (main)
- Glossary
- Contributor Guide
- Chat on Discord
- Design documents
- Code of Conduct
- Issue triage reports (latest)
- Our Values
- Tree hygiene
- Issue hygiene and Triage
- Style guide for Flutter repo
- Project teams
- Contributor access
- What should I work on?
- Popular issues
- Running and writing tests
- Release process
- Flutter Framework Gardener Rotation
- Rolling Dart
- Manual Engine Roll with Breaking Commits
- Updating Material Design Fonts & Icons
- Postmortems and Retrospectives
- Hotfix Documentation Best Practices
- In case of emergency
- Landing Changes With Autosubmit
- Setting up the Framework development environment
- The Framework architecture
- API Docs code block generation
- Running examples
- Using the Dart analyzer
- The flutter run variants
- Test coverage for package:flutter
- Writing a golden-file test for package:flutter
- Managing template image assets
- Setting up the Engine development environment
- Compiling the engine
- Debugging the engine
- Using Sanitizers with the Flutter Engine
- Testing the engine
- The Engine architecture
- Flutter's modes
- Crashes
- more...
- Setting up the Packages development environment
- Plugins and Packages repository structure
- Contributing to Plugins and Packages
- Understanding Packages tests
- Plugin Tests
- Releasing a Plugin or Package
- more...