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

发布于：2022-12-28 ⋅ 阅读:(1050) ⋅ 点赞:(0)

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"
  • 配置Android SDK（重要）
flutter config --android-sdk /path/to/android/sdk
  • 同意Android licences许可，一直输y回车即可
flutter doctor --android-licenses

在这里插入图片描述

如果报错：

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

支持UMP

flutter channel master
flutter upgrade
flutter config --enable-windows-uwp-desktop
  • 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.2 Mac 环境配置

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

  • 下载 解压
  • 添加环境变量 /etc/paths 文件修改添加flutter/bin 路径
export PATH="$PATH:`pwd`/flutter/bin"

  • 或通过修改.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
    • 修改.zshrc 文件，并在最后加入一行代码
    source ~/.bash_profile
    • 退出终端生效

  • 终端运行：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)
##漫长等待
  • xcode 配置到paths, 添加
/Volumes/文档/Xcode.app/Contents/Developer
  • xcode路径更新
sudo xcode-select --switch /Volumes/MyFiles/Xcode.app/Contents/Developer

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

⚠️注意：如果模拟器一直无法启动，可能是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'),
        ),
      ),
    );
  }
}

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
  • 执行 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();
}

在这里插入图片描述

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

Android Studio插件
在这里插入图片描述

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布