Intro
As a frontend web developer specializing in vue.js. This is my first try to build flutter web app .Let's begin!
first try
Step1: Create a flutter app
To start, create a new Flutter project by running the following command:
flutter create test_demo_app
Note: I have tried flutter create testDemoApp
or flutter create test-demo-app
Flutter CLI does not allow these naming conventions.Therefore I use snake case
to start my project.
Now We can use following command to run and demonstrate my web app
flutter run -d web-server
As You can see it serve on http://localhost:50367.
open this URL in your preferred browser.
Now We build the App
flutter build web
This will generate build/web
folder.
Testing the built App
To test if the build is successful, you can use live-server
.First, install live-server
globally.
npm install --global live-server
Then navigate to the build directory and start the server:
cd build/web
live-server .
Now You'll see the same result as when you ran flutter run -d web-server
.
Note : you'll see index.html
in build/web
.Maybe you'll try live-server index.html
.You may see an empty page.Ensure you run live-server
from the build/web
directory without specifying index.html
.
What is alternative? Using similar package in Dart?
If you prefer using a package in Dart rather than live-server
, you can try webdev
You can install it globally with the following command.
dart pub global activate webdev
Then in you project folder,run:
webdev serve
Troubleshooting webdev
If you encounter problems when trying webdev
,It might be because the global installation is saved in the .pub-cache
folder.You need to add the following path to your .zshrc
or .bashrc
:
export PATH="$PATH":"$HOME/.pub-cache/bin"
Still having problem ?
If your CLI tool indicates that you need a dependency on build_runner
and build_web_compilers
in pubspec.yaml
You can edit pubspec.yaml
and retry this.
Here is an example of pubspec.yaml
:
name: your_project_name
description: A new Flutter project
publish_to: 'none' # Remove this line if you want to publish to pub.dev
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
build_runner: ^2.4.0 // add this to pubspec.yaml
build_web_compilers: ^4.0.4 // and then add this to pubspec.yaml
Now try webdev serve
again.
Top comments (0)