可以使用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”,你将得到效果如下图:
此时,妈耶!不得不感叹flutter的强大,这是android、iOS、web和macos 四个平台呀。然后继续阅读官网,发现,flutter对macos、Windows、Linux都很友好的提供了桌面支持。
如果为现有flutter项目添加web支持,只需要如下操作:
这个稍后有时间尝试吧。
跟着官网实现第一个页面
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
安装成功效果如下图:
看到pubspec.yaml配置文件出现 english_words