02-20 18:18 广州软件学院前端工程师发布于广东

关注

Part5.泛端开发趣闻：Flutter 原生 App 开发全解(4/5)

Flutter 入门：概念与环境搭建（Windows/macOS）

Flutter 概述

Flutter 是一个由 Google 开发的开源 UI 软件开发工具包，主要用于构建高性能的跨平台应用程序。它支持 Android、iOS、Web 以及桌面应用（包括 Windows 和 macOS）。Flutter 的核心特点包括：

快速开发：通过热重载（Hot Reload）功能，开发者可以在不重启应用的情况下实时查看对代码所做的更改。
高性能：Flutter 应用直接编译成原生代码，利用 GPU 渲染，从而实现高性能的用户界面。
丰富的组件：Flutter 提供了一整套高度可定制的 Material Design 和 Cupertino 组件，支持不同平台的原生外观。
单一代码库：开发者只需使用一套 Dart 语言编写代码，即可同时面向多个平台，降低了开发和维护成本。

Windows 或 macOS 环境搭建

1. Windows 环境搭建

步骤 1：系统要求

确保你的 Windows 计算机符合以下要求：

Windows 7 SP1 或更高版本（64 位）
可用的磁盘空间：至少 1.5 GB（不包括 IDE/编辑器）
运行开发工具需要安装 Visual Studio（包含 C++ 开发工具）

步骤 2：下载 Flutter SDK

访问 Flutter 官方网站。
在下载页面选择 Windows 版本，下载 Flutter SDK 的压缩包。
解压下载的文件到你选择的路径（如 C:\src\flutter）。确保该路径没有空格或非 ASCII 字符。

步骤 3：设置环境变量

在“系统属性”中，点击“环境变量”。
在系统变量中找到 Path 变量，点击“编辑”。
新增 Flutter SDK 的 bin 目录路径，例如 C:\src\flutter\bin，点击“确定”。

步骤 4：安装依赖项

安装 Git：访问 Git 官网下载并安装 Git。

步骤 5：检查 Flutter 环境

打开命令提示符（cmd）。
输入 flutter doctor 命令，检查 Flutter 安装情况，确保没有错误。

步骤 6：安装 Android 开发工具

下载并安装 Android Studio。
在 Android Studio 中，安装 Android SDK、SDK 工具以及构建工具。
配置 Android 模拟器进行测试。

2. macOS 环境搭建

步骤 1：系统要求

确保你的 macOS 计算机符合以下要求：

macOS（64 位）
可用的磁盘空间：至少 1.5 GB（不包括 IDE/编辑器）

步骤 2：下载 Flutter SDK

访问 Flutter 官方网站。
在下载页面选择 macOS 版本，下载 Flutter SDK 的压缩包。
解压下载的文件到你选择的路径（如 ~/flutter）。

步骤 3：设置环境变量

打开一个终端窗口。
编辑你的 shell 启动文件（例如 ~/.bash_profile 或 ~/.zshrc，具体取决于你使用的 shell），添加以下行：
```
export PATH="$PATH:`pwd`/flutter/bin"
```
刷新你的终端配置：
```
source ~/.bash_profile
```
或
```
source ~/.zshrc
```

步骤 4：安装 Xcode

从 Mac App Store 安装 Xcode。
启动 Xcode，并接受许可协议。

步骤 5：检查 Flutter 环境

打开终端。
输入 flutter doctor 命令，检查 Flutter 安装情况，确保没有错误。

步骤 6：安装 Android 开发工具

下载并安装 Android Studio。
在 Android Studio 中，安装 Android SDK、SDK 工具以及构建工具。
配置 Android 模拟器进行测试。

总结

通过上述步骤，你可以在 Windows 或 macOS 环境中成功搭建 Flutter 开发环境。Flutter 提供了强大的跨平台开发能力，让你的应用可以在多个平台上运行，充分利用它的优势来构建高效的移动和桌面应用。

Dart 语言基础：快速上手与包管理

Dart 语言快速上手

Dart 是一种由 Google 开发的现代编程语言，具有类 Java 和 JavaScript 的特性，特别适合于构建客户端应用，特别是在 Flutter 中。以下是 Dart 语言的一些基础知识和快速入门指南。

1. 安装 Dart SDK

通过 Flutter 安装：如果你已经安装了 Flutter SDK，Dart 已包含在其中。
单独安装：你也可以从 Dart 官方网站下载并安装 Dart SDK。

2. Dart 语法基础

以下是 Dart 的一些基本语法和示例。

变量和数据类型

void main() {
  var name = 'Flutter';          // 字符串类型
  int age = 2;                  // 整数类型
  double height = 1.75;         // 浮点数类型
  bool isAwesome = true;        // 布尔类型

  // 输出变量
  print('Name: $name, Age: $age');
}

控制流

void main() {
  var isSunny = true;

  // 条件语句
  if (isSunny) {
    print('It is sunny!');
  } else {
    print('It is not sunny.');
  }

  // 循环
  for (var i = 0; i < 5; i++) {
    print(i);
  }
}

函数

// 定义函数
int add(int a, int b) {
  return a + b;
}

void main() {
  var result = add(3, 5);
  print('Sum: $result');
}

类和对象

class Person {
  String name;
  int age;

  // 构造函数
  Person(this.name, this.age);

  // 方法
  void introduce() {
    print('My name is $name and I am $age years old.');
  }
}

void main() {
  var person = Person('Alice', 30);
  person.introduce();
}

异步编程

Dart 内置对异步编程的支持，使用 async 和 await 关键字。

Future<void> fetchData() async {
  // 模拟网络请求
  await Future.delayed(Duration(seconds: 2));
  print('Data fetched!');
}

void main() async {
  print('Fetching data...');
  await fetchData();
  print('Done.');
}

3. 包管理工具：Pub

Dart 使用 Pub 作为其包管理工具，允许开发者轻松管理库和包。你可以通过以下步骤快速上手。

3.1 创建一个 Dart 项目

你可以使用 dart 命令行工具创建一个新的 Dart 项目：

dart create my_project
cd my_project

3.2 编辑 `pubspec.yaml`

在 Dart 项目中，所有的依赖项都在 pubspec.yaml 文件中定义。你可以添加所需的依赖项。例如，添加 http 包：

name: my_project
description: A sample Dart project

dependencies:
  http: ^0.14.0

3.3 获取依赖

使用以下命令获取依赖：

dart pub get

这会查找 pubspec.yaml 中列出的依赖，并将其下载到项目的 .dart_tool 目录中。

3.4 使用包

在代码中，可以引入依赖的包并使用它。例如，使用 http 包：

import 'package:http/http.dart' as http;

void main() async {
  var response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
  print('Response status: ${response.statusCode}');
  print('Response body: ${response.body}');
}

3.5 发布包

如果你想要创建并发布自己的 Dart 包，可以使用以下命令：

dart pub publish

在发布之前，你需要确保你的 pubspec.yaml 文件中包括所有必要的信息，并且你的代码遵循 Dart 的最佳实践。

总结

Dart 是一门功能强大的现代编程语言，适用于构建高性能的客户端应用。通过学习 Dart 语言的基本语法、使用异步编程、以及使用 Pub 管理依赖，你可以快速上手并开始构建应用。希望这个快速指南能够帮助你入门 Dart 语言和 Flutter 开发！

Flutter 基础体验：快速上手与路由导航

Flutter 快速上手、开发体验、路由和导航

一、Flutter 快速上手

安装Flutter SDK：首先，需要从Flutter官网下载并安装Flutter SDK。安装完成后，配置环境变量，以便在任何地方都可以使用Flutter命令。
创建Flutter项目：使用Flutter CLI（命令行界面）可以轻松创建一个新的Flutter项目。例如，通过运行flutter create myapp来创建一个名为“myapp”的新项目。
编写代码：使用Dart语言编写Flutter应用。Dart语言的语法简洁明了，易于上手。开发者可以编辑项目中的Dart文件，实现应用的功能和界面。
运行和调试：使用Flutter CLI或集成开发环境（IDE）如Android Studio或Visual Studio Code来运行和调试应用。Flutter支持热重载功能，可以在应用运行时实时查看代码更改的效果，这大大提高了开发效率。

二、Flutter 开发体验

高效的开发流程：Flutter的热重载功能使得开发者能够实时看到代码更改的效果，从而快速迭代和调试应用。此外，Flutter还提供了丰富的组件库和布局选项，使得构建用户界面变得简单而高效。
跨平台兼容性：Flutter是一个跨平台的移动UI框架，可以在iOS和Android上构建高质量的原生用户界面。这意味着开发者只需要编写一份代码就可以在多个平台上运行，大大降低了开发成本。
社区支持：Flutter拥有一个活跃且庞大的社区，为开发者提供了大量的资源、插件和解决方案。这有助于开发者解决问题并加速开发进程。

三、Flutter 路由和导航

路由管理：在Flutter中，路由管理主要是通过维护一个路由栈来实现的。路由入栈（push）操作对应打开一个新页面，而路由出栈（pop）操作对应页面关闭操作。这类似于原生开发中的导航管理。
Navigator Widget：Flutter中的Navigator是一个管理路由的widget，它通过一个栈来管理路由widget集合。通常当前屏幕显示的页面就是栈顶的路由。Navigator提供了一系列方法来管理路由栈，如push和pop操作来进行页面的入栈和出栈。
MaterialPageRoute：这是Flutter中常用的一个路由widget，它继承自PageRoute类。MaterialPageRoute提供了与平台页面切换动画风格一致的路由切换动画，使得页面切换更加自然和流畅。

综上所述，Flutter提供了高效的开发流程、跨平台兼容性和强大的社区支持，使得开发者能够快速上手并构建出高质量的移动应用程序。同时，Flutter的路由和导航机制也非常灵活和强大，能够满足各种复杂的页面跳转需求。

Flutter UI 开发：Material Design 与 Cupertino 风格

Flutter UI 开发：内置 Material Design 和 Cupertino 风格 Widget

Flutter 提供了一套丰富的 UI 组件，支持 Material Design（安卓风格）和 Cupertino（iOS 风格）的 Widget。下面将为你详细介绍这两种风格的 Widget，帮助你快速上手 UI 开发。

一、Material Design Widget

Material Design 是 Google 提出的设计语言，Flutter 对其进行了全面的支持。以下是一些常用的 Material Design Widget：

Scaffold：提供了应用的基本结构，包括 AppBar、Drawer、BottomNavigationBar 等。

Scaffold(
  appBar: AppBar(
    title: Text('Material Design App'),
  ),
  body: Center(
    child: Text('Hello, Flutter!'),
  ),
);

AppBar：应用的顶部导航栏，支持标题、图标、操作按钮等。

AppBar(
  title: Text('My App'),
  actions: <Widget>[
    IconButton(icon: Icon(Icons.search), onPressed: () {}),
  ],
)

FloatingActionButton：悬浮的操作按钮，通常用于执行主要操作。

FloatingActionButton(
  onPressed: () {},
  tooltip: 'Add',
  child: Icon(Icons.add),
)

Card：用于展示相关信息的卡片，通常用来分隔和突出显示内容。

Card(
  child: Column(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.album),
        title: Text('Album Title'),
        subtitle: Text('Album description'),
      ),
    ],
  ),
)

ListView：用于展示可滚动的列表视图。

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

二、Cupertino Widget

Cupertino Widget 是为 iOS 设计的，风格上与 iOS 界面一致。以下是一些常用的 Cupertino Widget：

CupertinoPageScaffold：用于构建页面的基础结构，包含导航栏。

CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    middle: Text('iOS Design App'),
  ),
  child: Center(
    child: Text('Hello, Flutter!'),
  ),
);

CupertinoButton：用于创建按钮，默认样式和 iOS 风格一致。
```
CupertinoButton(
  child: Text('Press Me'),
  onPressed: () {},
)
```

CupertinoAlertDialog：用于弹出对话框，通常用于提示用户。

showCupertinoDialog(
  context: context,
  builder: (BuildContext context) {
    return CupertinoAlertDialog(
      title: Text('Alert'),
      content: Text('This is an alert dialog.'),
      actions: <Widget>[
        CupertinoDialogAction(
          child: Text('OK'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

CupertinoNavigationBar：iOS 风格的导航栏，支持标题和按钮。

CupertinoNavigationBar(
  middle: Text('Title'),
  trailing: CupertinoButton(
    padding: EdgeInsets.zero,
    child: Text('Done'),
    onPressed: () {},
  ),
);

CupertinoPicker：用于选择数值或选项的滚动选择器。

CupertinoPicker(
  itemExtent: 32.0,
  onSelectedItemChanged: (int index) {},
  children: List<Widget>.generate(10, (int index) {
    return Text('Item $index');
  }),
)

三、选择 Widget 风格

在开发 Flutter 应用时，可以根据目标平台来选择适合的 Widget：

跨平台应用：如果你的应用将同时在 iOS 和 Android 上运行，可以选择使用 Material Design，因为它在大多数情况下适用于两个平台。
平台特定应用：如果你想要确保在 iOS 上提供原生体验，可以使用 Cupertino Widget；而在 Android 上则可以使用 Material Widget。

Flutter 还提供了一种判断当前平台的方式，允许开发者根据平台动态选择 Widget。

import 'dart:io';

Widget build(BuildContext context) {
  if (Platform.isIOS) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(middle: Text('iOS App')),
      child: Center(child: Text('Hello iOS')),
    );
  } else {
    return Scaffold(
      appBar: AppBar(title: Text('Android App')),
      body: Center(child: Text('Hello Android')),
    );
  }
}

总结

Flutter 提供了丰富的内置组件，支持 Material Design 和 Cupertino 设计风格，使得开发者能够轻松创建高质量的用户界面。通过使用这些组件，你可以快速构建出符合不同平台设计规范的应用，从而提升用户体验。利用 Flutter 的强大功能和灵活性，快速实现你的设计需求！

Flutter 组件与布局：常用 Widget 及表单组件

常用 Widget、表单组件和布局方式

在 Flutter 中，有多种常用 Widget 用于构建用户界面。以下是一些常用的 Widget、表单组件和布局方式的介绍。

一、常用 Widget

Text：用于显示文本。

Text('Hello, Flutter!', style: TextStyle(fontSize: 20, color: Colors.blue));

Icon：用于显示图标。

Icon(Icons.favorite, color: Colors.red, size: 24);

Image：用于显示图片，可以是网络图片或本地资源图片。
```
Image.network('https://via.placeholder.com/150');
```
或者使用本地图片：
```
Image.asset('assets/images/logo.png');
```
Container：用于创建一个盒子，可以设置宽高、颜色、边框等属性。
```
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
);
```

Row：用于水平排列多个子 Widget。

Row(
  children: <Widget>[
    Icon(Icons.star),
    Text('Star'),
  ],
);

Column：用于垂直排列多个子 Widget。

Column(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
  ],
);

Stack：用于重叠显示多个子 Widget。

Stack(
  children: <Widget>[
    Container(color: Colors.red, width: 100, height: 100),
    Positioned(top: 20, left: 20, child: Container(color: Colors.blue, width: 50, height: 50)),
  ],
);

二、表单组件

TextField：用于输入文本。

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
  ),
);

Checkbox：用于复选框。

bool isChecked = false;

Checkbox(
  value: isChecked,
  onChanged: (bool? value) {
    // 更新状态
  },
);

Radio：用于单选按钮。

int? selectedValue;

Column(
  children: <Widget>[
    Radio<int>(
      value: 1,
      groupValue: selectedValue,
      onChanged: (int? value) {
        // 更新状态
      },
    ),
    Radio<int>(
      value: 2,
      groupValue: selectedValue,
      onChanged: (int? value) {
        // 更新状态
      },
    ),
  ],
);

Switch：用于开关按钮。

bool isSwitched = false;

Switch(
  value: isSwitched,
  onChanged: (bool value) {
    // 更新状态
  },
);

Form：用于组织和处理表单输入。

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: <Widget>[
      TextFormField(
        decoration: InputDecoration(labelText: 'Enter your email'),
        validato

剩余60%内容，订阅专栏后可继续查看/也可单篇购买

前端求职突破计划文章被收录于专栏

你是否渴望全面提升前端技能？本专栏将带你畅游前端世界！从 JS 深析趣谈，让你领略 JavaScript 的独特魅力；到前端工程漫话，掌握项目构建精髓。深入洞察框架原理，探索 Node 全栈开发。泛端开发趣闻，开启多端应用新视野；揭秘商业解方奥秘，把握行业趋势。高阶专题层层剖析，助你突破技术瓶颈。更有前端面试指南，为求职保驾护航。无论你是新手小白还是资深开发者，这里都有你需要的知识盛宴！