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

frc e414840829413a507527873c968b1401 - Flutter学习--第一个行flutter代码
图片.png

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

frc 7e29aa2ed02a471e63f99ab83ae7c6eb - Flutter学习--第一个行flutter代码
图片.png

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

frc e1af764a25b146d697239122b716dd4c - Flutter学习--第一个行flutter代码
图片.png

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

frc 075bf8c3a4cffdd7d35f3fa8963e41ff - Flutter学习--第一个行flutter代码
图片.png

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

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

frc 173af0fe86e06a4c92660b4949d25516 - Flutter学习--第一个行flutter代码
图片.png

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

二,运行项目

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

frc 1d9d5b01841d3f0f153681c070d1af4f - Flutter学习--第一个行flutter代码
图片.png

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

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

frc 91ce1364c5eece0244c076d71aa27f5d - Flutter学习--第一个行flutter代码
图片.png

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

frc 657edcd21716f848d6cbff0649e0f6c4 - Flutter学习--第一个行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之旅啦!给自己❤️。

frc cae4346fa69de79522085df84503aad4 - Flutter学习--第一个行flutter代码
图片.png

Flutter学习–第一个行flutter代码