让前端开发者失业的技术，Flutter Web初体验

VS code的设置在extension-》搜索Flutter和Dart，安装之后重启。

7、运行 flutter doctor

打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装：

flutter doctor 

这是一个漫长的过程，flutter会检测你的环境，并安装所有的依赖，直至：No issues found！，如果有缺失，会就会再那一项前面打x。你需要一一解决。

一切就绪！

1、启动 VS Code

调用 View>Command Palette…（快捷键ctrl+shift+p）

输入 ‘flutter’, 然后选择 ‘Flutter: New web Project’

输入 Project 名称 (如flutterweb), 然后按回车键

指定放置项目的位置，然后按蓝色的确定按钮

等待项目创建继续，并显示main.dart文件。到此，一个Demo创建完成。

我们看到了熟悉的HTML文件以及项目入口文件main.dart。

web目录下的index.html是项目的入口文件。main.dart初始化文件，图片相关资源放在此目录。

lib目录下的main.dart，是主程序代码所在的地方。

每个pub包或者Flutter项目都包含一个pubspec.yaml。它包含与此项目相关的依赖项和元数据。

analysis_options.yaml是配置项目的lint规则。

/dart_tool 是项目打包运行编译生成的文件，页面主程序main.dart.js就在其中。

2、调试Demo，打开命令行，进入到项目根目录，执行：

webdev flutterweb 

编译、打包完成之后，自动启动（或者按F5）默认浏览器，看一下转换后的HTML页面结构：

lib/main.dart是主程序，源码非常简单，整个页面用widgets堆叠而成，区别于传统的html和css。

import 'package:flutter_web/material.dart'; 
 
void main() => runApp(MyApp()); 
 
class MyApp extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      title: 'Flutter Demo', 
      theme: ThemeData( 
        primarySwatch: Colors.blue, 
      ), 
      home: MyHomePage(title: 'Flutter Demo Home Page'), 
    ); 
  } 
} 
 
class MyHomePage extends StatelessWidget { 
  MyHomePage({Key key, this.title}) : super(key: key); 
 
  final String title; 
 
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        title: Text(title), 
      ), 
      body: Center( 
        child: Column( 
          mainAxisAlignment: MainAxisAlignment.center, 
          children: <Widget>[ 
            Text( 
              'Hello, World!', 
            ), 
          ], 
        ), 
      ),  
    ); 
  } 
} 

区别与flutter App应用，我们导入的是flutter_web/material.dart库而非flutter/material.dart，这是因为目前App的接口并非和Web的完全通用，不过随着谷歌开发的继续，它们最终会被合并到一块。

（编辑：惠州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!