Flutter基础入门-环境搭建并Helloworld

1 开发环境配置

1.1 Window系统下安装配置Android、Window Desktop

参考：https://docs.flutter.dev/get-started/install/windows

• 下载安装包
• 配置系统环境路径

• cmd 运行：flutter doctor 检查环境依赖情况，发行Android toolchain没有配置(Android Studio自行安装)

• 配置Android Studio

flutter config --android-studio-dir="C:\Program Files\Android\Android Studio"
1

• 配置Android SDK（重要）

flutter config --android-sdk /path/to/android/sdk
1

• 同意Android licences许可，一直输y回车即可

flutter doctor --android-licenses
1

如果报错：

Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to
resolve this.

检查Android SDK是否安装完整，新版AndroidStudio Obsoltete废弃掉SDK Tools,但是Flutter要用

• 再次检查 flutter doctor
  

• 配置flutter支持Windows Desktop 桌面应用程序

flutter config --enable-windows-desktop
1

支持UMP

flutter channel master
flutter upgrade
flutter config --enable-windows-uwp-desktop
1
2
3

• adb 安装

https://dl.google.com/android/repository/platform-tools-latest-windows.zip

添加adb.exe到系统环境变量

参考：How to Install ADB on Windows, macOS, and Linux (xda-developers.com)

注意:

安装手机驱动：SDK Tools ，勾选Google USB Driver,并安装

手机开启USB调试模式、USB安装允许等设置开启

adb找不到设备，参考解决

https://blog.csdn.net/u013906715/article/details/89555731
1

1.2 Mac 环境配置

参考：https://flutter.cn/docs/get-started/install/macos

• 下载 解压
• 添加环境变量 /etc/paths 文件修改添加flutter/bin 路径

export PATH="$PATH:`pwd`/flutter/bin"
1

• 或通过修改.bash_profile使环境变量自动生效

  • vim .bash_profile粘贴以下内容

  export PATH=$PATH:/Users/weili/opt/flutter/bin
  export PUB_HOSTED_URL=https://pub.flutter-io.cn 
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  1
  2
  3

  • 修改.zshrc 文件，并在最后加入一行代码

  source ~/.bash_profile
  1

  • 退出终端生效

• 终端运行：flutter

• 终端运行：flutter doctor，发现并没有检测到Xcode 需要配置Xcode

• xcode 下载安装

Xcode版本和Mac OS 版本支持情况

参考：https://developer.apple.com/cn/support/xcode/

下载：https://developer.apple.com/download/all/?q=xcode

cd /Volumes/文档/               
xip --expand Xcode_12.4.xip 
xip: signing certificate was "Development Update" (validation not attempted)
##漫长等待  
1
2
3
4
5

• xcode 配置到paths, 添加

/Volumes/文档/Xcode.app/Contents/Developer
1

• xcode路径更新

sudo xcode-select --switch /Volumes/MyFiles/Xcode.app/Contents/Developer
1

• 注意flutter支持最低版本Xcode为12.01，低点版本也能用，，但是某些功能可能用不了
  

• CocoaPods 安装 参考：https://guides.cocoapods.org/using/getting-started.html#installation

$ sudo gem install cocoapods
1

• 执行Xcode许可 sudo xcodebuild -license
• Mac OS支持：flutter config --enable-macos-desktop
• 执行 flutter doctor 查看
• 打开iOS模拟器

1

⚠️注意：如果模拟器一直无法启动，可能是Xcode路径有中文名

2 配置VS Code

开发编辑器，一般Android开发用Android Studio，iOS开发用Xcode。这些都是集成的IDE，我们也可以通过配置Visual Studio Code 来开发Flutter。根据自己喜欢的开发工具配置，参考官网：https://docs.flutter.dev/get-started/editor?tab=androidstudio

我们比较偏向于使用轻量级的VS Code。

• 安装 flutter插件即可

3 VS Code创建HelloWorld

3.1 创建项目

ctrl+ship+p打开命令面板输入：flutter: New Project ,选择Application创建项目helloworld

注意底部可以选择支持的设备，NoDevice 的就选择即可

3.2 运行

选择好设备，然后按F5运行调试

• Android设备

等待十几分钟（我电脑垃圾）终于运行到Android emulator了

• web 运行

• iOS运行
  

3.3 项目组成

• android - 自动生成的源代码来创建 android 应用程序
• ios - 自动生成的源代码来创建 ios 应用程序
• lib - 包含使用Flutter框架编写的 Dart 代码的主文件夹
• ib/main.dart - Flutter 应用程序的入口点
• test - 包含 Dart 代码的文件夹以测试Flutter应用程序
• test/widget_test.dart - 示例代码
• .gitignore - Git 版本控制文件
• .metadata - 由Flutter工具自动生成
• .packages - 自动生成以跟踪Flutter包
• .iml - Android Studio 使用的项目文件
• pubspec.yaml - 由Pub使用，Flutter 包管理器，安装第三方库经常用
• pubspec.lock - 由 Flutter 包管理器Pub自动生成
• README.md - 以 Markdown 格式编写的项目描述文件

3.4 main.dart 代码简析

创建的项目默认是一个点击按钮计数的功能，我们不要直接分析核心代码（不看计数功能）,可以下代码替换原来代码。

import 'package:flutter/material.dart'; // 导入material包
//main 入口函数，
void main() {
  runApp(const MyApp());//widget
}
//ui 构建
class MyApp extends StatelessWidget {//StatelessWidget 是一个UI小部件
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {//集成StatelessWidget build方法
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Flutter在各平台platform运行原理

• 浏览器：DOM树
• Android ：View
• iOS ：UIView
• Window Desktop: UWP组件

解读：

• runApp 需要传入一个Widget类，并强制让其全屏
• Basic Widget 小部件控件类型有：

Text : 文本

Row,Column 水平，垂直方向灵活布局，基于flexbox布局模式设计。

flexbox布局模式参考网络资料：https://www.cnblogs.com/horanly/p/6256560.html

**Stack 😗*上，右，下，左来定位， Stack 是基于 Web 中的绝对位置布局模型设计。

Container :创建一个可见的矩形元素

在线练习：https://flutter.cn/docs/codelabs/layout-basics

4 添加第三方库

pubspec.yaml 下添加 english_words: ^4.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
  english_words: ^4.0.0
1
2
3
4
5
6
7

• 执行 flutter pub get 更新刷新

5 创建无线滚动的单词表

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// #docregion MyApp
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // #docregion build
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: '欢迎Flutter',
      home: RandomWords(),
    );
  }
  // #enddocregion build
}
// #enddocregion MyApp

// #docregion RWS-var
class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);
  // #enddocregion RWS-var

  // #docregion _buildSuggestions
  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: /*1*/ (context, i) {
          if (i.isOdd) return const Divider(); /*2*/

          final index = i ~/ 2; /*3*/
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10)); /*4*/
          }
          return _buildRow(_suggestions[index]);
        });
  }
  // #enddocregion _buildSuggestions

  // #docregion _buildRow
  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
  // #enddocregion _buildRow

  // #docregion RWS-build
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Word随机生成单词'),
      ),
      body: _buildSuggestions(),
    );
  }
  // #enddocregion RWS-build
  // #docregion RWS-var
}
// #enddocregion RWS-var

class RandomWords extends StatefulWidget {
  const RandomWords({Key? key}) : super(key: key);

  @override
  State<RandomWords> createState() => _RandomWordsState();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

6 常见问题

• 中文编码乱码，VS Code 编码切换：utf-8

建议设置VS Code 编码格式为utf-8

7 提高生产力

VS Code 插件

• Flutter Widget Snippets
• Awesome Flutter Snippets
• Bracket Pair Colorizer

Flutter SDK 更新或者channel切换

flutter channel dev   #stable、master、dev、beta
flutter upgrade
1
2

Android Studio插件