flutter 项目创建

可以使用Android studio 新建flutter项目，或者VS code进行配置后也可开发flutter项目。
此外，在终端执行命令新建flutter项目，在 flutter-helloworld中，已经说过如何使用命令选择oc和java新建项目，现在来看看flutter 终端命令新建项目。

$flutter create ProjectName
$cd ProjectName
$flutter run

flutter 项目就运行了，这里注意，看看自己模拟器哪个打开，将会运行哪个,我此时是iOS模拟器处于开启状态。

 flutter devices

看一下当前哪些设备处于可运行状态
我的运行结果：

4 connected devices:
iPhone 6 (mobile) • d6eded4a1d4f77efec81e218e0113bd6c3443ac5 • ios
• iOS 12.5.5 16H62
iPhone 13 Pro Max (mobile) • 8163972C-B3CA-4B8D-B666-7EA1C258E310 • ios
• com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
macOS (desktop) • macos •
darwin-x64 • macOS 11.6 20G165 darwin-x64
Chrome (web) • chrome •
web-javascript • Google Chrome 101.0.4951.54

此时，如果你想运行 web，可执行命令：

flutter run -d chrome

如果执行命令“flutter run -d macos”，你将得到效果如下图：

截屏2022-05-11 下午5.14.31.png

此时，妈耶！不得不感叹flutter的强大，这是android、iOS、web和macos 四个平台呀。然后继续阅读官网，发现，flutter对macos、Windows、Linux都很友好的提供了桌面支持。
如果为现有flutter项目添加web支持，只需要如下操作：

截屏2022-05-11 下午5.17.12.png

这个稍后有时间尝试吧。

跟着官网实现第一个页面
VS code 新建demo0；重新写main.dart 代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget{
  const MyApp({Key?key}) :super(key: key);

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Welcom to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcom to Flutter')
          ),
        body: const Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
  
}

接着在项目根目录下安装第一个package

$flutter pub add english_words 

安装成功效果如下图：

截屏2022-05-11 下午6.36.35.png

看到pubspec.yaml配置文件出现 english_words