Flutter-1(环境搭建)

371 阅读3分钟

中文网站地址

依次选择对应的平台 windows macos ios之类的

开发工具很多 推荐 VSCode

安装插件

  • Flutter
  • dart

image.png

根据 VS Code 的提示,安装 Flutter

  1. 启动 VS Code。

  2. 打开 命令面板 (Command Palette) ,按下快捷键 Command + Shift + P

  3. 在 命令面板 (Command Palette)  中输入 flutter

  4. 选择 Flutter: New Project

  5. VS Code 会提示你在计算机上找到 Flutter SDK。

    1. 如果你已经安装 Flutter SDK,请单击 Locate SDK

    2. 如果你没有安装 Flutter SDK, 请单击 Download SDK

      如果你没有按照 开发工具的必要条件 安装 Git ,单击该按钮后会导航至 Flutter 安装页面。

  6. 当提示 Which Flutter template?  的时候,请忽略它。可以按下 Esc。你可以在检查完开发配置后创建初始测试项目。

下载 Flutter SDK

  1. 当对话框 Select Folder for Flutter SDK 显示时,选择你想要安装 Flutter 的位置。

    VS Code 会打开你默认的位置。你可以选择其他位置。

    请考虑 ~/development/ 这样的位置

  2. 单击 Clone Flutter

    在下载 Flutter 时,VS Code 会弹出该通知:

    Downloading the Flutter SDK. This may take a few minutes.
    

    content_copy

    下载需要一些时间。如果你怀疑下载被挂起,请单击 Cancel 取消下载后,再重新尝试安装。

  3. Flutter 一旦完成下载, 输出 (Output)  面板就会显示。

    Checking Dart SDK version...
    Downloading Dart SDK from the Flutter engine ...
    Expanding downloaded archive...
    

    content_copy

    成功后,VS Code 会弹出该通知:

    Initializing the Flutter SDK. This may take a few minutes.
    

    content_copy

    初始化时,输出 (Output)  面板会显示下面的内容:

    Building flutter tool...
    Running pub upgrade...
    Resolving dependencies...
    Got dependencies.
    Downloading Material fonts...
    Downloading Gradle Wrapper...
    Downloading package sky_engine...
    Downloading flutter_patched_sdk tools...
    Downloading flutter_patched_sdk_product tools...
    Downloading windows-x64 tools...
    Downloading windows-x64/font-subset tools...
    

    content_copy

    该进程还会运行 flutter doctor -v。此时,请忽略该输出。因为 Flutter Doctor 可能会显示与本次快速启动无关的错误。

    Flutter 安装成功后,VS Code 会弹出该通知:

    Do you want to add the Flutter SDK to PATH so it's accessible
    in external terminals?
    

    content_copy

  4. VS Code 可能会显示一则 Google Analytics 的通知。

    如果你同意,请单击 OK

  5. 在所有 Terminal 窗口中启用 flutter

    1. 关闭,然后重新打开所有 Terminal 窗口。
    2. 重新启动 VS Code。

配置 iOS 开发

#

安装并配置 Xcode

#

要为 iOS 开发 Flutter 应用,请安装 Xcode,以便编译为原生字节码。

  1. 打开 App Store 并登录。

  2. 搜索 Xcode

  3. 点击 获取 (Install)

    Xcode 安装程序占用 6 GB 以上的存储空间。下载可能需要一些时间。

  4. 请运行以下命令,来配置命令行工具使用已安装的 Xcode 版本。

    sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'
    

    content_copy

    使用以上路径可以获取最新版本的 Xcode。如果你需要使用其他版本,请自行指定该路径。

  5. 签署 Xcode 许可证协议。

    sudo xcodebuild -license
    

    content_copy

请尽量使用最新版本的 Xcode。

选择模拟器

image.png

随便写点代码 lib/main.dart

import 'package:flutter/material.dart';

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

class TabBarDemo extends StatelessWidget {
  const TabBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: const Text('Tabs Demo'),
          ),
          body: const TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

运行 flutter run

image.png

录屏2024-09-10 16.50.41.gif