Flutter学习--第一个行flutter代码

前两天废了九牛二虎之力终于搭建好了flutter环境，正准备大展拳脚开始大干一场的时候，没想到第一个项目的创建就给我了我一个下马威。

图片.png

话不多说，继续自己的踩坑之旅！
一.创建项目
当我们在Android studio将flutter插件都安装好之后，我们打开AS在创建项目下方应该是有一个创建flutter项目的选项的。如下图

图片.png

点击创建项目，在我们填好项目名称,路径等信息，满心欢喜的点击创建的时候，不出意料的话，你应该很有可能会卡在下面这个creating flutter project 界面！

图片.png

一脸懵逼？？我是谁，我在哪？我在干嘛？为什么会这样，xcode创建项目从来没有这样过啊。
没关系，机智的你现在打开你创建项目的路径

图片.png

可以看到，其实项目已经创建在你的文件夹中啦。

强制关掉AS，在重新打开，Open一个现有的项目，选择你创建的flutter项目的根目录，记住是根目录

图片.png

不要跟我一样傻傻的打开android项目文件夹了。此处心疼自己10秒中。当时打开android项目在AS中Run了半天硬是跑不起来，一直有错误。当时还是问了安卓的同事错误原因，他帮忙一看，你的flutter怎么跑的kotlin代码啊。我才恍然大悟。

二，运行项目

在我们打开自己创建的项目之后，首先选择AS模拟器，由于我的电脑上有现成的苹果模拟器，在这里直接选择就行了。点击AS上方的绿色小三角。跑起来！终于！看到了属于我们的第一个flutter程序，很激动!，有木有。

图片.png

可以看到页面是由navigation bar，label，button，等控件组成的一个计数器小程序。程序中还可以看到已有的代码。

由于本人平时开发喜欢真机调试，因此插上苹果手机，选择设备为真机，run一下，OK，不出意外，还是报错了。Could not build the precompiled application for the device .Error launching application on xx.
哈哈 ，就知道没这么简单。不过这点小事还是难不倒我的。

图片.png

网上找了一下，原来是iOS工程的问题。用xcode打开iOS工程，选择调试证书，编译，OK 没报错。xcode清除缓存，重启，然后在flutter项目目录下执行 flutter clean 命令，重启，重新运行。
终于可以将自己创建的第一个flutter 程序跑到自己手机上了。

图片.png

开森，删掉默认代码。接下来开始自己的第一行代码。

import 'package:flutter/material.dart';

void main() => runApp(MyWidget());

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'hello flutter-',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 50,
          color: Colors.red,
          backgroundColor: Colors.yellow,
          fontWeight: FontWeight.bold,

        ),
      ),
    );
  }
}

点击运行，大功告成。哈哈，终于可以真正的开始flutter之旅啦！给自己❤️。

图片.png