第一个Flutter 项目 以及环境搭建

最近公司项目不太紧张了 有空闲的时间来研究学习 一下新的技术 了。

首先什么是Flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。 -- 这是Flutter 中文网给的对flutter 的介绍

flutter是一个跨平台开发语言 即一套代码多端运行 和 NUI APP 、RN (react native) 等框架 类似

为什么选择 flutter 而不使用 uni rn 等一些跨平台框架呢？我认为主要是 flutter 支持的平台更多一些它不仅支持 IOS Android ，在官网的介绍页下也支持 WEB 、桌面端（Windows MacOS Linux ChromeOs ）支持的平台更广 更能节省开发成本

进入正题 说了这么多Flutter 的好处 现在我们来开始 flutter 环境安装 Windows 环境 1.配置要求

系统要求

要安装并运行Flutter，您的开发环境必须满足以下最低要求:

• 操作系统: Windows 7 或更高版本 (64-bit)

• 磁盘空间: 400 MB (不包括Android Studio的磁盘空间).

• 工具: Flutter 依赖下面这些命令行工具.

  • Git for Windows (Git命令行工具)

    如果已安装Git for Windows，请确保命令提示符或PowerShell中运行 git 命令，不然在后面运行flutter doctor时将出现Unable to find git in your PATH错误, 此时需要手动添加C:\Program Files\Git\bin至Path系统环境变量中。

2.环境变量配置

打开电脑的环境变量配置 在用户变量中新建 FLUTTE_HOME, FLUTTER_STORAGE_BASE_URL 如图

FLUTTE_HOME 的路径是你本地FLUTTER 的安装路径确定的

Flutter SDK 下载方法 之前是有安装包，但是环境没搭建好，使用命令：

git clone -b stable https://github.com/flutter/flutter.git

下载特别慢，所以查了一下，使用以下命令下载很快：

git clone https://github.com/flutter/flutter.git -b stable --depth 1

让后运行win 键 + R 打开命令行窗口 输入

flutter -version 出现如图版本号信息

如此操作 flutter 的环境就安装完成

3.dart 安装 flutter 安装完成后 并不可以写第一个flutter 程序而是需要安装 dart ，它作为flutter 的开发语言是Google 于2012 退出的开发语言当时号称替代 JavaScript .这里就不展开讲述dart 了 只对dart 安装做一下讲解 dart windows 下载地址 http://www.gekorm.com/dart-windows/

打开链接 下载dart

第一个是稳定版 第二个是最新版 作为开发阶段下哪一个版本都可以 但是如果用于实际项目开发阶段还是推荐使用稳定版本进行开发，毕竟稳定嘛。

下载下来后你会得到一个 Dart_x64.stable.setup.exe 的文件 无脑进行下一步 就可以了 dart 不需要进行环境配置 4.项目编写 flutter 开发支持的IDE 有 android studio IEAR VS CODE 这里看自己的实际情况进行IED 的选择 我这里选择了Android Studio 进行开发 原因是可以直接点击真机进行调试 。 我们打开android studio
这里我们先不创建flutter 项目 因为还需要安装插件 快捷键 (Ctrl +Alt +S )打开 Settings 选择 Plugins 插件市场

搜索并安装 Dart 以及 Flutter 我这里以及安装过了就不在重新安装了 现在就可以来创建你的第一个Flutter 项目了

点击 左上角FIle 点击NEW 下面 NEw Flutter Project 创建一个Flutter 项目
让后next

然后输入你的项目名称 以及项目的存放路径 以及 android 语言 和IOS 语言 这里我们都默认选择

然后进行下一步 得到你的第一个flutter 项目 路由大概是这样的

等待依赖下载完成后 就可以运行Flutter 项目 了 当然 这时你运行的项目是一个空项目 这里我提供一个在flutter 中文网借鉴的Demo 样例 提供给大家

// Step 7 (Final): Change the app's theme

import 'package:flutter/material.dart';
import 'package:english_words/english_words.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: 'Startup Name Generator',
      theme: ThemeData(
        primaryColor: Colors.orange,
      ),
      home:  const RandomWords(),
    );
  }
}

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

  @override
  createState() => RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _saved = new Set<WordPair>();

  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.list), onPressed: _pushSaved)
        ],
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        if (i.isOdd) return Divider();

        final index = i ~/ 2;
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      },
    );
  }

  Widget _buildRow(WordPair pair) {
    final alreadySaved = _saved.contains(pair);
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: () {
        setState(
              () {
            if (alreadySaved) {
              _saved.remove(pair);
            } else {
              _saved.add(pair);
            }
          },
        );
      },
    );
  }

  void _pushSaved() {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) {
          final tiles = _saved.map(
                (pair) {
              return ListTile(
                title: Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );
          final divided = ListTile
              .divideTiles(
            context: context,
            tiles: tiles,
          )
              .toList();

          return Scaffold(
            appBar: AppBar(
              title: Text('Saved Suggestions'),
            ),
            body: ListView(children: divided),
          );
        },
      ),
    );
  }

}

这里可能会有一个依赖不能为Null的问题 解决办法是 修改pubspec.yaml 文件

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

大功告成运行项目点击顶部的倒三角运行按钮

运行的效果就是这样的 如果有什么问题可以私信联系我，我会在看到问题的第一时间回复呢