我的Flutter倒霉之旅（一）

前言

尽管很多编程规则大同小异，但第一次接触Flutter的我还是有些感到不习惯，那种感觉就像终于到了自己梦寐以求的青藏高原，却突然水土不服有了高原反应。好在看了一下文档，便也理通了思路。那么今天我就先写一下简单的示例，运行一下我的第一个Flutter文件，有兴趣的同学也可以动手学习一下。看完了别忘了点赞支持一下哟！
(ps:如果你是第一次查看本篇文章，建议查看 我的flutter倒霉之旅专题)

基于Android Studio创建项目

• File->New->New Flutter Project->选择Flutter Application->点击Next

图1

• 填写Project name->Flutter SDK path->Project location

• 注：Create project offline(创建脱机项目可选可不选)，没有SDK（开发工具包）可以点击它旁边的Install SDK 进行下载

  
  图2

• 确认Package name->Finish

  
  图3

• 由于我在还运行了另一个项目所以它弹出了这个会话，如果是初次打开并创建Flutter项目，应该不会弹出此图，如果也弹出了，一样一样的操作即可

  
  图3

• 项目创建成功后是这个样子的

  
  图4

自定义Flutter文件

• lib->Package->自定义一个包名->OK

  
  图5

• 自定义好包名的的文件目录结构如下

  
  图6

• lib->com->New->Dart File->填写文件Name->然后点击回车键

  
  图7

• 目录结构如下

  
  图8

编写代码

• one.dart文件下编写代码

import 'package:flutter/material.dart';

class TestWidget extends StatefulWidget {
  TestWidget({Key key, this.title}) : super(key: key);
  final String title;
  @override
  State<StatefulWidget> createState () => TestState();

}

class TestState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("雨落流年"),),
      body: Text("我的第一个Flutter文件"),
    );
  }

}

• 在main文件里调用

import 'com/one.dart';

• 效果图如下

• 记得更改home的文件配置，如果不改的话你就不会看到效果哟

  
  图9

总结

所有的文件最终都会由main文件执行，我们只需要在main文件中导包就可以。在步骤本身不多，主要是我为了方便理解然后拆解了一下，踩坑的同学可以联系我或者在文章下方留下你的问题，我会帮你解答的。还有一点，一定配好开发环境。

(本文适合初学者，如果你是大佬级别的人物，我也欢迎指教！)