Flutter从基础到入门(一)

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

它也是构建未来的Google Fuchsia   应用的主要方式。

以上来自百度百科

---

此篇主要是介绍如何安装flutter,并成功run,

因为本人是mac系统,所以主要是针对mac系统的安装流程做下介绍,如果是win系统,请自行转义.

系统要求

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

• 操作系统: macOS (64-bit)
• 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）.
• 工具: Flutter 依赖下面这些命令行工具.
  • bash, mkdir, rm, git, curl, unzip, which

下载sdk需要翻墙,或者去github下载安装包都是可以的

1. 安装

flutter官网SDK下载

github下载安装包

下载完成之后进行解压.并且添加到环境中

vim ~/.bash_profile

新增环境

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

然后输入:wq进行保存,接着输入source,进行同步

source ~/.bash_profile

通过echo命令,来查看PATH是否有刚刚配的环境

echo $PATH

运行 flutter doctor

运行以下命令查看是否需要安装其它依赖项来完成安装：

flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）

我输入完之后显示

其中android studio显示

[✓] Android Studio (version 3.1)

    ✗ Flutter plugin not installed; this adds Flutter specific functionality.

    ✗ Dart plugin not installed; this adds Dart specific functionality.

说明没有安装flutter的插件.我们需要进去android studio的plugin界面,进行插件的安装

安装完成之后重启as.

再次输入

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.9.4, on Mac OS X 10.13.4 17E199, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ Brew not installed; use this to install tools for iOS device development.
      Download brew at https://brew.sh/.
[✓] Android Studio (version 3.2)
[!] IntelliJ IDEA Ultimate Edition (version 2018.2.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
    ! No devices available

! Doctor found issues in 4 categories.

说明android studio已经没有问题.可以正常跑了.

2. 运行

Android Studio: 为Flutter提供完整的IDE体验.

创建新应用

1. 选择 File>New Flutter Project
2. 选择 Flutter application 作为 project 类型, 然后点击 Next
3. 输入项目名称 (如 myapp), 然后点击 Next
4. 点击 Finish
5. 等待Android Studio安装SDK并创建项目.

上述命令创建一个Flutter项目，项目名为myapp，其中包含一个使用Material 组件的简单演示应用程序。

然后点击Run.即可开跑..

注:热加载记得开起来.

3. 创建应用

打开as,点击start a new flutter project

之后选择flutter application,点击next

sdk path把我们之前下载过来的sdk路径放进去,project loaction 是代码的存放位置 

将 lib/main.dart.中的内容替换一波

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

然后运行,跑出来应该是以下界面,恭喜你.你成功了

4. 问题解决

如果碰到运行,却一直处在这个界面的时候.别慌.

Waiting for another flutter command to release the startup lock...

去到下载的flutter目录下bin目录.cache下把lockfile删除即可.

flutter -> bin -> cache -> lockfile

删除完成之后重启as